1 year ago · bfb6790eca
--- a/Homework_1/index.html
+++ b/Homework_1/index.html
@@ -0,0 +1,63 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>A-level</title>
			
 
				+    <link rel="icon" href="А_levelfav.ico">
			
 
				+</head>
			
 
				+<body>
			
 
				+     <header>
			
 
				+        <h1>Homework 1</h1>
			
 
				+     </header>
			
 
				+     <main>
			
 
				+        <div>
			
 
				+            <ol>
			
 
				+                <li>html|html</li>
			
 
				+                <li>b|b</li>
			
 
				+                <li>head|head</li>
			
 
				+                <li>div|div</li>
			
 
				+                <li>h1|h1</li>
			
 
				+            </ol>
			
 
				+            <ul>
			
 
				+                <li>hr</li>
			
 
				+                <li>img</li>
			
 
				+                <li>input</li>
			
 
				+                <li>meta</li>
			
 
				+                <li>br</li>
			
 
				+            </ul>
			
 
				+        </div>
			
 
				+        <div>
			
 
				+            <span> 15янв. 2020</span>
			
 
				+            <h1>Что такое вёрстка</h1>
			
 
				+            <p>
			
 
				+                <strong>Верстка</strong> по праву считается одним из <b><u>самых важных этапов создания сайта</u></b>. <i>От качества работы и подготовки, знаний специалиста зависит вся работа, качество сайта, его вид и функционирования.</i> 
			
 
				+                Даже <u>незначительная</u> ошибка, допущенная в процессе верстки, может привести к <mark>катастрофическим последствиям.</mark>
			
 
				+                <a href="https://cutt.ly/YKwRAd4" target="_blank">Неправильный код</a> может дать серьезную нагрузку на сайт, неправильно отобразить компоненты, в результате чего:
			
 
				+            </p>
			
 
				+            <ol>
			
 
				+                <Li>посещаемость сайта упадет</Li>
			
 
				+                <li><u>прибыль клиента будет стремиться к <b>нулю.</b></u></li>
			
 
				+            </ol> 
			
 
				+        </div>
			
 
				+        <div>
			
 
				+            <ol>
			
 
				+                <li><strong>First point;</strong></li>
			
 
				+                <li><i>Second point;</i></li>
			
 
				+                <li><u>Third point;</u></li>
			
 
				+                <li><a href="http://www.google.com.ua" class="google-link" id="mainlink" target="_blank">Google;</a></li>
			
 
				+                <li style="color: red;">Fifth point.</li>
			
 
				+            </ol>
			
 
				+        </div>
			
 
				+     </main>
			
 
				+     <footer>
			
 
				+        <p>
			
 
				+           Lytvyn Oleksii
			
 
				+        </p>
			
 
				+        <p>
			
 
				+            +380993257276
			
 
				+        </p>
			
 
				+     </footer>
			
 
				+</body>
			
 
				+</html>
			
--- a/Homework_1/А_levelfav.ico
+++ b/Homework_1/А_levelfav.ico
--- a/Homework_12/index.html
+++ b/Homework_12/index.html
@@ -0,0 +1,15 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <script src="/main.js"></script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Homework_12/main.js
+++ b/Homework_12/main.js
@@ -0,0 +1,13 @@
 
				+let calories =
			
 
				+  prompt("How many calories do you eat for breakfast?", 700) +
			
 
				+  prompt("How many calories do you eat for lunch?", 500) +
			
 
				+  prompt("How many calories do you eat for dinner?", 500);
			
 
				+alert("you eat $`{calories}` for breakfast");
			
 
				+
			
 
				+// let calories2 = prompt("How many calories do you eat for lunch?", 500);
			
 
				+// alert("you eat ${calories2} calories for breakfast");
			
 
				+// let calories3 = prompt("How many calories do you eat for dinner?", 500);
			
 
				+// alert("you eat ${calories3} calories for breakfast");
			
 
				+// let result = (${ calories1 } + ${ calories2 } + ${ calories3 });
			
 
				+
			
 
				+// alert(result);
			
--- a/Homework_2/img/animal.webp
+++ b/Homework_2/img/animal.webp
--- a/Homework_2/img/building.jpg
+++ b/Homework_2/img/building.jpg
--- a/Homework_2/img/donut.png
+++ b/Homework_2/img/donut.png
--- a/Homework_2/img/grass.png
+++ b/Homework_2/img/grass.png
--- a/Homework_2/img/lamp.png
+++ b/Homework_2/img/lamp.png
--- a/Homework_2/index.html
+++ b/Homework_2/index.html
@@ -0,0 +1,59 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Homework_2</title>
			
 
				+    <link rel="icon" href="А_levelfav.ico">
			
 
				+    <link rel="stylesheet" href="style/style.css">
			
 
				+    <style>
			
 
				+        .cite {
			
 
				+            color: blue;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body> 
			
 
				+    <div>
			
 
				+        <blockquote class="cite" style="color: red">
			
 
				+             Lorem ipsum dolor sit amet consectetur adipisicing elit. 
			
 
				+            Earum voluptates, velit eligendi voluptate ducimus iure possimus quae optio doloremque dicta tempore ea cum beatae at sunt iste? 
			
 
				+            Accusamus, numquam eos!
			
 
				+        </blockquote>
			
 
				+    </div>
			
 
				+    <div class="holder">
			
 
				+        <h1>Title</h1>
			
 
				+        <ul class="list">
			
 
				+            <li><a href="#">link1</a>
			
 
				+                <ul>
			
 
				+                    <li><a href="#">link2</a></li>
			
 
				+                    <li><a href="#">link3</a></li>
			
 
				+                  </ul> 
			
 
				+            </li> 
			
 
				+            <li><a href="https://www.youtube.com/">link4</a></li>
			
 
				+            <li><a href="https://validator.w3.org/">link5</a></li>
			
 
				+            <li><a href="#">link6</a></li>
			
 
				+        </ul>
			
 
				+        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, accusamus.</p>
			
 
				+        <h1>Title</h1>
			
 
				+        <p>Lorem ipsum dolor sit amet.</p>
			
 
				+    </div>
			
 
				+    <div class="text-box">
			
 
				+        <h3>Покрасьте меня в розовый цвет (color:pink).</h3>
			
 
				+        <p>Данный элемент должен остаться неоформленным.</p>
			
 
				+        <p id='greycol'>Покрасьте меня в серый цвет (color:grey).</p>
			
 
				+        <div>
			
 
				+            Данный элемент должен остаться неоформленным.
			
 
				+        </div>
			
 
				+        <div>
			
 
				+            <p>Покрасьте меня в красный цвет (color:red).</p>
			
 
				+        </div>
			
 
				+        <h3>Данный элемент должен остаться неоформленным.</h3>
			
 
				+        <p>Покрасьте меня в зеленый цвет (color:green).</p>
			
 
				+        <p class='yellow'>Покрасьте меня в желтый цвет (color:yellow).</p>
			
 
				+    </div>
			
 
				+    <div class="bg-box">
			
 
				+
			
 
				+    </div>     
			
 
				+</body>
			
 
				+</html>
			
--- a/Homework_2/style/style.css
+++ b/Homework_2/style/style.css
@@ -0,0 +1,49 @@
 
				+.cite {
			
 
				+    color: green;
			
 
				+}
			
 
				+a[href^="https"] {
			
 
				+    color: red;
			
 
				+}
			
 
				+
			
 
				+.list > li:last-child {
			
 
				+    background-color: green;
			
 
				+    max-width: 35px;
			
 
				+}
			
 
				+
			
 
				+ul + p {
			
 
				+   font-size: 26px;
			
 
				+}
			
 
				+
			
 
				+.text-box > h3:first-child {
			
 
				+    color: pink;
			
 
				+}
			
 
				+
			
 
				+#greycol {
			
 
				+    color: grey;
			
 
				+}
			
 
				+
			
 
				+div p:only-child {
			
 
				+  color: red;
			
 
				+} 
			
 
				+.text-box p:nth-last-child(2) {
			
 
				+    color: green;
			
 
				+}
			
 
				+.yellow {
			
 
				+    color: yellow;
			
 
				+}
			
 
				+
			
 
				+.bg-box {
			
 
				+    height: 300px;   
			
 
				+    background: url(/img/building.jpg) center / 200px 150px no-repeat, 
			
 
				+    url(/img/grass.png) bottom / 100px repeat-x, 
			
 
				+    url(/img/lamp.png) top / 35px 35px repeat-x, 
			
 
				+    url(/img/donut.png) right / 20px 20px repeat-y, 
			
 
				+    url(/img/animal.webp) left / 20px 20px repeat-y;
			
 
				+    background-color: green;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+ 
			
 
				+     
			
 
				+    
			
--- a/Homework_2/А_levelfav.ico
+++ b/Homework_2/А_levelfav.ico
--- a/Homework_3/Styles/reset.css
+++ b/Homework_3/Styles/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/Homework_3/Styles/style.css
+++ b/Homework_3/Styles/style.css
@@ -0,0 +1,32 @@
 
				+.main {
			
 
				+    width: 350px;
			
 
				+    height: 220px;
			
 
				+    padding: 15px 10px 20px 10px;
			
 
				+    margin-bottom: 30px;
			
 
				+    border: dotted 2px red;
			
 
				+    background-color: green;
			
 
				+}
			
 
				+
			
 
				+.text {
			
 
				+    text-align: justify;
			
 
				+    
			
 
				+}
			
 
				+
			
 
				+.left {
			
 
				+    height: 130;
			
 
				+    width: 220;
			
 
				+    float: left;
			
 
				+    margin-right: 15px;
			
 
				+    margin-bottom: 15px;
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.right {
			
 
				+    padding: 0px;
			
 
				+    height: 100px;
			
 
				+    width: 200px;
			
 
				+    float: right;
			
 
				+    margin-top: 15px;
			
 
				+    margin-left: 15px;
			
 
				+    margin-bottom: 10px;
			
 
				+}
			
--- a/Homework_3/img/HTML
+++ b/Homework_3/img/HTML
--- a/Homework_3/img/HTML+CSS.png
+++ b/Homework_3/img/HTML+CSS.png
--- a/Homework_3/img/А_levelfav.ico
+++ b/Homework_3/img/А_levelfav.ico
--- a/Homework_3/index.html
+++ b/Homework_3/index.html
@@ -0,0 +1,50 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Homework3</title>
			
 
				+    <link rel="stylesheet" href="/Styles/reset.css">
			
 
				+    <link rel="shortcut icon" href="/img/А_levelfav.ico" type="image/x-icon">
			
 
				+    <link rel="stylesheet" href="Styles/style.css">
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="wrapper">
			
 
				+        <main class="first">
			
 
				+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
			
 
				+            Soluta nesciunt esse vitae, ab autem magnam odio exercitationem, voluptatem doloremque ea earum voluptas reprehenderit provident officia ipsa. 
			
 
				+            In molestias quam necessitatibus?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime, obcaecati nam perferendis voluptate blanditiis incidunt officiis rerum id eos odit suscipit accusamus, 
			
 
				+            aspernatur beatae nemo eaque nostrum quas nesciunt illo!
			
 
				+            Lous?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime, obcaecati nam perferendis voluptate blanditiis incidunt officiis rerum id eos odit suscipit accusamus, 
			
 
				+            aspernatur beatae nemo eaque nostrum quas nesciunt illo!</p>
			
 
				+        </main>
			
 
				+        <main class="main">
			
 
				+
			
 
				+
			
 
				+        </main>
			
 
				+
			
 
				+        <main class="third">
			
 
				+            <p class="text">
			
 
				+                <img src="/img/HTML - ліва.png" class="left" alt="HTML"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu orci posuere, venenatis magna ut, bibendum nibh. In justo nunc, feugiat sed ligula non, bibendum tempus augue. 
			
 
				+                Fusce nec elit faucibus, malesuada felis sit amet, condimentum erat. Pellentesque at augue in mi lacinia finibus. Donec iaculis nulla massa, 
			
 
				+                sed convallis sem vestibulum sed. Morbi sed gravida dolor. Nulla porttitor dui et justo vehicula laoreet. Suspendisse a magna sit amet turpis blandit fermentum. 
			
 
				+                Morbi ut lorem in lacus fermentum euismod. Aenean consequat turpis id urna volutpat porta. Curabitur sodales eleifend quam, et sagittis mauris aliquam ac.
			
 
				+                Maecenas finibus feugiat orci ut aliquet. Proin consequat vel mi ut placerat.
			
 
				+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu orci posuere, venenatis magna ut, bibendum nibh. In justo nunc, feugiat sed ligula non, bibendum tempus augue. 
			
 
				+                Fusce nec elit faucibus, malesuada felis sit amet, condimentum erat. Pellentesque at augue in mi lacinia finibus. Donec iaculis nulla massa, 
			
 
				+                sed convallis sem vestibulum sed. Morbi sed gravida dolor. Nulla porttitor dui et justo vehicula laoreet. Suspendisse a magna sit amet turpis blandit fermentum. <img src="/img/HTML+CSS.png" class="right" alt="HTML+CSS">
			
 
				+                Morbi ut lorem in lacus fermentum euismod. Aenean consequat turpis id urna volutpat porta. Curabitur sodales eleifend quam, et sagittis mauris aliquam ac. 
			
 
				+                Maecenas finibus feugiat orci ut aliquet. Proin consequat vel mi ut placerat. 
			
 
				+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu orci posuere, venenatis magna ut, bibendum nibh. In justo nunc, feugiat sed ligula non, bibendum tempus augue.
			
 
				+                Fusce nec elit faucibus, malesuada felis sit amet, condimentum erat. Pellentesque at augue in mi lacinia finibus. Donec iaculis nulla massa, 
			
 
				+                sed convallis sem vestibulum sed. Morbi sed gravida dolor. Nulla porttitor dui et justo vehicula laoreet. Suspendisse a magna sit amet turpis blandit fermentum. 
			
 
				+                Morbi ut lorem in lacus fermentum euismod. Aenean consequat turpis id urna volutpat porta. Curabitur sodales eleifend quam, et sagittis mauris aliquam ac.
			
 
				+                Maecenas finibus feugiat orci ut aliquet. Proin consequat vel mi ut placerat.
			
 
				+            </p>
			
 
				+
			
 
				+        </main>
			
 
				+
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/Homework_4/Styles/style.css
+++ b/Homework_4/Styles/style.css
@@ -0,0 +1,206 @@
 
				+@keyframes box {
			
 
				+    0% {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        left: 0;
			
 
				+        background: red;
			
 
				+    }
			
 
				+    25% {
			
 
				+        position:absolute;
			
 
				+        top: calc(100% - 100px);
			
 
				+        left: 0;
			
 
				+        background: blue;
			
 
				+    }
			
 
				+    50% {
			
 
				+        position: absolute;
			
 
				+        top: calc(100% - 100px);
			
 
				+        left: calc(100% - 100px);
			
 
				+        background: green;
			
 
				+    }
			
 
				+    75% {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        left: calc(100% - 100px);
			
 
				+        background: yellow;
			
 
				+    }
			
 
				+    100% {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        left: 0;
			
 
				+        background: red;
			
 
				+    }
			
 
				+
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+    margin: 0;
			
 
				+}
			
 
				+
			
 
				+html {
			
 
				+    box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+.cards {
			
 
				+    background: #0d5825;
			
 
				+    height: 500px;
			
 
				+    width: auto;
			
 
				+}
			
 
				+
			
 
				+.blockquote {
			
 
				+    font-size: 25px;
			
 
				+    text-align: center;
			
 
				+    color: white;
			
 
				+    position: relative;
			
 
				+    top: 10px;
			
 
				+}
			
 
				+
			
 
				+.card1 {
			
 
				+    height: 200px;
			
 
				+    width: 150px;
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    left: 53%;
			
 
				+    transform: translate(-47%, -50%) rotate(8deg);
			
 
				+    z-index: 3;
			
 
				+}
			
 
				+.card2 {
			
 
				+    height: 200px;
			
 
				+    width: 150px;
			
 
				+    position: absolute;
			
 
				+    top: 48%;
			
 
				+    left: 51%;
			
 
				+    transform: translate(-49%, -52%) rotate(-8deg); 
			
 
				+    z-index: 2;
			
 
				+}
			
 
				+.card3 {
			
 
				+    height: 200px;
			
 
				+    width: 150px;
			
 
				+    position: absolute;
			
 
				+    top: 47%;
			
 
				+    left: 48%;
			
 
				+    transform: translate(-52%, -53%) rotate(-20deg);
			
 
				+}
			
 
				+
			
 
				+.card1:hover {
			
 
				+    transition: transform .4s ease-in-out;
			
 
				+    transform: translate(-47%, -60%) rotate(8deg);
			
 
				+}
			
 
				+
			
 
				+.card2:hover {
			
 
				+    transition: transform .4s ease-in-out;
			
 
				+    transform: translate(-49%, -62%)  rotate(-8deg);
			
 
				+}
			
 
				+
			
 
				+.card3:hover {
			
 
				+    transition: transform .4s ease-in-out;
			
 
				+    transform: translate(-52%, -63%) rotate(-20deg);  
			
 
				+}
			
 
				+
			
 
				+/* Task 2 */
			
 
				+.task2 {
			
 
				+    height: 300px;
			
 
				+    width: 300px;
			
 
				+}
			
 
				+
			
 
				+.pink {
			
 
				+    height: 100px;
			
 
				+    width: 100px;
			
 
				+    background-color: pink;
			
 
				+    position: relative;
			
 
				+    top: 10px;
			
 
				+    left: 10px;
			
 
				+    z-index: 1;
			
 
				+}
			
 
				+
			
 
				+.blue {
			
 
				+    height: 100px;
			
 
				+    width: 100px;
			
 
				+    background-color: blue;
			
 
				+    position: relative;
			
 
				+    top: -20px;
			
 
				+    left: 70px;
			
 
				+    z-index: 2;
			
 
				+}
			
 
				+
			
 
				+.lightgreen {
			
 
				+    height: 100px;
			
 
				+    width: 100px;
			
 
				+    background-color: lightgreen;
			
 
				+    position: relative;
			
 
				+    top: -55px;
			
 
				+    left: 130px;
			
 
				+    z-index: 1;
			
 
				+}
			
 
				+
			
 
				+/* Task 3 */
			
 
				+.menu {
			
 
				+    height: 400px;
			
 
				+    width: 200px;
			
 
				+    position: relative;
			
 
				+    transform: translateX(-160px);
			
 
				+    background-color: gray;
			
 
				+}
			
 
				+.menu:hover {
			
 
				+    transition: all .9s linear;
			
 
				+    transform: translateX(0px);
			
 
				+}
			
 
				+
			
 
				+.menu:hover #vertical {
			
 
				+    transition: all .9s linear;
			
 
				+    opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.menu-list {
			
 
				+    position: relative;
			
 
				+    top: 100px;
			
 
				+}
			
 
				+
			
 
				+#vertical {
			
 
				+    font-size: 20px;
			
 
				+    color: white;
			
 
				+    writing-mode: vertical-lr;
			
 
				+    position: relative;
			
 
				+    top: 10px;
			
 
				+    left: 10px;
			
 
				+    float: right;
			
 
				+}
			
 
				+
			
 
				+.list-item {
			
 
				+    margin-top: 10px;
			
 
				+    margin-bottom: 10px;
			
 
				+}
			
 
				+
			
 
				+.menu a {
			
 
				+    text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+.menu-items li {
			
 
				+    list-style: none;
			
 
				+}
			
 
				+
			
 
				+.menu-items a {
			
 
				+    color: white;
			
 
				+}
			
 
				+
			
 
				+.links:hover {
			
 
				+    transition: all .3s ease-in;
			
 
				+    color: orange;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+/* Task 4 */
			
 
				+.anim-holder {
			
 
				+    width: 300px;
			
 
				+    height: 300px;
			
 
				+    position: relative;
			
 
				+}
			
 
				+
			
 
				+.anim-box {
			
 
				+    width: 100px;
			
 
				+    height: 100px;
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    background: red;
			
 
				+    animation: box 4s linear infinite;
			
 
				+}
			
--- a/Homework_4/img/card01.png
+++ b/Homework_4/img/card01.png
--- a/Homework_4/img/small-orange-diamond-microsoft.png
+++ b/Homework_4/img/small-orange-diamond-microsoft.png
--- a/Homework_4/img/А_levelfav.ico
+++ b/Homework_4/img/А_levelfav.ico
--- a/Homework_4/img/Ромб.png
+++ b/Homework_4/img/Ромб.png
--- a/Homework_4/index.html
+++ b/Homework_4/index.html
@@ -0,0 +1,55 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Homework4</title>
			
 
				+    <link rel="shortcut icon" href="/img/А_levelfav.ico" type="image/x-icon">
			
 
				+    <link rel="stylesheet" href="/Styles/style.css">
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="wrapper">
			
 
				+        <main class="main">
			
 
				+            <section class="cards">
			
 
				+                <blockquote class="blockquote">
			
 
				+                    "Судьба тасует карты, а мы ими играем." <br>
			
 
				+                    <cite class="cite"><i>Артур Шопенгауэр</i></cite>
			
 
				+                </blockquote>
			
 
				+                <img src="/img/card01.png" alt="Card" class="card1">
			
 
				+                <img src="/img/card01.png" alt="Card" class="card2">
			
 
				+                <img src="/img/card01.png" alt="Card" class="card3">
			
 
				+            </section>
			
 
				+            <!-- Task 2 -->
			
 
				+            <section class="task2">
			
 
				+                <div class="pink"></div>
			
 
				+                <div class="blue"></div>
			
 
				+                <div class="lightgreen"></div>
			
 
				+            </section>
			
 
				+            <!-- Task 3 -->
			
 
				+            <section class="aside">
			
 
				+                <div class="menu">
			
 
				+                    <nav class="menu-list">
			
 
				+                        <h1 id="vertical">MENU HERE</h1>
			
 
				+                        <ul class="menu-items">
			
 
				+                            <li class="list-item"><img src="/img/Ромб.png" alt="Ромб"><a href="" class="links">HOME</a></li>
			
 
				+                            <li class="list-item"><img src="/img/Ромб.png" alt="Ромб"><a href="" class="links">CONTACTS</a></li>
			
 
				+                            <li class="list-item"><img src="/img/Ромб.png" alt="Ромб"><a href="" class="links">OUR TEAM</a></li>
			
 
				+                            <li class="list-item"><img src="/img/Ромб.png" alt="Ромб"><a href="" class="links">FAQ</a></li>
			
 
				+                            <li class="list-item"><img src="/img/Ромб.png" alt="Ромб"><a href="" class="links">ABOUT</a></li>
			
 
				+                            <li class="list-item"><img src="/img/Ромб.png" alt="Ромб"><a href="" class="links">NEWS</a></li>
			
 
				+                        </ul>
			
 
				+                    </nav>
			
 
				+                </div>
			
 
				+            </section>
			
 
				+            <!-- Task 4 -->
			
 
				+            <section class="animation">
			
 
				+                <div class="anim-holder">
			
 
				+                    <div class="anim-box"></div>
			
 
				+                </div>
			
 
				+            </section>
			
 
				+        </main>
			
 
				+    </div>
			
 
				+    
			
 
				+</body>
			
 
				+</html>
			
--- a/Homework_5/Styles/style.css
+++ b/Homework_5/Styles/style.css
@@ -0,0 +1,220 @@
 
				+body {
			
 
				+    margin: 0;
			
 
				+    font-family: Georgia, 'Times New Roman', Times, serif;
			
 
				+}
			
 
				+
			
 
				+html {
			
 
				+    box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+*,
			
 
				+*:before,
			
 
				+*:after {
			
 
				+    box-sizing: inherit;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+.wrapper {
			
 
				+    width: 100%;
			
 
				+    position: relative;
			
 
				+    overflow: hidden;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    min-height: 100vh;
			
 
				+}
			
 
				+
			
 
				+img {
			
 
				+    max-width: 100%;
			
 
				+    height: auto;
			
 
				+    vertical-align: top;
			
 
				+}
			
 
				+
			
 
				+.header {
			
 
				+    background: #D2B837;
			
 
				+    padding: 15px 30px;
			
 
				+}
			
 
				+
			
 
				+.header-wrap {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+}
			
 
				+
			
 
				+.nav {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: flex-end;
			
 
				+    flex-grow: 1;
			
 
				+}
			
 
				+
			
 
				+.nav-list {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    list-style: none;
			
 
				+    margin: 0;
			
 
				+    padding-left: 0;
			
 
				+}
			
 
				+
			
 
				+.nav-item+.nav-item {
			
 
				+    padding-left: 15px;
			
 
				+}
			
 
				+
			
 
				+.nav-link {
			
 
				+    color: black;
			
 
				+    text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+.nav-link:hover {
			
 
				+    opacity: .7;
			
 
				+}
			
 
				+
			
 
				+.content {
			
 
				+    display: flex;
			
 
				+    flex-grow: 1;
			
 
				+}
			
 
				+
			
 
				+.aside {
			
 
				+    max-width: 210px;
			
 
				+    width: 100%;
			
 
				+    padding: 10px;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+
			
 
				+.aside-left {
			
 
				+    background: #c798b9;
			
 
				+    order: -1;
			
 
				+}
			
 
				+
			
 
				+.aside-right {
			
 
				+    background: #9cb1c7;
			
 
				+}
			
 
				+
			
 
				+.main {
			
 
				+    padding: 20px;
			
 
				+    text-align: center;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+}
			
 
				+
			
 
				+.boxes {
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    justify-content: space-around;
			
 
				+}
			
 
				+
			
 
				+.box {
			
 
				+    height: 400px;
			
 
				+    width: 320px;
			
 
				+    border: 2px solid grey;
			
 
				+    border-radius: 25px;
			
 
				+    margin-bottom: 15px;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    justify-content: space-around;
			
 
				+    align-items: center;
			
 
				+}
			
 
				+
			
 
				+.pict {
			
 
				+    height: 80px;
			
 
				+    width: 80px;
			
 
				+    border-radius: 50%;
			
 
				+    border: 8px solid #c798b9;
			
 
				+    /* position: absolute;
			
 
				+    transform: translateY(-140px); */
			
 
				+
			
 
				+}
			
 
				+
			
 
				+h2 {
			
 
				+    font-size: 20px;
			
 
				+}
			
 
				+
			
 
				+.about {
			
 
				+    text-align: top;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.btn {
			
 
				+    height: 25px;
			
 
				+    width: 50px;
			
 
				+    background: #685274;
			
 
				+    color: white;
			
 
				+    border-radius: 25px;
			
 
				+    border-style: none;
			
 
				+}
			
 
				+
			
 
				+.btn:hover {
			
 
				+    transition: all .3s ease-in;
			
 
				+    opacity: .8;
			
 
				+    background-color: #86ec86;
			
 
				+    border: 2px solid #0e7f12;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.task3 {
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    justify-content: center;
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.holder {
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    /* justify-content: center; */
			
 
				+    max-height: 200px;
			
 
				+    width: 600px;
			
 
				+    border: 2px solid black;
			
 
				+    border-radius: 25px 25px 0px 0px;
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.holder>.item:first-child {
			
 
				+    background-color: #fd644d;
			
 
				+    order: 1;
			
 
				+    flex-grow: 1;
			
 
				+    border-radius: 25px 0px 0px 0px;
			
 
				+}
			
 
				+
			
 
				+.holder>.item:last-child {
			
 
				+    background-color: #fda429;
			
 
				+    order: 2;
			
 
				+    flex-grow: 1;
			
 
				+    border-radius: 0px 25px 0px 0px;
			
 
				+}
			
 
				+
			
 
				+.holder>.item:nth-child(3) {
			
 
				+    background-color: #663797;
			
 
				+    order: 3;
			
 
				+    height: calc(100px - 2px);
			
 
				+    /* width: calc(200px - 2px); */
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.holder>.item:nth-child(2) {
			
 
				+    background-color: #4983b2;
			
 
				+    order: 4;
			
 
				+    height: calc(100px - 2px);
			
 
				+    width: calc(200px - 4px);
			
 
				+}
			
 
				+
			
 
				+.holder>.item:nth-child(4) {
			
 
				+    background-color: #0e7f12;
			
 
				+    order: 5;
			
 
				+    height: 98px;
			
 
				+    /* width: calc(200px - 2px); */
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.item {
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    height: 100px;
			
 
				+    width: 200px;
			
 
				+}
			
 
				+
			
 
				+.footer {
			
 
				+    background: #86ec86;
			
 
				+    padding: 10px;
			
 
				+    text-align: center;
			
 
				+}
			
--- a/Homework_5/img/Logo.png
+++ b/Homework_5/img/Logo.png
--- a/Homework_5/img/А_levelfav.ico
+++ b/Homework_5/img/А_levelfav.ico
--- a/Homework_5/img/Закат.jpg
+++ b/Homework_5/img/Закат.jpg
--- a/Homework_5/index.html
+++ b/Homework_5/index.html
@@ -0,0 +1,138 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Classwork_5</title>
			
 
				+    <link rel="shortcut icon" href="/img/А_levelfav.ico" type="image/x-icon">
			
 
				+    <link rel="stylesheet" href="/Styles/style.css">
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div class="wrapper">
			
 
				+        <header class="header">
			
 
				+            <div class="container">
			
 
				+                <div class="header-wrap">
			
 
				+                    <a href="#" class="logo">
			
 
				+                        <img src="/img/Logo.png" alt="Logo">
			
 
				+                    </a>
			
 
				+                    <nav class="nav">
			
 
				+                        <ul class="nav-list">
			
 
				+                            <li class="nav-item">
			
 
				+                                <a href="#" class="nav-link">Item 1</a>
			
 
				+                            </li>
			
 
				+                            <li class="nav-item">
			
 
				+                                <a href="#" class="nav-link">Item 2</a>
			
 
				+                            </li>
			
 
				+                            <li class="nav-item">
			
 
				+                                <a href="#" class="nav-link">Item 3</a>
			
 
				+                            </li>
			
 
				+                            <li class="nav-item">
			
 
				+                                <a href="#" class="nav-link">Item 4</a>
			
 
				+                            </li>
			
 
				+                            <li class="nav-item">
			
 
				+                                <a href="#" class="nav-link">Item 5</a>
			
 
				+                            </li>
			
 
				+                        </ul>
			
 
				+                    </nav>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </header>
			
 
				+        <div class="content">
			
 
				+            <main class="main">
			
 
				+                <p class="about">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde molestiae non dolorum,
			
 
				+                    magni asperiores ex illo,
			
 
				+                    expedita nihil explicabo rem a libero magnam soluta id totam? Debitis doloribus tempore veritatis.
			
 
				+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla, tempora cupiditate excepturi
			
 
				+                    culpa vel officia placeat. Mollitia ullam hic labore quam recusandae esse quas vitae laborum
			
 
				+                    blanditiis,
			
 
				+                    perferendis quibusdam.
			
 
				+                </p>
			
 
				+                <h1>OUR WORK</h1>
			
 
				+                <div class="boxes">
			
 
				+                    <div class="box box1">
			
 
				+                        <img src="/img/Закат.jpg" alt="sunset" class="pict">
			
 
				+                        <div class="about">
			
 
				+                            <h2>Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p class="about">Lorem ipsum dolor sit amet.</p>
			
 
				+                        </div>
			
 
				+                        <button class="btn">Go</button>
			
 
				+                    </div>
			
 
				+                    <div class="box box2">
			
 
				+                        <img src="/img/Закат.jpg" alt="sunset" class="pict">
			
 
				+                        <div class="about">
			
 
				+                            <h2>Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p>Lorem ipsum dolor sit Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
			
 
				+                        </div>
			
 
				+                        <button class="btn">Go</button>
			
 
				+                    </div>
			
 
				+                    <div class="box box3">
			
 
				+                        <img src="/img/Закат.jpg" alt="sunset" class="pict">
			
 
				+                        <div class="about">
			
 
				+                            <h2>Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p>Lorem ipsum dolor sit amet.</p>
			
 
				+                        </div>
			
 
				+                        <button class="btn">Go</button>
			
 
				+                    </div>
			
 
				+                    <div class="box box4">
			
 
				+                        <img src="/img/Закат.jpg" alt="sunset" class="pict">
			
 
				+                        <div class="about">
			
 
				+                            <h2>Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p class="about">
			
 
				+                                Lorem ipsum dolor sit amet consectetur adipisicing elit.
			
 
				+                            </p>
			
 
				+                        </div>
			
 
				+                        <button class="btn">Go</button>
			
 
				+                    </div>
			
 
				+                    <div class="box box5">
			
 
				+                        <img src="/img/Закат.jpg" alt="sunset" class="pict">
			
 
				+                        <div class="about">
			
 
				+                            <h2>Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde molestiae non
			
 
				+                                dolorum, magni asperiores ex illo,
			
 
				+                                expedita nihil explicabo rem a libero magnam soluta id totam? Debitis doloribus tempore
			
 
				+                                veritatis. Lorem ipsum dolor sit amet consectetur adipisicing elit.
			
 
				+                            </p>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="box box6">
			
 
				+                        <img src="/img/Закат.jpg" alt="sunset" class="pict">
			
 
				+                        <div class="about">
			
 
				+                            <h2>Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p class="about">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde
			
 
				+                                molestiae non
			
 
				+                                dolorum, magni asperiores ex illo,
			
 
				+                                expedita nihil explicabo rem a libero magnam soluta id totam? Debitis doloribus
			
 
				+                                tempore
			
 
				+                                veritatis.
			
 
				+                            </p>
			
 
				+                        </div>
			
 
				+                        <button class="btn">Go</button>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <section class="task3">
			
 
				+                    <div class="holder">
			
 
				+                        <div class="item">1</div>
			
 
				+                        <div class="item">2</div>
			
 
				+                        <div class="item">3</div>
			
 
				+                        <div class="item">4</div>
			
 
				+                        <div class="item">5</div>
			
 
				+                    </div>
			
 
				+                </section>
			
 
				+            </main>
			
 
				+            <aside class="aside aside-left">
			
 
				+                <span>Aside Left</span>
			
 
				+            </aside>
			
 
				+            <aside class="aside aside-right">
			
 
				+                <span>Aside right</span>
			
 
				+            </aside>
			
 
				+        </div>
			
 
				+        <footer class="footer">
			
 
				+            <span>Footer</span>
			
 
				+        </footer>
			
 
				+    </div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Homework_6/Styles/style.css
+++ b/Homework_6/Styles/style.css
@@ -0,0 +1,431 @@
 
				+body {
			
 
				+    margin: 0;
			
 
				+    font-family: Georgia, 'Times New Roman', Times, serif;
			
 
				+}
			
 
				+
			
 
				+html {
			
 
				+    box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+*,
			
 
				+*:before,
			
 
				+*:after {
			
 
				+    box-sizing: inherit;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+.wrapper {
			
 
				+    max-width: 100%;
			
 
				+    position: relative;
			
 
				+    overflow: hidden;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+}
			
 
				+
			
 
				+img {
			
 
				+    max-width: 100%;
			
 
				+    height: auto;
			
 
				+    vertical-align: top;
			
 
				+}
			
 
				+
			
 
				+.header {
			
 
				+    position: relative;
			
 
				+    background: #D2B837;
			
 
				+    padding: 15px 30px;
			
 
				+}
			
 
				+
			
 
				+.header-wrap {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+}
			
 
				+
			
 
				+#burger {
			
 
				+    position: absolute;
			
 
				+    left: -99999999px;
			
 
				+    opacity: 0;
			
 
				+    visibility: hidden;
			
 
				+}
			
 
				+
			
 
				+.burger {
			
 
				+    display: block;
			
 
				+    height: 16px;
			
 
				+    width: 26px;
			
 
				+    position: relative;
			
 
				+    cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+.burger:before,
			
 
				+.burger:after {
			
 
				+    content: '';
			
 
				+}
			
 
				+
			
 
				+.burger:before,
			
 
				+.burger span,
			
 
				+.burger:after {
			
 
				+    height: 2px;
			
 
				+    position: absolute;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    background: #000;
			
 
				+    border-radius: 2px;
			
 
				+}
			
 
				+
			
 
				+.burger:before {
			
 
				+    top: 0;
			
 
				+}
			
 
				+
			
 
				+.burger span {
			
 
				+    top: 7px;
			
 
				+}
			
 
				+
			
 
				+.burger:after {
			
 
				+    bottom: 0px;
			
 
				+}
			
 
				+
			
 
				+#burger:checked + .burger span {
			
 
				+    opacity: 0;
			
 
				+}
			
 
				+
			
 
				+#burger:checked + .burger:before {
			
 
				+    transition: transform .3s ease-in-out;
			
 
				+    transform: rotate(45deg);
			
 
				+    top: 7px;
			
 
				+}
			
 
				+
			
 
				+#burger:checked + .burger:after {
			
 
				+    transition: transform .3s ease-in-out;
			
 
				+    transform: rotate(-45deg);
			
 
				+    bottom: 7px;
			
 
				+}
			
 
				+
			
 
				+#burger:checked ~ .nav-list {
			
 
				+    transition: opacity .3s case-in-out;
			
 
				+    opacity: 1;
			
 
				+    visibility: visible;
			
 
				+}
			
 
				+
			
 
				+.nav {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: flex-end;
			
 
				+    flex-grow: 1;
			
 
				+}
			
 
				+
			
 
				+.nav-list {
			
 
				+    display: block;
			
 
				+    list-style: none;
			
 
				+    margin: 0;
			
 
				+    padding-left: 0;
			
 
				+
			
 
				+    position: absolute;
			
 
				+    top: 100%;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    background: #D2B837;
			
 
				+    text-align: center;
			
 
				+
			
 
				+    opacity: 0;
			
 
				+    visibility: hidden;
			
 
				+}
			
 
				+
			
 
				+.nav-item {
			
 
				+    padding-bottom: 15px;
			
 
				+}
			
 
				+
			
 
				+.nav-link {
			
 
				+    color: black;
			
 
				+    text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+.nav-link:hover {
			
 
				+    opacity: .7;
			
 
				+}
			
 
				+
			
 
				+.content {
			
 
				+    display: flex;
			
 
				+    flex-grow: 1;
			
 
				+
			
 
				+    flex-direction: column;
			
 
				+}
			
 
				+
			
 
				+.aside {
			
 
				+    display: flex;
			
 
				+    min-width: 210px;
			
 
				+    width: 100%;
			
 
				+    padding: 10px;
			
 
				+   justify-content: center;
			
 
				+}
			
 
				+
			
 
				+.aside-left {
			
 
				+    background: pink;
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.aside-right {
			
 
				+    background: #9cb1c7;
			
 
				+    
			
 
				+}
			
 
				+
			
 
				+.main {
			
 
				+    padding: 20px;
			
 
				+    text-align: center;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    flex-grow: 1;
			
 
				+}
			
 
				+
			
 
				+h1 {
			
 
				+    font-size: 16px;
			
 
				+}
			
 
				+
			
 
				+.boxes {
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    justify-content: space-around;
			
 
				+}
			
 
				+
			
 
				+.box {
			
 
				+    height: 35vh;
			
 
				+    max-height: 450px;
			
 
				+    min-height: 250px;
			
 
				+    width: calc(30vw - 20px);
			
 
				+    max-width: 400px;
			
 
				+    min-width: 200px;
			
 
				+    margin-bottom: 10px;
			
 
				+    border: 2px solid grey;
			
 
				+    border-radius: 25px;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    justify-content: space-around;
			
 
				+    align-items: center;
			
 
				+}
			
 
				+
			
 
				+.pict {
			
 
				+    height: 50px;
			
 
				+    width: 50px;
			
 
				+    border-radius: 50%;
			
 
				+    border: 8px solid #c798b9;
			
 
				+    margin-top: 15px;
			
 
				+
			
 
				+}
			
 
				+
			
 
				+h2 {
			
 
				+    font-size: 14px;
			
 
				+}
			
 
				+
			
 
				+.about {
			
 
				+    display: flex;
			
 
				+    flex-grow: 1;
			
 
				+    flex-direction: column;
			
 
				+    align-items: center;
			
 
				+    justify-content: space-around;
			
 
				+}
			
 
				+
			
 
				+p {
			
 
				+    font-size: 11px;
			
 
				+}
			
 
				+
			
 
				+.btncontainer {
			
 
				+    height: auto;
			
 
				+    width: 100%;
			
 
				+}
			
 
				+
			
 
				+.btn {
			
 
				+    height: 18px;
			
 
				+    width: 37px;
			
 
				+    background: #685274;
			
 
				+    color: white;
			
 
				+    border-radius: 25px;
			
 
				+    border-style: none;
			
 
				+    margin-bottom: 15px;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+
			
 
				+.btn:hover {
			
 
				+    transition: all .3s ease-in;
			
 
				+    opacity: .8;
			
 
				+    background-color: #86ec86;
			
 
				+    border: 2px solid #0e7f12;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.task3 {
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    justify-content: center;
			
 
				+    margin-top: 20px;
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.holder {
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    height: 100px;
			
 
				+    width: 300px;
			
 
				+    border: 2px solid black;
			
 
				+    border-radius: 25px 25px 0px 0px;
			
 
				+    background: #0e7f12;
			
 
				+   
			
 
				+}
			
 
				+
			
 
				+.holder>.item:first-child {
			
 
				+    background-color: #fd644d;
			
 
				+    order: 1;
			
 
				+    flex-grow: 1;
			
 
				+    border-radius: 25px 0px 0px 0px;
			
 
				+}
			
 
				+
			
 
				+.holder>.item:last-child {
			
 
				+    background-color: #fda429;
			
 
				+    order: 2;
			
 
				+    flex-grow: 1;
			
 
				+    border-radius: 0px 25px 0px 0px;
			
 
				+}
			
 
				+
			
 
				+.holder>.item:nth-child(3) {
			
 
				+    background-color: #663797;
			
 
				+    order: 3;
			
 
				+    height: 48px;
			
 
				+    width: 98px;
			
 
				+}
			
 
				+
			
 
				+.holder>.item:nth-child(2) {
			
 
				+    background-color: #4983b2;
			
 
				+    order: 4;
			
 
				+    height: 48px;
			
 
				+    width: 99px;
			
 
				+}
			
 
				+
			
 
				+.holder>.item:nth-child(4) {
			
 
				+    background-color: #0e7f12;
			
 
				+    order: 5;
			
 
				+    height: 48px;
			
 
				+    width: 99px;
			
 
				+}
			
 
				+
			
 
				+.item {
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    height: 50px;
			
 
				+    width: 100px;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.footer {
			
 
				+    background: #86ec86;
			
 
				+    padding: 10px;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+
			
 
				+@media(min-width: 1921px) {
			
 
				+  .boxes {
			
 
				+    justify-content: center;
			
 
				+}
			
 
				+  
			
 
				+    .box {
			
 
				+    max-height: 600px;
			
 
				+    max-width: 450px;
			
 
				+  }
			
 
				+    
			
 
				+}
			
 
				+
			
 
				+@media(min-width: 1024px) {
			
 
				+    .burger {
			
 
				+        display: none;
			
 
				+    }
			
 
				+
			
 
				+    .nav-list {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+
			
 
				+        opacity: 1;
			
 
				+        visibility: visible;
			
 
				+        position: static;
			
 
				+    }
			
 
				+
			
 
				+    .nav-item {
			
 
				+        padding-bottom: 0;
			
 
				+    }
			
 
				+
			
 
				+    .nav-item + .nav-item {
			
 
				+        padding-left: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .content {
			
 
				+        flex-direction: row;
			
 
				+    }
			
 
				+
			
 
				+    .aside {
			
 
				+        max-width: 210px;
			
 
				+    }
			
 
				+
			
 
				+    .aside-left {
			
 
				+        order: -1;
			
 
				+    }
			
 
				+
			
 
				+    .pict {
			
 
				+       height: 120px;
			
 
				+       width: 120px;
			
 
				+    }
			
 
				+
			
 
				+    .holder {
			
 
				+        height: 200px;
			
 
				+        width: 600px;
			
 
				+    }
			
 
				+     
			
 
				+    .holder>.item:nth-child(3) {
			
 
				+        height: 98px;
			
 
				+        width: 198px;
			
 
				+    }
			
 
				+    
			
 
				+    .holder>.item:nth-child(2) {
			
 
				+        height: 98px;
			
 
				+        width: 199px;
			
 
				+    }
			
 
				+    
			
 
				+    .holder>.item:nth-child(4) {
			
 
				+        height: 98px;
			
 
				+        width: 199px;
			
 
				+    }
			
 
				+    
			
 
				+    .item {
			
 
				+        height: 100px;
			
 
				+        width: 200px;
			
 
				+    }
			
 
				+
			
 
				+    .box {
			
 
				+        margin: 10px 15px;
			
 
				+    }
			
 
				+
			
 
				+    p {
			
 
				+       font-size: 12px;
			
 
				+    }
			
 
				+
			
 
				+    .btn {
			
 
				+        height: 25px;
			
 
				+        width: 50px;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+@media(min-width: 768px) {
			
 
				+    .box {
			
 
				+        max-height: 350px;
			
 
				+        max-width: 250px;
			
 
				+    }
			
 
				+
			
 
				+    .pict {
			
 
				+       height: 70px;
			
 
				+       width: 70px;
			
 
				+    }
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 14px;
			
 
				+    }
			
 
				+
			
 
				+    .btn {
			
 
				+        height: 20px;
			
 
				+        width: 40px;
			
 
				+    }
			
 
				+}
			
--- a/Homework_6/img/Logo.png
+++ b/Homework_6/img/Logo.png
--- a/Homework_6/img/Sunset.jpg
+++ b/Homework_6/img/Sunset.jpg
--- a/Homework_6/img/А_levelfav.ico
+++ b/Homework_6/img/А_levelfav.ico
--- a/Homework_6/index.html
+++ b/Homework_6/index.html
@@ -0,0 +1,161 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Homework 6</title>
			
 
				+    <link rel="shortcut icon" href="/img/А_levelfav.ico" type="image/x-icon">
			
 
				+    <link rel="stylesheet" href="/Styles/style.css">
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div class="wrapper">
			
 
				+        <header class="header">
			
 
				+            <div class="container">
			
 
				+                <div class="header-wrap">
			
 
				+                    <a href="#" class="logo">
			
 
				+                        <img src="/img/Logo.png" alt="Logo">
			
 
				+                    </a>
			
 
				+                    <nav class="nav">
			
 
				+                        <input type="checkbox" name="" id="burger">
			
 
				+                        <label for="burger" class="burger">
			
 
				+                            <span></span>
			
 
				+                        </label>
			
 
				+                        <ul class="nav-list">
			
 
				+                            <li class="nav-item">
			
 
				+                                <a href="#" class="nav-link">Item 1</a>
			
 
				+                            </li>
			
 
				+                            <li class="nav-item">
			
 
				+                                <a href="#" class="nav-link">Item 2</a>
			
 
				+                            </li>
			
 
				+                            <li class="nav-item">
			
 
				+                                <a href="#" class="nav-link">Item 3</a>
			
 
				+                            </li>
			
 
				+                            <li class="nav-item">
			
 
				+                                <a href="#" class="nav-link">Item 4</a>
			
 
				+                            </li>
			
 
				+                            <li class="nav-item">
			
 
				+                                <a href="#" class="nav-link">Item 5</a>
			
 
				+                            </li>
			
 
				+                        </ul>
			
 
				+                    </nav>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </header>
			
 
				+        <div class="content">
			
 
				+            <main class="main">
			
 
				+                <p class="about">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde molestiae non dolorum,
			
 
				+                    magni asperiores ex illo,
			
 
				+                    expedita nihil explicabo rem a libero magnam soluta id totam? Debitis doloribus tempore veritatis.
			
 
				+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla, tempora cupiditate excepturi
			
 
				+                    culpa vel officia placeat. Mollitia ullam hic labore quam recusandae esse quas vitae laborum
			
 
				+                    blanditiis,
			
 
				+                    perferendis quibusdam.
			
 
				+                </p>
			
 
				+                <h1>OUR WORK</h1>
			
 
				+                <div class="boxes">
			
 
				+                    <div class="box box1">
			
 
				+                        <div class="imgcontainer">
			
 
				+                            <img src="/img/Sunset.jpg" alt="sunset" class="pict">
			
 
				+                        </div>
			
 
				+                        <div class="about">
			
 
				+                            <h2 class="title">Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p class="about">Lorem ipsum dolor sit amet.</p>
			
 
				+                        </div>
			
 
				+                        <div class="btncontainer">
			
 
				+                            <button class="btn">Go</button>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="box box2">
			
 
				+                        <div class="imgcontainer">
			
 
				+                            <img src="/img/Sunset.jpg" alt="sunset" class="pict">
			
 
				+                        </div>
			
 
				+                        <div class="about">
			
 
				+                            <h2 class="title">Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p>Lorem ipsum dolor sit Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
			
 
				+                        </div>
			
 
				+                        <div class="btncontainer">
			
 
				+                            <button class="btn">Go</button>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="box box3">
			
 
				+                        <div class="imgcontainer">
			
 
				+                            <img src="/img/Sunset.jpg" alt="sunset" class="pict">
			
 
				+                        </div>
			
 
				+                        <div class="about">
			
 
				+                            <h2 class="title">Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p>Lorem ipsum dolor sit amet.</p>
			
 
				+                        </div>
			
 
				+                        <div class="btncontainer">
			
 
				+                            <button class="btn">Go</button>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="box box4">
			
 
				+                        <div class="imgcontainer">
			
 
				+                            <img src="/img/Sunset.jpg" alt="sunset" class="pict">
			
 
				+                        </div>
			
 
				+                        <div class="about">
			
 
				+                            <h2 class="title">Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p class="about">
			
 
				+                                Lorem ipsum dolor sit amet consectetur adipisicing elit.
			
 
				+                            </p>
			
 
				+                        </div>
			
 
				+                        <div class="btncontainer">
			
 
				+                            <button class="btn">Go</button>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="box box5">
			
 
				+                        <div class="imgcontainer">
			
 
				+                            <img src="/img/Sunset.jpg" alt="sunset" class="pict">
			
 
				+                        </div>
			
 
				+                        <div class="about">
			
 
				+                            <h2 class="title">Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde molestiae non
			
 
				+                                dolorum, magni asperiores ex illo. 
			
 
				+                            </p>
			
 
				+                        </div>
			
 
				+                        <div class="btncontainer">
			
 
				+                            <button class="btn">Go</button>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                    <div class="box box6">
			
 
				+                        <div class="imgcontainer">
			
 
				+                            <img src="/img/Sunset.jpg" alt="sunset" class="pict">
			
 
				+                        </div>
			
 
				+                        <div class="about">
			
 
				+                            <h2 class="title">Lorem ipsum dolor sit amet</h2>
			
 
				+                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde
			
 
				+                                molestiae non.
			
 
				+                            </p>
			
 
				+                        </div>
			
 
				+                        <div class="btncontainer">
			
 
				+                            <button class="btn">Go</button>
			
 
				+                        </div>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+                <section class="task3">
			
 
				+                    <div class="holder">
			
 
				+                        <div class="item">1</div>
			
 
				+                        <div class="item">2</div>
			
 
				+                        <div class="item">3</div>
			
 
				+                        <div class="item">4</div>
			
 
				+                        <div class="item">5</div>
			
 
				+                    </div>
			
 
				+                </section>
			
 
				+            </main>
			
 
				+            <aside class="aside aside-left">
			
 
				+                <span>Aside Left</span>
			
 
				+            </aside>
			
 
				+            <aside class="aside aside-right">
			
 
				+                <span>Aside right</span>
			
 
				+            </aside>
			
 
				+        </div>
			
 
				+        <footer class="footer">
			
 
				+            <span>Footer</span>
			
 
				+        </footer>
			
 
				+    </div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Homework_7.
+++ b/Homework_7.
@@ -0,0 +1 @@
 
				+Subproject commit 7a02fcf7bac834ad28a99dfa7d34aa1edd366ec7
			
--- a/Homework_8/index.html
+++ b/Homework_8/index.html
@@ -0,0 +1,55 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
			
 
				+        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
			
 
				+    <title>Bootstrap</title>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <section class="a">
			
 
				+        <div class="container">
			
 
				+            <div class="row">
			
 
				+                <div class="a1 col-lg-6">A1</div>
			
 
				+                <div class="a2 col-lg-6">A2</div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </section>
			
 
				+
			
 
				+    <section class="b">
			
 
				+        <div class="container">
			
 
				+            B
			
 
				+        </div>
			
 
				+    </section>
			
 
				+
			
 
				+    <section class="c">
			
 
				+        <div class="container">
			
 
				+            <div class="row">
			
 
				+                <div class="c1 col-sm-6 col-lg-4">C1</div>
			
 
				+                <div class="c2 col-sm-6 col-lg-4">C2</div>
			
 
				+                <div class="c3 col-lg-4">C3</div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </section>
			
 
				+
			
 
				+    <section class="d">
			
 
				+        <div class="container">
			
 
				+            <div class="row">
			
 
				+                <div class="d1 col-sm-6 col-lg-3">D1</div>
			
 
				+                <div class="d2 col-sm-6 col-lg-3">D2</div>
			
 
				+                <div class="d3 col-sm-6 col-lg-3">D3</div>
			
 
				+                <div class="d4 col-sm-6 col-lg-3">D4</div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </section>
			
 
				+
			
 
				+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
			
 
				+        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
			
 
				+        crossorigin="anonymous"></script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Homework_8/style.css
+++ b/Homework_8/style.css
		`@@ -0,0 +1 @@`
		`+Subproject commit 7a02fcf7bac834ad28a99dfa7d34aa1edd366ec7`