4 tahun lalu · dea0c2aebe
--- a/HW1_Chukharkin_Yevhen/css/reset.css
+++ b/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;
			
 
				+}
			
--- a/HW1_Chukharkin_Yevhen/css/style.css
+++ b/HW1_Chukharkin_Yevhen/css/style.css
--- a/HW1_Chukharkin_Yevhen/image/favicon.ico
+++ b/HW1_Chukharkin_Yevhen/image/favicon.ico
--- a/HW1_Chukharkin_Yevhen/index.html
+++ b/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>
			
--- a/HW1_Chukharkin_Yevhen/js/main.js
+++ b/HW1_Chukharkin_Yevhen/js/main.js
--- a/HW2_Chukharkin_Yevhen/css/reset.css
+++ b/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;
			
 
				+}
			
--- a/HW2_Chukharkin_Yevhen/css/style.css
+++ b/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;
			
 
				+
			
 
				+}
			
--- a/HW2_Chukharkin_Yevhen/image/logo.png
+++ b/HW2_Chukharkin_Yevhen/image/logo.png
--- a/HW2_Chukharkin_Yevhen/index.html
+++ b/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>
			
--- a/HW2_Chukharkin_Yevhen/js/main.js
+++ b/HW2_Chukharkin_Yevhen/js/main.js
--- a/HW3_Chukharkin_Yevhen/css/reset.css
+++ b/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;
			
 
				+}
			
--- a/HW3_Chukharkin_Yevhen/css/style.css
+++ b/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%;
			
 
				+} 
			
--- a/HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.ttf
+++ b/HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.ttf
--- a/HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.woff
+++ b/HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.woff
--- a/HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.woff2
+++ b/HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.woff2
--- a/HW3_Chukharkin_Yevhen/fonts/generator_config.txt
+++ b/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"}
			
--- a/HW3_Chukharkin_Yevhen/fonts/stylesheet.css
+++ b/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;
			
 
				+
			
 
				+}
			
--- a/HW3_Chukharkin_Yevhen/fonts/webfontkit-20190802-055257.zip
+++ b/HW3_Chukharkin_Yevhen/fonts/webfontkit-20190802-055257.zip
--- a/HW3_Chukharkin_Yevhen/images/cup.png
+++ b/HW3_Chukharkin_Yevhen/images/cup.png
--- a/HW3_Chukharkin_Yevhen/images/donut_right.png
+++ b/HW3_Chukharkin_Yevhen/images/donut_right.png
--- a/HW3_Chukharkin_Yevhen/images/finger.png
+++ b/HW3_Chukharkin_Yevhen/images/finger.png
--- a/HW3_Chukharkin_Yevhen/images/grass_bottom.png
+++ b/HW3_Chukharkin_Yevhen/images/grass_bottom.png
--- a/HW3_Chukharkin_Yevhen/images/hedgehog_left.png
+++ b/HW3_Chukharkin_Yevhen/images/hedgehog_left.png
--- a/HW3_Chukharkin_Yevhen/images/home_center.jpg
+++ b/HW3_Chukharkin_Yevhen/images/home_center.jpg
--- a/HW3_Chukharkin_Yevhen/images/ico_float.png
+++ b/HW3_Chukharkin_Yevhen/images/ico_float.png
--- a/HW3_Chukharkin_Yevhen/images/lamp_top.png
+++ b/HW3_Chukharkin_Yevhen/images/lamp_top.png
--- a/HW3_Chukharkin_Yevhen/images/lightning.png
+++ b/HW3_Chukharkin_Yevhen/images/lightning.png
--- a/HW3_Chukharkin_Yevhen/images/umbrella.png
+++ b/HW3_Chukharkin_Yevhen/images/umbrella.png
--- a/HW3_Chukharkin_Yevhen/index.html
+++ b/HW3_Chukharkin_Yevhen/index.html
--- a/HW3_Chukharkin_Yevhen/js/main.js
+++ b/HW3_Chukharkin_Yevhen/js/main.js
--- a/HW4_Chukharkin_Yevhen/css/reset.css
+++ b/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;
			
 
				+}
			
--- a/HW4_Chukharkin_Yevhen/css/style.css
+++ b/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);
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
--- a/HW4_Chukharkin_Yevhen/index.html
+++ b/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>
			
--- a/HW4_Chukharkin_Yevhen/js/main.js
+++ b/HW4_Chukharkin_Yevhen/js/main.js
--- a/HW4_Chukharkin_Yevhen/media/audio/hello.mp3
+++ b/HW4_Chukharkin_Yevhen/media/audio/hello.mp3
--- a/HW4_Chukharkin_Yevhen/media/images/list.png
+++ b/HW4_Chukharkin_Yevhen/media/images/list.png
--- a/HW4_Chukharkin_Yevhen/media/video/video.mp4
+++ b/HW4_Chukharkin_Yevhen/media/video/video.mp4
--- a/HW5_Chukharkin_Yevhen/FlexFroggy.png
+++ b/HW5_Chukharkin_Yevhen/FlexFroggy.png
--- a/HW5_Chukharkin_Yevhen/ValidatorCSS.png
+++ b/HW5_Chukharkin_Yevhen/ValidatorCSS.png
--- a/HW5_Chukharkin_Yevhen/ValidatorHTML.png
+++ b/HW5_Chukharkin_Yevhen/ValidatorHTML.png
--- a/HW5_Chukharkin_Yevhen/css/reset.css
+++ b/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;
			
 
				+}
			
--- a/HW5_Chukharkin_Yevhen/css/style.css
+++ b/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;
			
 
				+}
			
--- a/HW5_Chukharkin_Yevhen/index.html
+++ b/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>
			
--- a/HW5_Chukharkin_Yevhen/js/main.js
+++ b/HW5_Chukharkin_Yevhen/js/main.js
--- a/HW5_Chukharkin_Yevhen/media/images/artistic_item3.png
+++ b/HW5_Chukharkin_Yevhen/media/images/artistic_item3.png
--- a/HW5_Chukharkin_Yevhen/media/images/football_item1.png
+++ b/HW5_Chukharkin_Yevhen/media/images/football_item1.png
--- a/HW5_Chukharkin_Yevhen/media/images/ico_float.png
+++ b/HW5_Chukharkin_Yevhen/media/images/ico_float.png
--- a/HW5_Chukharkin_Yevhen/media/images/runner_item2.png
+++ b/HW5_Chukharkin_Yevhen/media/images/runner_item2.png
--- a/HW5_Chukharkin_Yevhen/media/images/tennis_item5.png
+++ b/HW5_Chukharkin_Yevhen/media/images/tennis_item5.png
--- a/HW5_Chukharkin_Yevhen/media/images/volleyball_item4.png
+++ b/HW5_Chukharkin_Yevhen/media/images/volleyball_item4.png