Home Explore Help
Sign In
Oleksii
/
Homeworks_Oleksii.L
Watch 1
Star 0
Fork 0
Files Issues 6 Pull Requests 0 Wiki
Browse Source

first commit

OleksiiL 2 years ago
commit
bfb6790eca
37 changed files with 1591 additions and 0 deletions
Unified View Show Diff Stats
  1. 63 0
      Homework_1/index.html
  2. BIN
      Homework_1/А_levelfav.ico
  3. 15 0
      Homework_12/index.html
  4. 13 0
      Homework_12/main.js
  5. BIN
      Homework_2/img/animal.webp
  6. BIN
      Homework_2/img/building.jpg
  7. BIN
      Homework_2/img/donut.png
  8. BIN
      Homework_2/img/grass.png
  9. BIN
      Homework_2/img/lamp.png
  10. 59 0
      Homework_2/index.html
  11. 49 0
      Homework_2/style/style.css
  12. BIN
      Homework_2/А_levelfav.ico
  13. 43 0
      Homework_3/Styles/reset.css
  14. 32 0
      Homework_3/Styles/style.css
  15. BIN
      Homework_3/img/HTML - ліва.png
  16. BIN
      Homework_3/img/HTML+CSS.png
  17. BIN
      Homework_3/img/А_levelfav.ico
  18. 50 0
      Homework_3/index.html
  19. 206 0
      Homework_4/Styles/style.css
  20. BIN
      Homework_4/img/card01.png
  21. BIN
      Homework_4/img/small-orange-diamond-microsoft.png
  22. BIN
      Homework_4/img/А_levelfav.ico
  23. BIN
      Homework_4/img/Ромб.png
  24. 55 0
      Homework_4/index.html
  25. 220 0
      Homework_5/Styles/style.css
  26. BIN
      Homework_5/img/Logo.png
  27. BIN
      Homework_5/img/А_levelfav.ico
  28. BIN
      Homework_5/img/Закат.jpg
  29. 138 0
      Homework_5/index.html
  30. 431 0
      Homework_6/Styles/style.css
  31. BIN
      Homework_6/img/Logo.png
  32. BIN
      Homework_6/img/Sunset.jpg
  33. BIN
      Homework_6/img/А_levelfav.ico
  34. 161 0
      Homework_6/index.html
  35. 1 0
      Homework_7. Final Project HTML+CSS
  36. 55 0
      Homework_8/index.html
  37. 0 0
      Homework_8/style.css

+ 63 - 0
Homework_1/index.html
View File 

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

BIN
Homework_1/А_levelfav.ico
View File


+ 15 - 0
Homework_12/index.html
View File 

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

+ 13 - 0
Homework_12/main.js
View File 

@@ -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);

BIN
Homework_2/img/animal.webp
View File


BIN
Homework_2/img/building.jpg
View File


BIN
Homework_2/img/donut.png
View File


BIN
Homework_2/img/grass.png
View File


BIN
Homework_2/img/lamp.png
View File


+ 59 - 0
Homework_2/index.html
View File 

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

+ 49 - 0
Homework_2/style/style.css
View File 

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

BIN
Homework_2/А_levelfav.ico
View File


+ 43 - 0
Homework_3/Styles/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;
 
+}

+ 32 - 0
Homework_3/Styles/style.css
View File 

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

BIN
Homework_3/img/HTML - ліва.png
View File


BIN
Homework_3/img/HTML+CSS.png
View File


BIN
Homework_3/img/А_levelfav.ico
View File


+ 50 - 0
Homework_3/index.html
View File 

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

+ 206 - 0
Homework_4/Styles/style.css
View File 

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

BIN
Homework_4/img/card01.png
View File


BIN
Homework_4/img/small-orange-diamond-microsoft.png
View File


BIN
Homework_4/img/А_levelfav.ico
View File


BIN
Homework_4/img/Ромб.png
View File


+ 55 - 0
Homework_4/index.html
View File 

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

+ 220 - 0
Homework_5/Styles/style.css
View File 

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

BIN
Homework_5/img/Logo.png
View File


BIN
Homework_5/img/А_levelfav.ico
View File


BIN
Homework_5/img/Закат.jpg
View File


+ 138 - 0
Homework_5/index.html
View File 

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

+ 431 - 0
Homework_6/Styles/style.css
View File 

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

BIN
Homework_6/img/Logo.png
View File


BIN
Homework_6/img/Sunset.jpg
View File


BIN
Homework_6/img/А_levelfav.ico
View File


+ 161 - 0
Homework_6/index.html
View File 

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

+ 1 - 0
Homework_7. Final Project HTML+CSS 

@@ -0,0 +1 @@
 
+Subproject commit 7a02fcf7bac834ad28a99dfa7d34aa1edd366ec7

+ 55 - 0
Homework_8/index.html
View File 

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

+ 0 - 0
Homework_8/style.css
View File