Home Explore Help
Sign In
vika101-65
/
hw-yevgen
forked from Yevhen/hw
Watch 1
Star 0
Fork 0
Files
Browse Source

download

Yevhen-dev 4 years ago
commit
dea0c2aebe
50 changed files with 1205 additions and 0 deletions
Split View Show Diff Stats
  1. 43 0
      HW1_Chukharkin_Yevhen/css/reset.css
  2. 0 0
      HW1_Chukharkin_Yevhen/css/style.css
  3. BIN
      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. BIN
      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. BIN
      HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.ttf
  14. BIN
      HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.woff
  15. BIN
      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. BIN
      HW3_Chukharkin_Yevhen/fonts/webfontkit-20190802-055257.zip
  19. BIN
      HW3_Chukharkin_Yevhen/images/cup.png
  20. BIN
      HW3_Chukharkin_Yevhen/images/donut_right.png
  21. BIN
      HW3_Chukharkin_Yevhen/images/finger.png
  22. BIN
      HW3_Chukharkin_Yevhen/images/grass_bottom.png
  23. BIN
      HW3_Chukharkin_Yevhen/images/hedgehog_left.png
  24. BIN
      HW3_Chukharkin_Yevhen/images/home_center.jpg
  25. BIN
      HW3_Chukharkin_Yevhen/images/ico_float.png
  26. BIN
      HW3_Chukharkin_Yevhen/images/lamp_top.png
  27. BIN
      HW3_Chukharkin_Yevhen/images/lightning.png
  28. BIN
      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. BIN
      HW4_Chukharkin_Yevhen/media/audio/hello.mp3
  36. BIN
      HW4_Chukharkin_Yevhen/media/images/list.png
  37. BIN
      HW4_Chukharkin_Yevhen/media/video/video.mp4
  38. BIN
      HW5_Chukharkin_Yevhen/FlexFroggy.png
  39. BIN
      HW5_Chukharkin_Yevhen/ValidatorCSS.png
  40. BIN
      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. BIN
      HW5_Chukharkin_Yevhen/media/images/artistic_item3.png
  46. BIN
      HW5_Chukharkin_Yevhen/media/images/football_item1.png
  47. BIN
      HW5_Chukharkin_Yevhen/media/images/ico_float.png
  48. BIN
      HW5_Chukharkin_Yevhen/media/images/runner_item2.png
  49. BIN
      HW5_Chukharkin_Yevhen/media/images/tennis_item5.png
  50. BIN
      HW5_Chukharkin_Yevhen/media/images/volleyball_item4.png

+ 43 - 0
HW1_Chukharkin_Yevhen/css/reset.css
View File 

@@ -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
View File


BIN
HW1_Chukharkin_Yevhen/image/favicon.ico
View File


+ 114 - 0
HW1_Chukharkin_Yevhen/index.html
View File 

@@ -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
View File


+ 43 - 0
HW2_Chukharkin_Yevhen/css/reset.css
View File 

@@ -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
View File 

@@ -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;
 
+
 
+}

BIN
HW2_Chukharkin_Yevhen/image/logo.png
View File


+ 42 - 0
HW2_Chukharkin_Yevhen/index.html
View File 

@@ -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
View File


+ 46 - 0
HW3_Chukharkin_Yevhen/css/reset.css
View File 

@@ -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
View File 

@@ -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%;
 
+}

BIN
HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.ttf
View File


BIN
HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.woff
View File


BIN
HW3_Chukharkin_Yevhen/fonts/carlito-bold-webfont.woff2
View File


+ 5 - 0
HW3_Chukharkin_Yevhen/fonts/generator_config.txt
View File 

@@ -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
View File 

@@ -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;
 
+
 
+}

BIN
HW3_Chukharkin_Yevhen/fonts/webfontkit-20190802-055257.zip
View File


BIN
HW3_Chukharkin_Yevhen/images/cup.png
View File


BIN
HW3_Chukharkin_Yevhen/images/donut_right.png
View File


BIN
HW3_Chukharkin_Yevhen/images/finger.png
View File


BIN
HW3_Chukharkin_Yevhen/images/grass_bottom.png
View File


BIN
HW3_Chukharkin_Yevhen/images/hedgehog_left.png
View File


BIN
HW3_Chukharkin_Yevhen/images/home_center.jpg
View File


BIN
HW3_Chukharkin_Yevhen/images/ico_float.png
View File


BIN
HW3_Chukharkin_Yevhen/images/lamp_top.png
View File


BIN
HW3_Chukharkin_Yevhen/images/lightning.png
View File


BIN
HW3_Chukharkin_Yevhen/images/umbrella.png
View File


File diff suppressed because it is too large
+ 75 - 0
HW3_Chukharkin_Yevhen/index.html


+ 0 - 0
HW3_Chukharkin_Yevhen/js/main.js
View File


+ 46 - 0
HW4_Chukharkin_Yevhen/css/reset.css
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File


BIN
HW4_Chukharkin_Yevhen/media/audio/hello.mp3
View File


BIN
HW4_Chukharkin_Yevhen/media/images/list.png
View File


BIN
HW4_Chukharkin_Yevhen/media/video/video.mp4
View File


BIN
HW5_Chukharkin_Yevhen/FlexFroggy.png
View File


BIN
HW5_Chukharkin_Yevhen/ValidatorCSS.png
View File


BIN
HW5_Chukharkin_Yevhen/ValidatorHTML.png
View File


+ 46 - 0
HW5_Chukharkin_Yevhen/css/reset.css
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File


BIN
HW5_Chukharkin_Yevhen/media/images/artistic_item3.png
View File


BIN
HW5_Chukharkin_Yevhen/media/images/football_item1.png
View File


BIN
HW5_Chukharkin_Yevhen/media/images/ico_float.png
View File


BIN
HW5_Chukharkin_Yevhen/media/images/runner_item2.png
View File


BIN
HW5_Chukharkin_Yevhen/media/images/tennis_item5.png
View File


BIN
HW5_Chukharkin_Yevhen/media/images/volleyball_item4.png
View File