Yevhen-dev 4 tahun lalu
melakukan
dea0c2aebe
50 mengubah file dengan 1205 tambahan dan 0 penghapusan
  1. 43 0
      HW1_Chukharkin_Yevhen/css/reset.css
  2. 0 0
      HW1_Chukharkin_Yevhen/css/style.css
  3. TEMPAT SAMPAH
      HW1_Chukharkin_Yevhen/image/favicon.ico
  4. 114 0
      HW1_Chukharkin_Yevhen/index.html
  5. 0 0
      HW1_Chukharkin_Yevhen/js/main.js
  6. 43 0
      HW2_Chukharkin_Yevhen/css/reset.css
  7. 54 0
      HW2_Chukharkin_Yevhen/css/style.css
  8. TEMPAT SAMPAH
      HW2_Chukharkin_Yevhen/image/logo.png
  9. 42 0
      HW2_Chukharkin_Yevhen/index.html
  10. 0 0
      HW2_Chukharkin_Yevhen/js/main.js
  11. 46 0
      HW3_Chukharkin_Yevhen/css/reset.css
  12. 183 0
      HW3_Chukharkin_Yevhen/css/style.css
  13. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.ttf
  14. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.woff
  15. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.woff2
  16. 5 0
      HW3_Chukharkin_Yevhen/fonts/generator_config.txt
  17. 12 0
      HW3_Chukharkin_Yevhen/fonts/stylesheet.css
  18. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/fonts/webfontkit-20190802-055257.zip
  19. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/images/cup.png
  20. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/images/donut_right.png
  21. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/images/finger.png
  22. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/images/grass_bottom.png
  23. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/images/hedgehog_left.png
  24. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/images/home_center.jpg
  25. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/images/ico_float.png
  26. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/images/lamp_top.png
  27. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/images/lightning.png
  28. TEMPAT SAMPAH
      HW3_Chukharkin_Yevhen/images/umbrella.png
  29. 75 0
      HW3_Chukharkin_Yevhen/index.html
  30. 0 0
      HW3_Chukharkin_Yevhen/js/main.js
  31. 46 0
      HW4_Chukharkin_Yevhen/css/reset.css
  32. 90 0
      HW4_Chukharkin_Yevhen/css/style.css
  33. 43 0
      HW4_Chukharkin_Yevhen/index.html
  34. 0 0
      HW4_Chukharkin_Yevhen/js/main.js
  35. TEMPAT SAMPAH
      HW4_Chukharkin_Yevhen/media/audio/hello.mp3
  36. TEMPAT SAMPAH
      HW4_Chukharkin_Yevhen/media/images/list.png
  37. TEMPAT SAMPAH
      HW4_Chukharkin_Yevhen/media/video/video.mp4
  38. TEMPAT SAMPAH
      HW5_Chukharkin_Yevhen/FlexFroggy.png
  39. TEMPAT SAMPAH
      HW5_Chukharkin_Yevhen/ValidatorCSS.png
  40. TEMPAT SAMPAH
      HW5_Chukharkin_Yevhen/ValidatorHTML.png
  41. 46 0
      HW5_Chukharkin_Yevhen/css/reset.css
  42. 255 0
      HW5_Chukharkin_Yevhen/css/style.css
  43. 108 0
      HW5_Chukharkin_Yevhen/index.html
  44. 0 0
      HW5_Chukharkin_Yevhen/js/main.js
  45. TEMPAT SAMPAH
      HW5_Chukharkin_Yevhen/media/images/artistic_item3.png
  46. TEMPAT SAMPAH
      HW5_Chukharkin_Yevhen/media/images/football_item1.png
  47. TEMPAT SAMPAH
      HW5_Chukharkin_Yevhen/media/images/ico_float.png
  48. TEMPAT SAMPAH
      HW5_Chukharkin_Yevhen/media/images/runner_item2.png
  49. TEMPAT SAMPAH
      HW5_Chukharkin_Yevhen/media/images/tennis_item5.png
  50. TEMPAT SAMPAH
      HW5_Chukharkin_Yevhen/media/images/volleyball_item4.png

+ 43 - 0
HW1_Chukharkin_Yevhen/css/reset.css

@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

+ 0 - 0
HW1_Chukharkin_Yevhen/css/style.css


TEMPAT SAMPAH
HW1_Chukharkin_Yevhen/image/favicon.ico


+ 114 - 0
HW1_Chukharkin_Yevhen/index.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+	<meta charset="UTF-8">
+	<link rel="shortcut icon"  href="image/favicon.ico">
+	<title>A-level</title>
+</head>
+<body>
+
+	<header class="header">
+		<h1>Homework 1</h1>
+	</header>
+
+	<main class="main">
+		<article class="main_tags">
+			<h2>Список тегов :</h2>
+
+			<section class="main_tags_block"><h3>Блочные теги :</h3>
+				<dl>
+					<dt>&lt; address  &gt;</dt>
+					<dd>Определяет контактную информацию автора документа/статьи.</dd>
+				</dl>
+				<dl>
+					<dt>&lt; div  &gt;</dt>
+					<dd>Определяет раздел документа.</dd>
+				</dl>
+				<dl>
+					<dt>&lt; h1  &gt; - &lt; h6  &gt;</dt>
+					<dd>Определяют HTML заголовки.</dd>
+				</dl>
+				<dl>
+					<dt>&lt; ol  &gt;</dt>
+					<dd>Создает нумерованный(упорядоченный) список.</dd>
+				</dl>
+				<dl>
+					<dt>&lt; ul  &gt;</dt>
+					<dd>Определяет маркированный(неупорядоченный) список.</dd>
+				</dl>
+			</section>
+
+			<section class="main_tags_semantic"><h3>Семантические теги :</h3>
+				<dl>
+					<dt>&lt; article  &gt;</dt>
+					<dd>Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка.</dd>
+				</dl>
+				<dl>
+					<dt>&lt; section  &gt;</dt>
+					<dd>Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок.</dd>
+				</dl>
+				<dl>
+					<dt>&lt; nav  &gt;</dt>
+					<dd>Предназначен для создания блока навигации веб-страницы или всего веб-сайта.</dd>
+				</dl>
+				<dl>
+					<dt>&lt; header  &gt;</dt>
+					<dd>Группирует вводные и навигационные элементы. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип.</dd>
+				</dl>
+				<dl>
+					<dt>&lt; main  &gt;</dt>
+					<dd>Элемент представляет основное содержимое документа (содержимое элемента &lt; body &gt;).</dd>
+				</dl>
+			</section>
+
+			<section class="main_tags_single"><h3>Одиночные теги :</h3>
+				<dl>
+					<dt>&lt; area  &gt;</dt>
+					<dd>Часть карты изображений.</dd>
+				</dl>
+				<dl>
+					<dt>&lt; bgsound  &gt;</dt>
+					<dd>Проигрывает музыку при открытии страницы, нестандартный тег.</dd>
+				</dl>
+				<dl>
+					<dt>&lt; img  &gt;</dt>
+					<dd>Изображение (фотография, картинка, рисунок и т.д.).</dd>
+				</dl>
+				<dl>
+					<dt>&lt; link  &gt;</dt>
+					<dd>Загружает внешние файлы .css, .xml, .ico.</dd>
+				</dl>
+				<dl>
+					<dt>&lt; br  &gt;</dt>
+					<dd>Перевод строки.</dd>
+				</dl>
+			</section>
+		</article>
+
+		<p class="main_extra">
+			<a href="#">Белая</a> 
+			<b>берёза</b><br>
+			<i>Под моим окном</i><br>
+			<i><b>Принакрылась снегом,</b></i><br>
+			<mark>Точно сребром.</mark>			
+		</p>
+
+		<article class="main_list">
+			<h3>Список:</h3>
+			<ol>
+				<li><b>Пункт первый</b></li>
+				<li><i>Пункт второй</i></li>
+				<li><u>Пункт третий</u></li>	<!-- Tag <u></u> not valid -->
+				<li><a class="google-link" id="mainlink" href="https://www.google.com" target="_blank">Пункт четвёртый</a></li>
+				<li><span style="color: #FF0000">Пункт пятый</span></li>
+			</ol>
+		</article>
+		
+	</main>
+
+	<footer class="footer">
+		<p class="footer_contact">Yevhen Chukharkin <a href="tel:+380888888888">+38088-88-88-888</a></p>
+	</footer>
+
+</body>
+</html>

+ 0 - 0
HW1_Chukharkin_Yevhen/js/main.js


+ 43 - 0
HW2_Chukharkin_Yevhen/css/reset.css

@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

+ 54 - 0
HW2_Chukharkin_Yevhen/css/style.css

@@ -0,0 +1,54 @@
+* {
+    box-sizing: border-box;
+}
+.item1_quotation {
+	color: green;
+}
+.list_link {
+	list-style: none;
+}
+.list_link li:first-child a {
+	color: green;
+}
+.list_link li:nth-child(even) {
+	font-size: 20px;
+}
+.list_link li:nth-child(odd) {
+	font-size: 18px;
+}
+.list_link li:nth-child(3n+1) {
+	background-color: yellow;
+}
+.list_link li a {
+	text-decoration: none;
+}
+.list_link li a:hover {
+	text-decoration: underline;
+	font-size: 25px;
+	color: blue;
+}
+.list_link li:before {
+	content: "-";
+}
+.logo{
+	width: 50vw;
+	height: 30vh;
+}
+.logo a{
+	text-decoration: none;
+	color: green;
+}
+.logo a img {
+	width: 60%;
+	height: 80%;
+}
+
+.logo a:after{
+	content: "Hello world!";
+	font-size: 2vw;
+}
+.logo a:hover::after{
+		content:"Nice to meet you!";
+		cursor: pointer;
+
+}

TEMPAT SAMPAH
HW2_Chukharkin_Yevhen/image/logo.png


+ 42 - 0
HW2_Chukharkin_Yevhen/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+	<meta charset="UTF-8">
+	<title>Homework</title>
+	<link media="all" rel="stylesheet" href="css/style.css">
+	<style>
+		.item1_quotation {
+			color: blue;
+		}
+	</style>
+</head>
+<body>
+
+	<div class="item1">
+		<blockquote class="item1_quotation" cite="https://habr.com/ru/post/275841" style="color: red;"> <!-- Most important style used here -->
+			<p class="item1_quotation_block">Программирование сегодня — это гонка разработчиков программ, стремящихся писать программы больше и с лучшей идиотоустойчивостью, и вселенной, которая пытается создавать больших и лучших идиотов. Пока вселенная побеждает.— Rick Cook</p>
+		</blockquote>
+	</div>
+	<div class="list">
+		<ul class="list_link">
+			<li><a href="#">Text1</a></li>
+			<li><a href="#">Text2</a></li>
+			<li><a href="#">Text3</a></li>
+			<li><a href="#">Text4</a></li>
+			<li><a href="#">Text5</a></li>
+			<li><a href="#">Text6</a></li>
+			<li><a href="#">Text7</a></li>
+			<li><a href="#">Text8</a></li>
+			<li><a href="#">Text9</a></li>
+			<li><a href="#">Text10</a></li>
+		</ul>
+	</div>
+
+
+<div class="logo">
+	<a href="#" target="_blank"><img src="image/logo.png" alt="Logo"></a>
+</div>
+
+	
+</body>
+</html>

+ 0 - 0
HW2_Chukharkin_Yevhen/js/main.js


+ 46 - 0
HW3_Chukharkin_Yevhen/css/reset.css

@@ -0,0 +1,46 @@
+* {
+	box-sizing: border-box;
+}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sup, tt, var,
+b, u, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

+ 183 - 0
HW3_Chukharkin_Yevhen/css/style.css

@@ -0,0 +1,183 @@
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.conteiner {
+	font-family: 'carlitobold', sans-serif;
+}
+.left {
+	float: left;
+	margin: 0 20px 20px 0;
+}
+.right {
+	float: right;
+	margin: 20px 0 20px 20px;
+}
+.conteiner_popup {
+	color: green;
+	font-weight: bold;
+}
+.conteiner i {
+	color: blue;
+}
+.conteiner b {
+	font-style: italic;
+}
+.conteiner_word-space {
+	word-spacing: 20px;
+}
+.conteiner_popup {
+	position: relative;
+}
+.conteiner_popup:hover:after {
+	content: attr(data-title);
+	position: absolute;
+	top: 20px;
+	right: 0;
+	font-weight: normal;
+	font-size: 11px;
+	color: black;
+	background-color: #808080;
+	border: 1px solid black;
+	z-index: 1;
+}
+.bg-holder h1 {
+	font-weight: bold;
+	text-align: center;
+	margin: 20px 0;
+}
+.bg-holder_bg-box {
+	width: 70vw;
+	height: 40vh;
+	margin-right: auto;
+	margin-left: auto;
+	background: url(../images/home_center.jpg) 50% 50% no-repeat,
+				url(../images/lamp_top.png) 0 0 repeat-x,
+				url(../images/grass_bottom.png) 0 100% repeat-x,
+				url(../images/donut_right.png) 100% 0 repeat-y,
+				url(../images/hedgehog_left.png) 0 0 repeat-y;	
+	background-size: 40% 70%, 2vw 4vh, 3vw 10vh, 2vw 4vh, 2vw 4vh;
+	background-color: #2a700a;			
+}
+/*
+           THIS CODE USE WHEN ADD IMAGE BY CSS
+
+
+.conteiner-game {
+	width: 50vw;
+	height: 50vh;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 20vh;
+	position: relative;
+}
+.conteiner-game div {
+	width: 35%;
+	height: 40%;
+	background-color: #ede9dd;
+	border: 1px solid black;
+	box-shadow: 8px 8px 5px grey;
+	position: absolute;
+}
+.conteiner-game p {
+	display: none;
+	margin-top: -1px;
+	margin-left: -1px;
+	width: 20vw;
+	height: 25vh;
+	background-color: inherit;
+	border: inherit;
+	box-shadow: inherit;
+	position: absolute;
+	z-index: 1;
+	overflow: hidden;
+}
+.conteiner-game_umbrella {
+	background: url(../images/umbrella.png) 20% 20% no-repeat;
+	top: 10%;
+	left: 10%;
+}
+.conteiner-game_cup {
+	background: url(../images/cup.png) 20% 20% no-repeat;
+	top: 25%;
+	left: 25%;
+}
+.conteiner-game_arm {
+	background: url(../images/finger.png) 20% 20% no-repeat;	
+	top: 40%;
+	left: 40%;
+}
+.conteiner-game_lightning{
+	background: url(../images/lightning.png) 20% 20% no-repeat;
+	top: 55%;
+	left: 55%;
+}
+
+.conteiner-game div:hover p{
+	display: block;
+
+}*/
+
+         /* THIS CODE USE WHEN ADD IMAGE BY HTML*/
+
+.conteiner-game {
+	width: 50vw;
+	height: 50vh;
+	margin-top: 50px;
+	margin-bottom: 50px;
+	margin-left: auto;
+	margin-right: auto;
+	position: relative;
+}
+
+.conteiner-game div {
+	width: 35%;
+	height: 40%;
+	background-color: #ede9dd;
+	border: 1px solid black;
+	box-shadow: 8px 8px 5px grey;
+	position: absolute;
+}
+
+.conteiner-game img {
+	position: absolute;
+	top: 15%;
+	left: 15%;
+}
+
+.conteiner-game p {
+	display: none;
+	width: 20vw;
+	height: 25vh;
+	margin: -1px 0 0 -1px;
+	background-color: #ede9dd;
+	border: 1px solid black;
+	box-shadow: 8px 8px 5px grey;
+	overflow: hidden;
+	z-index: 1;
+}
+
+.conteiner-game div:hover p{
+	display: block;
+}
+.conteiner-game div:hover img {
+	display: none;
+}
+
+.conteiner-game_umbrella {
+	top: 10%;
+	left: 10%;
+} 
+.conteiner-game_cup {
+	top: 25%;
+	left: 25%;
+}
+.conteiner-game_arm {
+	top: 40%;
+	left: 40%;
+}
+.conteiner-game_lightning {
+	top: 55%;
+	left: 55%;
+} 

TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.ttf


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.woff


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.woff2


+ 5 - 0
HW3_Chukharkin_Yevhen/fonts/generator_config.txt

@@ -0,0 +1,5 @@
+# Font Squirrel Font-face Generator Configuration File
+# Upload this file to the generator to recreate the settings
+# you used to create these fonts.
+
+{"mode":"optimal","formats":["woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}

+ 12 - 0
HW3_Chukharkin_Yevhen/fonts/stylesheet.css

@@ -0,0 +1,12 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 2, 2019 */
+
+
+
+@font-face {
+    font-family: 'carlitobold';
+    src: url('carlito-bold-webfont.woff2') format('woff2'),
+         url('carlito-bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}

TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/fonts/webfontkit-20190802-055257.zip


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/images/cup.png


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/images/donut_right.png


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/images/finger.png


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/images/grass_bottom.png


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/images/hedgehog_left.png


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/images/home_center.jpg


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/images/ico_float.png


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/images/lamp_top.png


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/images/lightning.png


TEMPAT SAMPAH
HW3_Chukharkin_Yevhen/images/umbrella.png


File diff ditekan karena terlalu besar
+ 75 - 0
HW3_Chukharkin_Yevhen/index.html


+ 0 - 0
HW3_Chukharkin_Yevhen/js/main.js


+ 46 - 0
HW4_Chukharkin_Yevhen/css/reset.css

@@ -0,0 +1,46 @@
+* {
+	box-sizing: border-box;
+}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

+ 90 - 0
HW4_Chukharkin_Yevhen/css/style.css

@@ -0,0 +1,90 @@
+.container-media {
+	margin: 0 15px;
+}
+.media {
+	display: block;
+	margin: 10px auto;
+}
+.container-transform_card {
+	background-color: #3cf;
+	position: relative;
+	width: 15vw;
+	height: 25vh;
+	margin: 0 auto;
+	border-radius: 10px;
+	transition: transform 500ms;
+	transform-style: preserve-3d;
+}
+.container-transform_card:hover {
+	transform: rotateY(180deg);
+}
+.container-transform_card>a {
+	
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	padding: 10vh 0;
+	border-radius: inherit;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	backface-visibility: hidden;
+}
+.container-transform_card_back {
+	transform: rotateY(180deg);
+	background-color: orange;
+
+}
+.header {
+	position: relative;
+}
+.header_nav {
+	position: fixed;
+	left: 0;top: 0;
+	width: 30%;
+	transition: 1s;
+	transform: translateX(-95%);
+}
+.header_nav_box a {
+	text-decoration: none;
+	display: inline-block;
+	width: 100%;
+	color: white;
+	padding: 10px 0;
+	transition: 0.5s;
+}
+.header_nav_box {
+	background-color: #968f7e;
+	padding-left: 30px;
+}
+.header_nav_box>li {
+	list-style-image: url(../media/images/list.png);
+}
+.header_nav_link {
+	position: absolute;
+	top:0; right: 0;
+	writing-mode: vertical-lr;
+	text-decoration: none;
+	color: white;
+	margin: 19% 0;
+	opacity: 1;
+	transition: 0.8s
+}
+.header_nav:hover {
+	transform: translateX(0%);
+}
+.header_nav:hover .header_nav_link {
+	opacity: 0;
+}
+.header_nav_box a:hover {
+	color: orange;
+	transform: translateX(20px);
+}
+
+
+
+
+
+

+ 43 - 0
HW4_Chukharkin_Yevhen/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+	<meta charset="UTF-8">
+	<title>HW4_Chukharkin_Yevhen</title>
+	<link rel="stylesheet" href="css/reset.css">
+	<link media="all" rel="stylesheet" href="css/style.css">
+</head>
+<body>
+	<header class="header">  <!-- SPENT TIME OVER-МНОГО -->
+		<nav class="header_nav">
+			<ul class="header_nav_box">
+				<li><a href="#">HOME</a></li>
+				<li><a href="#">CONTACTS</a></li>
+				<li><a href="#">OUR TEAM</a></li>
+				<li><a href="#">FAQ</a></li>
+				<li><a href="#">ABOUT</a></li>
+				<li><a href="#">NEW</a></li>
+			</ul>
+			<a class="header_nav_link" href="#">MENU HERE</a>
+		</nav>
+	</header>
+
+	<div class="container-media"> <!-- SPENT TIME 10 MIN -->
+		<video class="media" controls="controls" width="400" autoplay loop muted>
+			<source src="media/video/video.mp4" type="video/mp4">
+		</video>
+		<audio class="media" controls>
+			<source src="media/audio/hello.mp3" type="audio/mp3">
+		</audio>
+	</div>
+
+	<div class="container-transform"> <!-- SPENT TIME 60 MIN -->
+		<div class="container-transform_card">
+			<a href="#" class="container-transform_card_front">Кто молодец?</a>
+			<a href="#" class="container-transform_card_back">Я молодец!</a>			
+		</div>
+	</div>
+	
+							
+	
+</body>
+</html>

+ 0 - 0
HW4_Chukharkin_Yevhen/js/main.js


TEMPAT SAMPAH
HW4_Chukharkin_Yevhen/media/audio/hello.mp3


TEMPAT SAMPAH
HW4_Chukharkin_Yevhen/media/images/list.png


TEMPAT SAMPAH
HW4_Chukharkin_Yevhen/media/video/video.mp4


TEMPAT SAMPAH
HW5_Chukharkin_Yevhen/FlexFroggy.png


TEMPAT SAMPAH
HW5_Chukharkin_Yevhen/ValidatorCSS.png


TEMPAT SAMPAH
HW5_Chukharkin_Yevhen/ValidatorHTML.png


+ 46 - 0
HW5_Chukharkin_Yevhen/css/reset.css

@@ -0,0 +1,46 @@
+* {
+	box-sizing: border-box;
+}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

+ 255 - 0
HW5_Chukharkin_Yevhen/css/style.css

@@ -0,0 +1,255 @@
+body {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    min-height: 100vh;
+}
+.header {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+     background-color: #d8bf13;
+     padding: 5px 15px;
+     -webkit-box-orient: horizontal;
+     -webkit-box-direction: normal;
+         -ms-flex-flow: row wrap;
+             flex-flow: row wrap;
+     display: -webkit-box;
+     display: -ms-flexbox;
+     display: flex;
+     -webkit-box-pack: justify;
+         -ms-flex-pack: justify;
+             justify-content: space-between;
+     -webkit-box-align: center;
+         -ms-flex-align: center;
+             align-items: center;
+}
+.header_left {
+    -webkit-box-flex: 0.8;
+        -ms-flex-positive: 0.8;
+            flex-grow: 0.8;
+}
+.header_right {
+    -webkit-box-flex: 0.2;
+        -ms-flex-positive: 0.2;
+            flex-grow: 0.2;    
+}
+.header_right_menu {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+.header_right_menu a {
+    text-decoration: none;
+    color: black;
+} 
+.main {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    min-height: 100%;
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    text-align: center;
+} 
+.main_section {
+    -webkit-box-flex: 2;
+        -ms-flex: 2 2 auto;
+            flex: 2 2 auto;
+    padding: 15px 5px;
+}
+.main_section_product {
+    padding: 15px 5px;
+}
+
+.main_section_product>h2 {
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 2em;
+}
+.main_section_product_list {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -ms-flex-line-pack: start;
+        align-content: flex-start;
+    padding: 5px;
+}
+.main_section_product_list_item  {
+    width: 32%;
+    border: 1px solid grey;
+    border-radius: 10px;
+    padding: 5px;
+    margin: 5px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;  
+    -webkit-box-align: center;  
+        -ms-flex-align: center;  
+            align-items: center;
+}
+.main_section_product_list_item_wrap {
+    flex-grow: 1;
+}
+.main_section_product_list_item img {
+    border-radius: 50%;
+    border: 5px solid #cdbfbf;
+    width: 4em;
+    height: 4em;
+    -webkit-transition: border 200ms linear;
+    -o-transition: border 200ms linear;
+    transition: border 200ms linear;
+}
+.main_section_product_list_item:hover img {
+    border: 5px solid red;
+}
+.main_section_product_list_item h2 {
+    font-weight: bold;
+    font-size: 1.2em;
+    margin-bottom: 5px;
+}
+.main_section_product_list_item p {
+    margin: 5px 0;
+}
+.main_section_product_list_item a {
+    text-decoration: none;
+    border-radius: 15px;
+    color: white;
+    padding: 5px 15px;
+    background-color: #735b7f;
+    margin: 5px 0;
+    -webkit-transition: background-color 200ms ease;
+    -o-transition: background-color 200ms ease;
+    transition: background-color 200ms ease;
+}
+.main_section_product_list_item a:hover {
+    background-color: #53425b;
+}
+.main_section_holder {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;
+    border: 2px solid black;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    overflow: hidden;
+
+}
+.main_section_item {
+    padding:5% 0;
+}
+.main_section_holder div:nth-child(1) {
+    background-color: #fc644d;
+    -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+            order: 1;
+    -webkit-box-flex: 5;
+        -ms-flex: 5 1 50%;
+            flex: 5 1 50%;
+    
+}
+.main_section_holder div:nth-child(2) {
+    background-color: #4983b2;
+    -webkit-box-ordinal-group: 5;
+        -ms-flex-order: 4;
+            order: 4;
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+}
+.main_section_holder div:nth-child(3) {
+    background-color: #653797;
+    -webkit-box-ordinal-group: 4;
+        -ms-flex-order: 3;
+            order: 3;
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+}
+.main_section_holder div:nth-child(4) {
+    background-color: #0f7f12;
+    -webkit-box-ordinal-group: 6;
+        -ms-flex-order: 5;
+            order: 5;
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+}
+.main_section_holder div:nth-child(5) {
+    background-color: #fda429;
+    -webkit-box-ordinal-group: 3;
+        -ms-flex-order: 2;
+            order: 2;
+    -webkit-box-flex: 5;
+        -ms-flex: 5 1 50%;
+            flex: 5 1 50%;
+}
+.main_aside {
+    padding: 5px 15px;
+    min-width: 210px;
+} 
+.main_aside-left {
+    -webkit-box-ordinal-group: 0;
+        -ms-flex-order: -1;
+            order: -1;
+    -webkit-box-flex: 1;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto;
+    background-color: #cea2c0;
+}
+.main_aside-right {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto;
+    background-color: #a6b9ce;
+}             
+.footer {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+    background-color: #90ee90;
+    text-align: center;
+    padding: 10px;
+}

+ 108 - 0
HW5_Chukharkin_Yevhen/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>HW5_Chukharkin_Yevhen</title>
+	<link media="all" rel="stylesheet" href="css/reset.css">
+	<link media="all" rel="stylesheet" href="css/style.css">
+	<!-- TASK 1: SPENT 2 HOUR
+	TASK 2: SPENT 2 HOUR
+	TASK 3: SPENT 20 MIN -->
+	
+</head>
+<body>
+
+	
+		<header class="header">
+			<strong class="header_left"><a href="#"><img src="media/images/ico_float.png" alt="A-level Ukraine"></a></strong>
+			<div class="header_right">
+				<ul class="header_right_menu">
+					<li><a href="#">Item1</a></li>
+					<li><a href="#">Item2</a></li>
+					<li><a href="#">Item3</a></li>
+					<li><a href="#">Item4</a></li>
+					<li><a href="#">Item5</a></li>
+				</ul>
+			</div>     
+        </header>
+
+
+        <main class="main">
+            <section class="main_section">
+                <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, voluptatum delectus facere. Quisquam laboriosam error quaerat laborum quia delectus doloremque, voluptatum accusamus dolorem id expedita pariatur iusto harum minima alias.</h1>
+                <article class="main_section_product">
+                	<h2>our work</h2>
+                	<ul class="main_section_product_list">
+                		<li class="main_section_product_list_item">
+                			<div class="main_section_product_list_item_wrap">
+                             <img src="media/images/football_item1.png" alt="icon">
+                            <h2>Lorem ipsum dolor sit.</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ut debitis id quaerat numquam, dignissimos voluptas laboriosam. Quos, enim nesciunt!</p>            
+                            </div>
+                			<a href="#">Go</a>
+                		</li>
+                        <li class="main_section_product_list_item">
+                            <div class="main_section_product_list_item_wrap">
+                             <img src="media/images/runner_item2.png" alt="icon">
+                            <h2>Lorem ipsum dolor sit.</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>    
+                            </div>
+                            <a href="#">Go</a>
+                        </li>
+                        <li class="main_section_product_list_item">
+                            <div class="main_section_product_list_item_wrap">
+                             <img src="media/images/artistic_item3.png" alt="icon">
+                            <h2>Lorem ipsum dolor sit.</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ut debitis id</p>
+                            </div>
+                            <a href="#">Go</a>
+                        </li>
+                        <li class="main_section_product_list_item">
+                            <div class="main_section_product_list_item_wrap">
+                             <img src="media/images/volleyball_item4.png" alt="icon">
+                            <h2>Lorem ipsum dolor sit.</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ut debitis id quaerat numquam, dignissimos voluptas laboriosam. Quos, enim nesciunt!</p>            
+                            </div>
+                            <a href="#">Go</a>
+                        </li>
+                        <li class="main_section_product_list_item">
+                            <div class="main_section_product_list_item_wrap">
+                             <img src="media/images/tennis_item5.png" alt="icon">
+                            <h2>Lorem ipsum dolor sit.</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ut debitis id quaerat numquam, dignissimos voluptas laboriosam. Quos, enim nesciunt!</p>            
+                            </div>
+                            <a href="#">Go</a>
+                        </li>
+                	</ul>
+                </article>
+
+
+				
+				<div class="main_section_holder">
+					<div class="main_section_item">1</div>
+					<div class="main_section_item">2</div>
+					<div class="main_section_item">3</div>
+					<div class="main_section_item">4</div>
+					<div class="main_section_item">5</div>
+				</div>
+
+
+
+            </section>
+            <aside class="main_aside main_aside-left">
+                <p>Aside1</p>
+            </aside>
+            <aside class="main_aside main_aside-right">
+                <p>Aside2</p>
+            </aside>
+        </main>
+
+
+        <footer class="footer">
+            <div class="footer_content">Footer</div>
+        </footer>
+
+
+	
+</body>
+</html>

+ 0 - 0
HW5_Chukharkin_Yevhen/js/main.js


TEMPAT SAMPAH
HW5_Chukharkin_Yevhen/media/images/artistic_item3.png


TEMPAT SAMPAH
HW5_Chukharkin_Yevhen/media/images/football_item1.png


TEMPAT SAMPAH
HW5_Chukharkin_Yevhen/media/images/ico_float.png


TEMPAT SAMPAH
HW5_Chukharkin_Yevhen/media/images/runner_item2.png


TEMPAT SAMPAH
HW5_Chukharkin_Yevhen/media/images/tennis_item5.png


TEMPAT SAMPAH
HW5_Chukharkin_Yevhen/media/images/volleyball_item4.png