ccc

Lessons6/HW6_Romanenko/css/fonts.css

@@ -0,0 +1,8 @@
+@font-face {
+    font-family: 'Montserrat-Regular';
+    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
+}
+@font-face {
+    font-family: 'Courgette-Regular';
+    src: url('../fonts/Courgette-Regular.ttf') format('truetype');
+}

Lessons6/HW6_Romanenko/css/main.css

@@ -0,0 +1,674 @@
+*, :before, :after {
+    box-sizing: border-box;
+}
+body {
+    margin: 0;
+    font-family: 'Montserrat', regular;
+    background: #e7e9eb;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.77;
+    color: #221818;
+}
+img {
+    max-width: 100%;
+    height: auto;
+}
+strong {
+    font-weight: bold;
+}
+h1 {
+    font-family: 'Courgette', cursive;
+    font-size: 46px;
+    font-weight: 400;
+    line-height: 1.13;
+    margin-bottom: 20px;
+}
+h2 {
+    display: block;
+    margin: 20px 0;
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+}
+h3 {
+    display: block;
+    font-size: 18px;
+    line-height: 1.5;
+    font-weight: 700;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+    color: #fd1c18;
+}
+.wrapper {
+    /*класс для того, что бы
+    центральная часть занимала всю высоту страницы
+    кроме header и footer,и footer был бы снизу зафиксирован*/
+    display: flex;
+    /*элементы принимают
+    значение flex элементов, и выстраиваются вряд
+    (положение элементов row по умолчанию)*/
+    flex-direction: column;
+    /*меняем положение элементов 
+    с row по умолчанию на colum, элементы выстраиваются
+    в столбец*/
+    min-height: 100vh;
+    /*vieport height 
+    размер  .wrapper = размеру экрана(страницы)*/
+    /*max-width: auto;*/
+    /*максю ширина хэдэра*/
+    margin: 0 auto;
+    /*центрируем*/
+    /*возвращаем ширину после применения 
+    display: flex к .wrapper(родительскому контейнеру)*/
+}
+.header {
+    display: flex;
+    flex-wrap: wrap;
+    background: url(../images/bg-header.jpg);
+    align-items: center;
+}
+
+.header-top {
+    display: flex;
+    /*ставит элементы вряд*/
+    justify-content: space-between;
+    /*раскидывает по краям*/
+    background: url(../images/bg-header.jpg);
+    align-items: center;
+    /*выравниваем элементы по центру*/
+    padding: 15px 15px;
+    /*для того что бы элементы
+    не прилипали к роодителю*/
+    top: 0;
+    left: 0;
+    right: 0;
+    /*top:0; left:0; right:0 так мы растягиваем header
+    по всей ширине экрана*/
+    position: fixed;
+    z-index: 4;
+    /* position: relative; */
+}
+.header-logo {
+    width: 80px;
+    /*задаем ширину */
+    /* margin-left: 46%;*/
+    margin: 0 auto;
+}
+.header-bottom {
+    width: 100%;
+}
+.story {
+    max-width: 100%;
+    background: url(../images/bg-wood.jpg);
+    margin-top: 103.06px;
+    padding: 70px 0;
+    text-align: center;
+    position: relative;
+}
+.story:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(0, 0, 0, .4);
+    z-index: 2;
+}
+.text-story {
+    position: relative;
+    color: #fff;
+    z-index: 3;
+    max-width: 600px;
+    margin: 0 auto;
+}
+.main {
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    /*занимает всю высоту родителя(.wrapper)
+    кроме header и footer */
+    background: url(../images/bg-texture.png);
+}
+/* скрываем чекбокс */
+#menu__toggle {
+    opacity: 0;
+}
+/* стилизуем кнопку */
+.menu__btn {
+    display: flex;
+    /* используем flex для центрирования содержимого */
+    align-items: center;
+    /* центрируем содержимое кнопки */
+    /* position: fixed; */
+    top: 50%;
+    right: 40px;
+    transform: translateY(-50%);
+    width: 26px;
+    height: 26px;
+    cursor: pointer;
+    z-index: 1;
+    position: absolute;
+}
+/* добавляем "гамбургер" */
+.menu__btn>span, .menu__btn>span::before, .menu__btn>span::after {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background-color: #616161;
+}
+.menu__btn>span::before {
+    content: '';
+    top: -8px;
+}
+.menu__btn>span::after {
+    content: '';
+    top: 8px;
+}
+.menu__btn>span, .menu__btn>span::before, .menu__btn>span::after {
+    transition-duration: .25s;
+}
+.menu__box {
+    transition-duration: .25s;
+}
+.menu__item {
+    transition-duration: .25s;
+}
+/* контейнер меню */
+.menu__box {
+    display: block;
+    position: fixed;
+    visibility: hidden;
+    top: 0;
+    right: -100%;
+    width: 300px;
+    height: 100%;
+    margin: 0;
+    padding: 80px 0;
+    list-style: none;
+    text-align: center;
+    background-color: #ECEFF1;
+    box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
+}
+/* элементы меню */
+.menu__item {
+    display: block;
+    padding: 12px 24px;
+    color: #333;
+    font-family: 'Roboto', sans-serif;
+    font-size: 20px;
+    font-weight: 600;
+    text-decoration: none;
+}
+.menu__item:hover {
+    background-color: #CFD8DC;
+}
+#menu__toggle:checked~.menu__btn>span {
+    transform: rotate(45deg);
+}
+#menu__toggle:checked~.menu__btn>span::before {
+    top: 0;
+    transform: rotate(0);
+}
+#menu__toggle:checked~.menu__btn>span::after {
+    top: 0;
+    transform: rotate(90deg);
+}
+#menu__toggle:checked~.menu__box {
+    visibility: visible;
+    right: 0;
+}
+.content {
+    width: 1100px;
+    /* background: url(../images/bg-texture.png); */
+    padding: 80px 80px 30px;
+    margin: 0 auto;
+}
+.description {
+    display: flex;
+    text-align: justify;
+    /* margin: 40px 0; */
+    /* justify-content: space-between; */
+    justify-content: center;
+    align-items: center;
+}
+.img-food {
+    max-width: 400px;
+    margin-right: 5%;
+}
+.img-jaguar {
+    max-width: 400px;
+    margin-top: 70px;
+    order: 2;
+    margin-left: 5%;
+}
+.text-food {
+    max-width: 400px;
+    margin-left: 5%;
+}
+.text-beer {
+    max-width: 400px;
+    margin-top: 70px;
+    order: 1;
+    margin-right: 5%;
+}
+.btn {
+    width: 200px;
+    /* padding: 0 auto; */
+    border: 1px solid black;
+    text-transform: uppercase;
+    font-family: 'Montserrat', regular;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.77;
+    margin-top: 20px;
+    transition: 0.5s ease;
+}
+.btn:hover {
+    /* color: #fd1c18; */
+    transform: scale(1.1);
+    /* background: rgba(68, 128, 122, 0.8); */
+    background: rgba(92, 81, 81, 0.6);
+    border: 1px solid blue;
+}
+form {
+    margin: 0;
+}
+.client-form {
+    display: flex;
+    flex-direction: column;
+    max-width: 500px;
+    position: relative;
+    flex-wrap: wrap;
+    text-align: center;
+    margin: 20px auto;
+    align-items: center;
+}
+.id-card input {
+    width:100%;
+    max-width: 400px;
+    border: 1px solid#9c9c9c;
+    border-radius: 10px;
+    font-family: 'Montserrat', regular;
+    font-size: 15px;
+    margin-bottom: 15px;
+    line-height: 1.77;
+    padding-left: 10px;
+}
+.id-card textarea {
+    width: 100%;
+    max-height: 200px;
+    max-width: 400px;
+    border: 1px solid#9c9c9c;
+    border-radius: 10px;
+    font-family: 'Montserrat', regular;
+    font-size: 15px;
+    line-height: 1.77;
+    padding-left: 10px;
+}
+.footer {
+    display: flex;
+    justify-content: space-between;
+    border-top: 1px solid#65abab;
+    padding: 15px;
+    text-align: center;
+    align-items: center;
+}
+
+.footer-logo {
+    max-width: 100px;
+}
+
+.social-networks>li, a {
+    list-style: none;
+    text-decoration: none;
+}
+.social-networks {
+    display: flex;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+}
+.social-networks a {
+    display: flex;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: #364141;
+    color: white;
+    justify-content: center;
+    align-items: center;
+    transform: scale(1.2);
+    transition: 0.2s ease;
+    margin: 0 10px;
+}
+.social-networks a:hover {
+    background: white;
+    color: #364141;
+    border: 1px solid black;
+}
+.btn-footer {
+    width: auto;
+    border: 2px solid #fd1c18;
+    text-transform: uppercase;
+    font-family: 'Montserrat', regular;
+    font-size: 18px;
+    font-weight: 700;
+    padding: 1px 15px;
+    margin-top: 10px;
+    transition: 0.5s ease;
+}
+.btn-footer:hover {
+    transform: scale(1.1);
+    background: rgba(92, 81, 81, 0.6);
+}
+@media(max-width: 1099px) {
+    .img-food {
+        margin-right: 3%;
+    }
+    .img-jaguar {
+        margin-left: 3%;
+    }
+    .text-food {
+        margin-left: 3%;
+    }
+    .text-beer {
+        margin-right: 3%;
+    }
+    .content {
+        padding: 50px 50px 10px;
+    }
+}
+@media(max-width: 950px) {
+    .content {
+        padding: 30px 30px 10px;
+    }
+    .img-food {
+        margin-right: 2%;
+    }
+    .img-jaguar {
+        margin-left: 2%;
+    }
+    .text-food {
+        margin-left: 2%;
+    }
+    .text-beer {
+        margin-right: 2%;
+    }
+    .client-form {
+        max-width: 400px;
+    }
+    .id-card input {
+        max-width: 400px;
+    }
+}
+@media(max-width: 900px) {
+    .description {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        align-content: center;
+    }
+    .img-food {
+        max-width: 600px;
+        margin-right: 0;
+    }
+    .img-jaguar {
+        max-width: 600px;
+        margin-left: 0;
+        margin-top: 40px;
+    }
+    .text-food {
+        max-width: 600px;
+        margin-left: 0;
+        margin-top: 20px;
+    }
+    .text-beer {
+        max-width: 600px;
+        margin-right: 0;
+        margin-bottom: -20px;
+    }
+    .header-logo {
+        width: 60px;
+        /*задаем ширину */
+        margin: 0 auto;
+    }
+    .story {
+        margin-top: 84.3px;
+    }
+}
+@media(max-width: 660px) {
+    .header-logo {
+        margin: 0;
+    }
+    .story {
+        padding: 40px 0;
+    }
+    .img-food {
+        max-width: 500px;
+    }
+    .img-jaguar {
+        max-width: 500px;
+        margin-top: 40px;
+    }
+    .text-food {
+        max-width: 500px;
+        margin-top: 20px;
+    }
+    .text-beer {
+        max-width: 500px;
+        margin-bottom: -20px;
+    }
+    .client-form {
+        max-width: 400px;
+    }
+    .id-card input {
+        max-width: 400px;
+    }
+    .id-card textarea {
+        max-height: 200px;
+        max-width: 400px;
+    }
+    .footer-logo {
+        max-width: 80px;
+    }
+    body {
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 1.5;
+        color: #221818;
+    }
+    .text-story {
+        max-width: 400px;
+    }
+    .social-networks a {
+        width: 25px;
+        height: 25px;
+        margin: 0 5px;
+    }
+}
+@media(max-width: 500px) {
+    .content {
+        padding: 30px 20px 10px;
+    }
+    h1 {
+        font-size: 40px;
+        font-weight: 600;
+        line-height: 1.1;
+        margin-bottom: 15px;
+    }
+    h3 {
+        display: block;
+        font-size: 16px;
+        line-height: 1.5;
+        font-weight: 600;
+    }
+    .story {
+        padding: 20px 0;
+    }
+    .footer-logo {
+        max-width: 70px;
+    }
+    body {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 1.5;
+        color: #221818;
+    }
+}
+@media(max-width: 410px) {
+    .social-networks {
+        flex-direction: column;
+    }
+    .social-networks a {
+        margin: 5px 0;
+    }
+    .content {
+        padding: 30px 10px 10px;
+    }
+    h1 {
+        font-size: 35px;
+        font-weight: 700;
+        line-height: 1.1;
+        margin-bottom: 15px;
+    }
+    h3 {
+        display: block;
+        font-size: 16px;
+        line-height: 1.5;
+        font-weight: 700;
+    }
+    .story {
+        padding: 10px 0;
+    }
+    .text-story {
+        max-width: 350px;
+    }
+    .img-food {
+        max-width: 350px;
+    }
+    .img-jaguar {
+        max-width: 350px;
+    }
+    .text-food {
+        max-width: 350px;
+        margin-top: 20px;
+    }
+    .text-beer {
+        max-width: 350px;
+        margin-bottom: -10px;
+    }
+    .text-food {
+        margin-top: 5px;
+    }
+    .text-beer {
+        margin-top: 40px;
+        margin-bottom: -10px;
+    } 
+    .client-form {
+        max-width: 350px;
+    } 
+    .id-card input {
+        max-width: 350px;
+    } 
+    .id-card textarea {
+        max-height: 200px;
+        max-width: 350px;
+    }
+    .footer-logo {
+        max-width: 70px;
+    }
+    body {
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1.5;
+        color: #221818;
+    }
+    .footer {
+        padding: 10px;
+    }
+}
+@media(max-width: 400px) {
+    .story {
+        padding: 10px 0;
+    }
+    .social-networks {
+        flex-direction: column;
+    }
+    .social-networks a {
+        margin: 5px 0;
+    }
+    .content {
+        padding: 30px 10px 10px;
+    }
+    h1 {
+        font-size: 30px;
+        font-weight: 700;
+        line-height: 1.1;
+        margin-bottom: 15px;
+    }
+    h3 {
+        display: block;
+        font-size: 16px;
+        line-height: 1.5;
+        font-weight: 700;
+    }
+    .story {
+        padding: 10px 0;
+    }
+    .text-story {
+        max-width: 300px;
+    }
+    .img-food {
+        max-width: 300px;
+    }
+    .img-jaguar {
+        max-width: 300px;
+    }
+    .text-food {
+        max-width: 300px;
+        margin-top: 20px;
+    }
+    .text-beer {
+        max-width: 300px;
+        margin-bottom: -10px;
+    }
+    .footer-logo {
+        max-width: 70px;
+    }
+    body {
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1.5;
+        color: #221818;
+    }
+    .text-food {
+        margin-top: 5px;
+    }
+    .text-beer {
+        margin-top: 40px;
+        margin-bottom: -10px;
+    }
+    .client-form {
+        max-width: 300px;
+    }
+    .id-card input {
+        max-width: 300px;
+        /* width:100%; */
+    }
+    .id-card textarea {
+        max-height: 200px;
+        max-width: 300px;
+    }
+    .footer {
+        padding: 10px;
+        justify-content: space-between;
+    }
+    .btn-footer {
+        font-size: 14px;
+        padding: 1px 10px;
+        margin-top: 10px;
+    }
+}

Lessons6/HW6_Romanenko/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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;
+}

Lessons6/HW6_Romanenko/css/style.css

@@ -0,0 +1,36 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('../fonts/icomoon.eot?hbq5n0');
+  src:  url('../fonts/icomoon.eot?hbq5n0#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.ttf?hbq5n0') format('truetype'),
+    url('../fonts/icomoon.woff?hbq5n0') format('woff'),
+    url('../fonts/icomoon.svg?hbq5n0#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-google:before {
+  content: "\1f315";
+}
+.icon-facebook:before {
+  content: "\ea90";
+}
+.icon-twitter:before {
+  content: "\ea96";
+}

Lessons6/HW6_Romanenko/index.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="zxx">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HomeWork</title>
+    <link rel="icon" href="https://www.webfx.com/tools/emoji-cheat-sheet/graphics/emojis/house.png" sizes="32x32">
+    <link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/fonts.css">
+    <link rel="stylesheet" href="css/main.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header class="header">
+            <div class="header-top">
+                <div class="header-logo">
+                    <img src="images/logo.png" alt="logo">
+                </div>
+                <nav class="main-nav hamburger-menu">
+                    <!-- элемент, по которому юзер будет кликать  -->
+                    <input id="menu__toggle" type="checkbox" />
+                    <label class="menu__btn" for="menu__toggle">
+                        <span></span>
+                    </label>
+                    <!-- /* наше меню */ -->
+                    <ul class="menu__box">
+                        <li><a class="menu__item" href="#">Главная</a></li>
+                        <li><a class="menu__item" href="#">Проекты</a></li>
+                        <li><a class="menu__item" href="#">Команда</a></li>
+                        <li><a class="menu__item" href="#">Блог</a></li>
+                        <li><a class="menu__item" href="#">Контакты</a></li>
+                    </ul>
+                </nav>
+            </div>
+            <div class="header-bottom">
+                <div class="story">
+                    <div class="text-story">
+                        <h1>Our Story</h1>
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, voluptatibus molestiae?
+                            Laborum
+                            illum quod voluptatem quos magni placeat voluptas delectus ut aut, eveniet consectetur
+                            cupiditate
+                            saepe omnis minus incidunt officia!
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <main class="main">
+            <div class="content">
+                <section class="description">
+                    <div class="img-food">
+                        <img src="images/food.jpg" alt="food">
+                    </div>
+                    <div class="text-food">
+                        <h3>LOREM TEXT</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus deserunt quaerat, magni odit
+                            illum, veniam asperiores ab magnam vitae officia omnis iusto aperiam tempore quasi tempora
+                            voluptatum velit. Quis, nostrum.
+                        </p>
+                    </div>
+                </section>
+                <section class="description">
+                    <div class="img-jaguar">
+                        <img src="images/jaguar.png" alt="jaguar">
+                    </div>
+                    <div class="text-beer">
+                        <h3> MEXICAN CRAFT BEER</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus deserunt quaerat, magni odit
+                            illum, veniam asperiores ab magnam vitae officia omnis iusto aperiam tempore quasi tempora
+                            voluptatum velit. Quis, nostrum.
+                            Non quia beatae adipisci magni maiores blanditiis fugiat cumque architecto corrupti
+                            molestiae hic, repellendus nulla dicta cum et sit necessitatibus repudiandae fugit quas
+                            totam libero!
+                        </p>
+                        <button class="btn">SEE OUR BEER</button>
+                    </div>
+                </section>
+            </div>
+        </main>
+        <div class="client-form">
+            <h3>FORM</h3>
+            <form class="id-card" action="#" method="post">
+                <input type="text" name="name" placeholder="Name">
+                <input type="email" name="email" placeholder="Mail">
+                <input type="tel" name="Phone" placeholder="Phone">
+                <textarea cols="30" rows="10" placeholder="More info"></textarea>
+                <!-- <input type="submit" value="SUBMIT"> -->
+            </form>
+            <button class="btn">SUBMIT</button>
+        </div>
+        <footer>
+            <div class="footer">
+                <img class="footer-logo" src="images/logo.png" alt="logo">
+                <div>
+                    <h3>CONTACT</h3>
+                    <p>
+                        610 N Coast Hwy, <br>
+                        Laguna Beach, CA 92651
+                    </p>
+                    <button class="btn-footer">GET DIRECTIONS</button>
+                </div>
+                <ul class="social-networks">
+                    <li><a href="https://twitter.com" target="_blank"><i class="icon-twitter"></i></a></li>
+                    <li><a href="https://www.facebook.com/" target="_blank"><i class="icon-facebook"></i></a></li>
+                    <li><a href="https://google.com" target="_blank"><i class="icon-google"></i></a></li>
+                </ul>
+            </div>
+        </footer>
+    </div>
+</body>
+
+</html>

lesson3/HW3_Romanenko/css/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

lesson3/HW3_Romanenko/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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;
+}

lesson3/HW3_Romanenko/css/style.css

@@ -0,0 +1,48 @@
+*{
+    box-sizing: border-box;
+}
+main {
+    max-width: 1000px;/* макс. ширина облисти контента */
+    margin: 0 auto; /*внешние отступы: 0 сверху.снизу 
+    auto справа/слева что бы контент отображался по центру*/
+    text-align: justify; /* выравнивание по ширине */
+}
+h1 {
+    font-size: 40px; /*вымота текста=2 высоты текста родителя*/
+    line-height: 50px;
+    font-weight: bold;
+    text-align: center;
+}
+h2 {
+    font-size: 24px;
+    line-height: 40px;
+    font-weight: bold;
+    text-align: center;/* выравнивание по центру */
+}
+.bear {
+    font: 30px/32px 'Times New Roman', Times, serif;
+    /*стили шрифта: размер шрифта/высота линии 'стиль шрифта'
+    тип Time, шрифты с засечками (антиквенные)*/
+    height: 220px;
+    width: 350px;
+    border: 2px dashed #ff0000;/*пунктирная линия */
+    margin-bottom: 30px; 
+    padding: 15px 10px 20px;
+    background-color: green;
+}
+.article {
+    font: 16px/20px 'Times New Roman', serif;
+    margin-bottom: 30px; 
+}
+.float__img--left {
+    width: 250px;
+    float: left;
+    margin: 0 20px 20px 0;
+}
+.float__img--right {
+    width: 200px;
+    float: right;
+    margin: 20px 0px 20px 20px;
+}
+/*там где не заданы стили шрифта 
+то устраивает шрифт по умолчанию*/

lesson3/HW3_Romanenko/index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HomeWork</title>
+    <link rel="icon" href="https://www.webfx.com/tools/emoji-cheat-sheet/graphics/emojis/house.png" sizes="35x35">
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <header>
+        <h1>Домашка</h1>
+    </header>
+    <main>
+        <div>
+            <h2>1.Первый уровень</h2>
+            <p class="article">
+                После подключения стилей reset.css 
+                все стили, установленные по умолчанию,
+                обнулились, поэтому прописывались 
+                пользовательские стили в файле style.css.
+                Так же было прописано свойство 
+                box-sizing: border-box для правильного 
+                отображения контента в границах элемента.
+            </p>
+        </div>
+        <div>
+            <h2>2.Второй уровень</h2>
+            <p class="bear">
+                Если б мишки были пчёлами, <br>
+                То они бы нипочём <br>
+                Никогда и не подумали <br>
+                Так высоко строить дом. <br>
+            </p>
+        </div>
+        <div>
+            <h2>3.Третий уровень</h2>
+            <p class="article">
+                <img class="float__img--left"
+                    src="https://raw.githubusercontent.com/olgamaslovaolga/Alevel-Markup/master/images/hw-6.2.1.png"
+                    alt="">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet facilisis ligula, vel maximus
+                diam. Duis vestibulum varius lorem, sed sagittis ipsum ornare a. Nulla convallis eros at turpis tempor
+                viverra. Nunc quam mi, ultrices nec dolor sit amet, scelerisque consectetur orci. Mauris egestas nulla
+                sem, eu laoreet odio euismod id. Sed quis turpis eu metus congue tincidunt. Ut maximus, ligula in
+                pulvinar aliquam, tellus mauris cursus orci, ut aliquam leo mi et erat. Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit. Nullam ex urna, sodales ac orci at, rhoncus lobortis massa.
+
+                Integer euismod nisl urna, sed placerat tortor sollicitudin at. Vestibulum eu felis nulla. Vestibulum at
+                velit aliquet, tristique sem in, porta erat. Pellentesque aliquet massa sit amet nisl volutpat mattis.
+                Curabitur in vulputate neque. Donec tincidunt turpis vel porttitor blandit. Pellentesque cursus urna ut
+                neque scelerisque, euismod sagittis velit consequat. Sed varius tempus turpis eget finibus. Sed
+                vehicula, justo a lacinia pretium, erat ligula ultrices enim, id pellentesque ligula odio nec justo.
+                Praesent non est at magna viverra congue vel a odio. Proin molestie elementum posuere.
+
+                Suspendisse nisl lorem, mollis et est et, venenatis lobortis tortor. Sed quam turpis, gravida ut augue
+                non, faucibus feugiat dui. Quisque et consectetur velit. Sed egestas nunc sem, sit amet hendrerit tellus
+                facilisis eget. Praesent mauris sapien, rhoncus vel ipsum at, iaculis porta velit. Donec interdum libero
+                id consequat viverra. Maecenas et diam in dolor porttitor scelerisque at eu leo.
+
+                Aenean auctor velit sed sem bibendum, nec dignissim orci varius. Praesent rhoncus tempor quam, vitae
+                hendrerit lectus bibendum ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam molestie
+                <img class="float__img--right"
+                src="https://raw.githubusercontent.com/olgamaslovaolga/Alevel-Markup/master/images/hw-6.2.2.png"
+                alt="">
+                suscipit nulla, in finibus magna egestas interdum. Vivamus in dui in risus tincidunt congue. Nullam
+                scelerisque, augue at eleifend molestie, orci justo maximus nisi, bibendum hendrerit eros est eget ex.
+                Nunc a euismod risus. Curabitur dapibus dignissim elit eget mollis. Pellentesque ultrices eget arcu vel
+                semper. Maecenas ipsum metus, tincidunt eu dui ut, finibus luctus magna. Nam faucibus lacus quam, eu
+                efficitur nisl commodo vehicula. Nam vulputate, nunc eget mollis pellentesque, orci arcu auctor ante, ut
+                varius ex libero non orci. Quisque venenatis magna vel nunc finibus, sit amet porta metus mollis.
+
+                Phasellus eu urna et arcu faucibus cursus eu quis odio. Proin euismod id lorem eu egestas. Ut faucibus
+                erat vitae ultricies ultricies. Sed libero felis, lacinia vitae ante vitae, suscipit ultrices sapien.
+                Nullam cursus convallis sodales. Maecenas vehicula ac quam vitae egestas. Donec faucibus posuere ex,
+                ornare vehicula nisi molestie in. Vestibulum at lorem sed nisi semper placerat eu a ante.
+
+                Quisque bibendum, mi quis gravida maximus, arcu sem viverra velit, tempor mollis quam augue sit amet
+                orci. Mauris luctus aliquam lectus, sed sollicitudin nisl iaculis quis. Mauris tincidunt sem vel
+                fringilla feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+                mus. Fusce risus augue, tristique eu magna quis, scelerisque sollicitudin sem. Phasellus fermentum
+                faucibus orci accumsan rhoncus. Aenean id convallis metus. Donec efficitur, mauris vel cursus commodo,
+                lorem metus dapibus nisl, mattis consectetur tortor.
+            </p>
+        </div>
+    </main>
+    <footer></footer>
+</body>
+
+</html>

lesson3/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <header></header>
+    <main>
+        <div><span>
+            Если б мишки были пчёлами,
+            То они бы нипочём
+            Никогда и не подумали
+            Так высоко строить дом.
+        </span></div>  
+    </main>
+    <footer></footer>
+</body>
+</html>

lesson4/1/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HomeWork</title>
+    <link rel="icon" href="https://www.webfx.com/tools/emoji-cheat-sheet/graphics/emojis/house.png" sizes="32x32">
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <nav class="nav">
+        <button>
+            MENU HERE
+        </button>
+        <ul>
+            <li><a href="#">HOME</a></li>
+            <li><a href="#">CONTACTS</a></li>
+            <li><a href="#">OUR TEAM</a></li>
+            <li><a href="#">ABOUT</a></li>
+            <li><a href="#">NEWS</a></li>
+        </ul>
+    </nav>
+    <section>
+        <h2>1.Первый уровень(“карты”)</h2>
+        <div class="level1">
+            <blockquote>
+                <q>Судьба тасует карты, а мы ими играем.</q> <br>
+                <cite>Артур Шопенгауэр</cite>
+            </blockquote>
+            <div class="background">
+                <img class="img" src="./img/card01.png" alt="card">
+                <img class="img" src="./img/card01.png" alt="card">
+                <img class="img" src="./img/card01.png" alt="card">
+            </div>
+        </div>
+    </section>
+    <section>
+        <h2>2. Второй уровень(“усложняемся”)</h2>
+        <div class="holder">
+            <span class="pink"></span>
+            <span class="blue"></span>
+            <span class="green"></span>>
+        </div>
+    </section>
+    <!-- <section>
+        <h2>4.Кто совсем молодец ("по желанию")</h2>
+        <div>
+
+        </div>
+    </section> -->
+    <!-- <section>
+        <div style="position: relative;">
+            <span class="d19"></span>
+        </div>
+    </section> -->
+    <!-- <section>
+        <div class="block">
+            <span class="red-cube"></span>
+            <span class="blue-cube"></span>
+            <span class="green-cube"></span>
+            <span class="yellow-cube"></span>
+        </div>
+    </section> -->
+
+</body>
+
+</html>

lesson4/1/style.css

@@ -0,0 +1,177 @@
+*{
+    box-sizing :border-box;
+}
+.level1{ /*задаем фон*/
+    width: 638px;
+    height: 589px;
+    background: #0d5825;
+    position: relative;
+}
+blockquote {
+    font-size: 24px;
+    font-family: 'Times New Roman', Times, serif ;
+    font-weight: 700;
+    color: #ffffff;
+    padding-top: 30px;
+    text-align: center;
+}   
+img {
+    width: 150px;
+    position: absolute;
+    transform-origin: 0% 100%; /*задаем точку
+    смещения (left bottom)*/
+    transition: 1s ease; /*эффект при hover*/
+    }
+.img:first-child{
+    top: 288px;
+    left: 212px;
+    transform: rotate(-20deg);
+}
+.img:nth-child(2){
+    top: 288px;
+    left: 244px;
+    transform: rotate(-8deg);
+}
+.img:last-child{
+    top: 280px;
+    left: 265px;
+    transform: rotate(10deg);
+}
+.img:hover{
+    top: -10px;
+}
+.holder{
+    width: 150px;
+    height: 150px;
+    position: relative;
+}
+.pink, .blue, .green{
+    width: 60px;
+    height: 60px;
+    position: absolute;/*привязываем к родителю 
+    (в данном случае к родительскому классу holder*/
+}
+.pink{
+    top: 0;
+    left: 0;
+    background: pink;
+}
+.blue{
+    top: 40px;
+    left: 40px;
+    background: blue;
+    z-index: 2;
+}
+.green{
+    top: 80px;
+    left: 80px;
+    background: green;
+}
+.nav{
+    position: relative;
+    background: grey;
+    width: 200px;
+    height: 400px;
+    position: fixed;/*блок зафиксирован*/
+    left: -180px;/*смещение влево
+    так у нас блок заходит влево
+    и мы видим лишь 20px(NENU HERE)*/
+    z-index: 2000; /*поверх всех элементов!!!*/
+    transition: 0.5s ease;/*время выхода блока
+    до значения left: 0*/
+}
+.nav:hover {
+    left: 0;/*смещение влево до 0,
+    так у нас блок воходит полностью*/
+}
+button {
+    position: absolute;/*привязываемся к .nav*/
+    color:#fff;
+    background-color: grey;
+    border: none;
+    transform-origin: 0% 100%;/*задаем точку трансформации(поворота)*/
+    transform: rotate(90deg);/*поворот на 90град.*/
+    margin-top: 120px;/*задаем положение*/
+    margin-left: 179px;/*задаем положение*/
+    font-size: 16px;
+    line-height: 17px;
+    font-family: 'Times New Roman', Times, serif;
+}
+.nav:hover/*при навелдении мышью на .nav, button перестанет быть видимым*/
+button{
+    opacity:0;
+}
+li {
+    list-style: none;
+    line-height: 30px;
+}
+li::before{
+    content: "\2666 ";
+    font-size: 25px;
+    margin: 5px;
+    color: orange;
+
+}
+ /*.d19 {
+    width: 0; 
+    height: 0;
+    border: 40px solid transparent;
+    border-bottom-color: orange;
+    position: relative; 
+    top: -50px;
+}
+.d19:after {
+    content: "";
+    width: 0; 
+    height: 0;
+    position: absolute; 
+    left: -50px; 
+    top: 50px;
+    border: 40px solid transparent;
+    border-top-color: orange;
+} */
+/* }
+li:before {
+    background-image: url(./img/romb.jpg);
+    background-size: 20px 20px;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-color: orange;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    content:"";
+} */
+a {
+    color: #fff;
+    text-decoration: none; /*отключить стилди тега а,
+    задать новые стили */
+}
+a:hover {
+    color: orange;
+}
+/* .block{
+    position: relative;
+    width: 400px;
+    height: 400px;
+    border: 2px solid grey;
+}
+.red-cube, .blue-cube, 
+.green-cube, .yellow-cube {
+    width: 100px;
+    height: 100px;
+    position: absolute;
+}
+.red-cube{
+    color:red;
+}
+.blue-cube{
+    color:blue;
+} 
+.green-cube{
+    color:green;
+}
+.yellow-cube{
+    color: yellow;
+}
+@keyframes  */

lesson4/HW4_Romanenko/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HomeWork</title>
+    <link rel="icon" href="https://www.webfx.com/tools/emoji-cheat-sheet/graphics/emojis/house.png" sizes="32x32">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <nav class="nav">
+        <button>
+            MENU HERE
+        </button>
+        <ul>
+            <li><a href="#">HOME</a></li>
+            <li><a href="#">CONTACTS</a></li>
+            <li><a href="#">OUR TEAM</a></li>
+            <li><a href="#">ABOUT</a></li>
+            <li><a href="#">NEWS</a></li>
+        </ul>
+    </nav>
+    <section>
+        <h2>1.Первый уровень(“карты”)</h2>
+        <div class="level1">
+            <blockquote>
+                <q>Судьба тасует карты, а мы ими играем.</q> <br>
+                <cite>Артур Шопенгауэр</cite>
+            </blockquote>
+            <div class="background">
+                <img class="img" src="img/card01.png" alt="card">
+                <img class="img" src="img/card01.png" alt="card">
+                <img class="img" src="img/card01.png" alt="card">
+            </div>
+        </div>
+    </section>
+    <section>
+        <h2>2. Второй уровень(“усложняемся”)</h2>
+        <div class="holder">
+            <span class="pink"></span>
+            <span class="blue"></span>
+            <span class="green"></span>
+        </div>
+    </section>
+    <section>
+        <h2>4.Кто совсем молодец ("по желанию")</h2>
+        <div class="block">
+            <span class="cube"></span>
+        </div>
+    </section>
+   </body>
+</html>

lesson4/HW4_Romanenko/style.css

@@ -0,0 +1,168 @@
+*{
+    box-sizing :border-box;
+}
+.level1{ /*задаем фон*/
+    width: 638px;
+    height: 589px;
+    background: #0d5825;
+    position: relative;
+}
+blockquote {
+    font-size: 24px;
+    font-family: 'Times New Roman', Times, serif ;
+    font-weight: 700;
+    color: #ffffff;
+    padding-top: 30px;
+    text-align: center;
+}   
+img {
+    width: 150px;
+    position: absolute;
+    top: 288px;
+    transform-origin: 20px 225px; /*задаем точку
+    смещения (~left bottom)*/
+    transition: 0.2s linear; /*эффект при hover*/
+    }
+.img:first-child{
+    left: 212px;
+    transform: rotate(-20deg);
+}
+.img:nth-child(2){
+    left: 244px;
+    transform: rotate(-8deg);
+}
+.img:last-child{
+    left: 265px;
+    transform: rotate(10deg);
+}
+.img:hover{
+    top: 265px;
+}
+.holder{
+    width: 150px;
+    height: 150px;
+    position: relative;
+}
+.pink, .blue, .green{
+    width: 60px;
+    height: 60px;
+    position: absolute;/*привязываем к родителю 
+    (в данном случае к родительскому классу holder*/
+}
+.pink{
+    top: 0;
+    left: 0;
+    background: pink;
+}
+.blue{
+    top: 40px;
+    left: 40px;
+    background: blue;
+    z-index: 2;
+}
+.green{
+    top: 80px;
+    left: 80px;
+    background: green;
+}
+.nav{
+    position: relative;
+    background: grey;
+    width: 200px;
+    height: 400px;
+    position: fixed;/*блок зафиксирован*/
+    left: -180px;/*смещение влево
+    так у нас блок заходит влево
+    и мы видим лишь 20px(NENU HERE)*/
+    z-index: 2000; /*поверх всех элементов!!!*/
+    transition: 0.5s ease;/*время выхода блока
+    до значения left: 0*/
+}
+.nav:hover {
+    left: 0;/*смещение влево до 0,
+    так у нас блок воходит полностью*/
+}
+button {
+    position: absolute;/*привязываемся к .nav*/
+    color:#fff;
+    background-color: grey;
+    border: none;
+    transform-origin: 0% 100%;/*задаем точку трансформации(поворота)*/
+    transform: rotate(90deg);/*поворот на 90град.*/
+    margin-top: 120px;/*задаем положение*/
+    margin-left: 179px;/*задаем положение*/
+    font-size: 16px;
+    line-height: 17px;
+    font-family: 'Times New Roman', Times, serif;
+}
+.nav:hover/*при навелдении мышью на .nav, button перестанет быть видимым*/
+button{
+    opacity:0;
+}
+li {
+    list-style: none;
+    line-height: 30px;
+}
+li:before{
+    content:"";
+    width: 10px;
+    height: 10px;
+    border: 1px solid #000;
+    display: inline-block; /*т.к. нам нужно задать
+    высоту и ширину элемента(display: inline уже 
+    не подходит)+нам не нужен перенос на след. 
+    строку(display: block тоже нет), поэтому, мы здесь 
+    наш элемент должен распологаться как блочно-строчный */
+    background: orange; 
+    margin: 0 10px; /*отступы от начала строки*/
+    transform: rotate(45deg);
+
+}
+a {
+    color: #fff;
+    text-decoration: none; /*отключить стилди тега а,
+    задать новые стили */
+}
+a:hover {
+    color: orange;
+}
+.block{
+    position: relative;
+    width: 300px;
+    height: 300px;
+    border: 2px solid grey;
+}
+.cube{
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background: red;
+    animation: move 4s infinite;
+    transition-delay: 0.2s;
+    /*так как по умолчанию transform-origin: center;
+    и стоит зависимость position: relative/absolute
+    то дочерний .cube перемещаеться в рамках родителя 
+    .block,  я правильно мыслю?*/
+}
+@keyframes move {
+   0%{
+    transform: translateX( 0px);
+    background: red;
+   }
+   25%{
+    transform: translateY( 200px);
+    background: blue;
+   }
+   50%{
+    transform: translateY( 200px) translateX( 200px);
+    background: green;
+   }
+   75%{ 
+    transform: translateX( 200px);
+    background: yellow;
+   } 
+   100%{
+    transform: translateX( 0px);
+    background: red;
+   }
+}

lesson4/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./style.css">
+</head >
+<body>
+
+    <!-- <div class="holder">
+        Без позиционирования ("position: static").
+    
+        <h2>Заголовок</h2>
+    
+        <div>А тут - всякий разный текст... <br/>
+             ... В две строки!</div>
+    </div> -->
+    <!-- <div class="holder">
+        Заголовок сдвинут на 10px вниз.
+
+        <h2>Заголовок</h2>
+
+        <div>А тут - всякий разный текст... <br/>
+         ... В две строки!</div>
+    </div> -->
+    <!-- <div class="holder">
+        Заголовок в правом-верхнем углу документа.
+        
+        <h2>Заголовок</h2>
+
+        <div>А тут - всякий разный текст... <br/>
+         ... В две строки!</div>
+    </div> -->
+    <!-- <div class="parent">
+        Заголовок в правом-верхнем углу DIV'а.
+        <h2 style="">Заголовок</h2>
+        <div>А тут - всякий разный текст... <br/>
+             ... В две строки!</div>
+    </div> -->
+
+    <!-- <div style="background:#aef;text-align:center">10px от границ</div> -->
+
+    <!-- <div class="holder">
+        <a href="#" id="top">Наверх (остаётся при прокрутке)</a>
+        
+        Фиксированное позиционирование.
+        
+        <p>Текст страницы.. Прокрути меня...</p>
+        <p>Много строк..</p><p>Много строк..</p>
+        <p>Много строк..</p><p>Много строк..</p>
+        <p>Много строк..</p><p>Много строк..</p>
+        <p>Много строк..</p><p>Много строк..</p>
+        <p>Много строк..</p><p>Много строк..</p>
+        <p>Много строк..</p><p>Много строк..</p>
+        <p>Много строк..</p><p>Много строк..</p>
+        <p>Много строк..</p><p>Много строк..</p>
+        <p>Много строк..</p><p>Много строк..</p>
+        <p>Много строк..</p><p>Много строк..</p>
+        <p>Много строк..</p><p>Много строк..</p>
+        <p>Много строк..</p><p>Много строк..</p>
+       </div> -->
+
+       <div style="background: #fee; width: 500px">
+        <h2 style="background: #aef; margin: 0;">Заголовок сдвинут на 10% влево.</h2>
+    </div>
+
+</body>
+</html>
+
+

lesson4/style.css

@@ -0,0 +1,59 @@
+/* 
+.holder {
+    background: #fee;
+    width: 500px;
+}
+h2 {
+    position: relative;
+    left: -10%;
+    background: #aef;
+    margin: 0;
+} */
+/* .holder {
+    background: #fee; 
+    width: 500px
+}
+h2 {
+    position: relative;
+    top: 10px;
+    background: #aef;
+    margin: 0;
+} */
+/* .holder {
+    background: #fee;
+    width: 500px
+}
+h2 {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: #aef;
+    margin: 0;
+} */
+/* h2 {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: #aef;
+    margin: 0;
+}
+
+.parent {
+    background: #fee;
+    width: 500px; 
+    position: relative;
+} */
+/* div {
+    position: absolute;
+    left: 10px; right: 10px; top: 10px; bottom: 10px;
+} */
+/* #top {
+    position: fixed;
+    right: 10px;
+    top: 10px;
+    background: #fee;
+  } */
+  h2 {
+    position: relative;
+    left: -10%;
+  }

lesson5/HW5_Romanenko/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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;
+}

lesson5/HW5_Romanenko/css/style.css

@@ -0,0 +1,240 @@
+
+*, :before, :after{
+    box-sizing: border-box;
+} 
+body{
+    margin: 0;/*обнуляем отступы*/
+    /* background: black; */
+}
+img {
+    max-width: 100%;/*картинка не  может быть больше 
+    чем ее родитель*/
+    height: auto;
+}
+strong {
+    font-weight: bold;
+}
+h2 {
+    display: block;
+    margin: 20px 0;
+    font-size: 24px;
+    /* margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px; */
+    font-weight: bold;
+    /* text-transform: uppercase; */
+    text-align: center;
+}
+h3 {
+    display: block;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+}
+.wrapper{ /*класс для того, что бы
+    центральная часть занимала всю высоту страницы
+    кроме header и footer,и footer был бы снизу зафиксирован*/
+    display: flex;/*элементы принимают
+    значение flex элементов, и выстраиваются вряд
+    (положение элементов row по умолчанию)*/
+    flex-direction: column;  /*меняем положение элементов 
+    с row по умолчанию на colum, элементы выстраиваются
+    в столбец*/
+    min-height: 100vh;/*vieport height 
+    размер  .wrapper = размеру экрана(страницы)*/
+    /*max-width: auto;*/ /*максю ширина хэдэра*/
+    margin: 0 auto; /*центрируем*/
+    width: 100%;/*возвращаем ширину после применения 
+    display: flex к .wrapper(родительскому контейнеру)*/
+}
+.header{
+    display: flex; /*ставит элементы вряд*/
+    justify-content: space-between; /*раскидывает по краям*/
+    background: rgba(248, 224, 4, 0.856);
+    align-items: center; /*выравниваем элементы по центру*/
+    padding: 15px 15px; /*для того что бы элементы
+    не прилипали к роодителю*/
+} 
+.logo{
+    width: 150px;/*задаем ширину родителя*/
+    /* color: rgba(248, 224, 4, 0.856); */
+    /* background: red;*/
+}
+.menu-nav{
+    flex-grow: 1; /*если добавятся пункты меню, 
+    что бы список равномерно заполнял пространство
+    .menu-nav(он будет занимать все свободное
+    пространство)*/
+}
+.menu-nav ul {
+    display: flex;/*выравнивает вряд элементы списка*/
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    /*обнуляем внешние и внутренние отступы у списка
+    теперь список четко фиксируется по контенту*/
+    justify-content: flex-end;/*привязываем 
+    список к правой стороне*/
+}
+.menu-nav li {
+    margin-left: 15px;/*делвет отступы между
+    элементами списка по 15px, что бы не было лишнего
+    отступа справа(элементы идут с права на лево)*/
+}
+.menu-nav a {
+    text-decoration: none;
+    color: #000;
+}
+.menu-nav a:hover{
+    color: rgb(13, 13, 243);
+    text-decoration: underline;
+}
+main{
+    display: flex;
+    flex-grow: 1;    /*занимает всю высоту родителя(.wrapper)
+    кроме header и footer */
+}
+.aside1, .aside2{
+    min-width: 210px;/*когда работаем с flex-элементами
+    то всегда используем min- max- приставки для изменения
+    ширины/высоты контейнера*/
+    text-align: center;
+    padding-top: 10px;
+    font-weight: bold;
+}
+.aside1 { 
+    background: #f39ef3;
+    order: 1; /*порядок с права на лево-1 */
+
+}
+.aside2 { 
+    background: #9eb5f3;
+    order: 3; /*порядок с права на лево-3 */
+}
+.content{
+    background: #ffffff;
+    padding: 20px 25px;
+    order: 2; /*порядок с права на лево-2(по середине) */
+}
+
+.footer{
+    text-align: center;
+    background: rgb(77, 218, 77);
+    padding: 5px;
+}
+
+.cards{
+    display:flex;
+    min-width: 100vh;
+    flex-wrap:wrap;
+    margin: 5px;
+    /* align-items: center; */
+    /* justify-content: space-around; */
+    
+}
+.card-item{
+    display: flex;
+    flex-direction: column;
+    /* width: 280px; */
+    width: calc((100% / 3) - 2%);
+    border: 1px solid rgb(122, 106, 106);
+    align-items: center;
+    border-radius: 10%;
+    padding: 15px;
+    /* margin: 5px; */
+    margin: 1%;
+}
+.card-item:hover{
+    transform: scale(1.08);
+    transition: 0.5s linear;
+    /*transform-origin:50% 100%; */
+    cursor: pointer;
+    box-shadow: inset 4px 4px 10px 4px rgba(154, 147, 140, 0.5);
+    
+}
+.text{
+    display: block;
+    font-size: 16px;
+    text-align: justify;
+    flex-grow: 1;
+    margin-bottom: 10px;
+}
+
+.card-img{
+    width: 140px;
+    height: 140px;
+    border-radius: 50%;
+    border: 15px solid rgb(187, 179, 179);
+    margin-bottom: 10px;
+}
+/* img {
+    width: 50px;
+    border-radius: 50%;
+    border: 15px solid rgb(187, 179, 179);
+} */
+.card-item a{
+    text-decoration: none;
+    /* height: 30px; */
+    width: 50px;
+    border-radius: 50px;
+    background:grey;
+    text-align: center;
+    padding: 5px;
+}
+.card-item a:hover {
+    background: rgb(180, 177, 177);
+    /* transition-delay: 0.5s ease; */
+}
+.holder{
+    display: flex;  /*подключаем flex-контейнер*/
+    height: 100px;
+    width: 300px;
+    font-size: 24px;
+    border: 2px solid black;
+    border-radius: 25px 25px 0 0;
+    /*правый и левый верхние углы по 25px*/
+    margin: 0 auto;/*центрирование*/
+    flex-wrap: wrap;/*переполнение*/
+    overflow: hidden;/*все что выходит 
+    за рамку,--скрываем*/
+}
+.item {
+    display:flex;
+    height: 50px;
+    justify-content: center;
+    align-items: center; 
+    /* align-content: center; */
+
+}
+.item:nth-child(1){
+    background: pink;
+    order:1;
+    flex-grow:1;
+    flex-basis: 50%;
+}
+.item:nth-child(2){
+    background: blue;
+    order: 4;
+    flex-grow:1;
+    flex-basis: 33.33%;
+}
+.item:nth-child(3){
+    background: purple;
+    order: 3;
+    flex-grow:1;
+    flex-basis: 33.33%;
+}
+.item:nth-child(4){
+    background: green;
+    order: 5;
+    flex-grow:1;
+    flex-basis: 33.33%;
+}
+.item:nth-child(5){
+    background: orange;
+    order:2;
+    flex-grow:1;
+    flex-basis: 50%;
+}

lesson5/HW5_Romanenko/index.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="zxx">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HomeWork</title>
+    <link rel="icon" href="https://www.webfx.com/tools/emoji-cheat-sheet/graphics/emojis/house.png" sizes="32x32">
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header class="header">
+            <div class="logo">
+                <a href="https://a-level.com.ua/" target="_blank">
+                    <img src="img/level-logo.png" alt="logo">
+                </a>
+            </div>
+            <nav class="menu-nav">
+                <ul>
+                    <li><a href="#">Item 1</a></li>
+                    <li><a href="#">Item 2</a></li>
+                    <li><a href="#">Item 3</a></li>
+                    <li><a href="#">Item 4</a></li>
+                    <li><a href="#">Item 5</a></li>
+                </ul>
+            </nav>
+        </header>
+        <main class="main">
+            <div class="content">
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem quaerat enim accusantium
+                        eum
+                        tempora, facere ullam numquam voluptatem error, deserunt provident aspernatur. Nihil doloribus
+                        ipsam
+                        quidem
+                        illum unde corporis nam.
+                        Corporis, vero exercitationem itaque nisi cum deserunt. Odit omnis tenetur excepturi voluptatem
+                        ipsa
+                        hic.
+                        Repudiandae, tenetur vero? Ipsa est ipsam odit soluta? Tempora sed sit, quod provident natus
+                        minus
+                        blanditiis.
+                        Maiores voluptatum, fuga impedit eveniet, tempore rem hic atque temporibus repudiandae corporis
+                        fugiat
+                        incidunt. Culpa animi cupiditate minima esse, quisquam nemo! Obcaecati optio culpa iure, dolores
+                        nisi harum
+                        dicta saepe.</p>
+                <section>
+                    <h2>OUR WORK</h2>
+                    <div class="cards">
+                        <div class="card-item">
+                            <img class="card-img" src="img/cat.jpg" alt="cat">
+                            <div class="text">
+                                <h2>Lorem ipsum dolor sit amet</h2>
+                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore explicabo ab in
+                                    iusto ex
+                                    ipsa ad a, officia eligendi, qui pariatur, libero enim sequi. Repellendus veritatis
+                                    quaerat
+                                    itaque veniam ut?</p>
+                            </div>
+                            <a href="#">Go</a>
+                        </div>
+                        <div class="card-item">
+                            <img class="card-img" src="img/cat.jpg" alt="cat">
+                            <div class="text">
+                                <h3>Lorem ipsum dolor sit amet</h3>
+                                <p>Lorem, ipsum dolor sit amet.</p>
+                            </div>
+                            <a href="#">Go</a>
+                        </div>
+                        <div class="card-item">
+                            <img class="card-img" src="img/cat.jpg" alt="cat">
+                            <div class="text">
+                                <h3>Lorem ipsum dolor sit amet</h3>
+                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore explicabo ab in
+                                    iusto ex
+                                    ipsa ad a, officia eligendi, qui pariatur, libero enim sequi.</p>
+                            </div>
+                            <a href="#">Go</a>
+                        </div>
+                        <div class="card-item">
+                            <img class="card-img" src="img/cat.jpg" alt="cat">
+                            <div class="text">
+                                <h3>Lorem ipsum dolor sit amet</h3>
+                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, provident!</p>
+                            </div>
+                            <a href="#">Go</a>
+                        </div>
+                        <div class="card-item">
+                            <img class="card-img" src="img/cat.jpg" alt="cat">
+                            <div class="text">
+                                <h3>Lorem ipsum dolor sit amet</h3>
+                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus veritatis
+                                    quaerat
+                                    itaque veniam ut?</p>
+                            </div>
+                            <a href="#">Go</a>
+                        </div>
+                        <div class="card-item">
+                            <img class="card-img" src="img/cat.jpg" alt="cat">
+                            <div class="text">
+                                <h3>Lorem ipsum dolor sit amet</h3>
+                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore explicabo ab in
+                                    iusto ex
+                                    ipsa ad a, officia eligendi, qui pariatur, libero enim sequi. Repellendus veritatis
+                                    quaerat
+                                    itaque veniam ut? </p>
+                            </div>
+                            <a href="#">Go</a>
+                        </div>
+                    </div>
+                </section>
+                <section>
+                <h2>3.Третий уровень("только флекс")</h2>
+                <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>
+        </div>
+            <aside class="aside1">Aside1</aside>
+            <aside class="aside2">Aside2</aside>
+        </main>
+        <footer class="footer">Footer</footer>
+    </div>
+</body>
+
+</html>

lesson5/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <div class="flex-container">
+        <div class="flex-item">1</div>
+        <div class="flex-item">2</div>
+        <div class="flex-item">3</div>
+    </div>
+</body>
+</html>

lesson5/style.css

@@ -0,0 +1,15 @@
+*{
+    box-sizing: border-box;
+}
+.flex-item{
+    width: 150px;
+    height: 150px;
+    background: hsl(0, 0%, 80%);
+    border: 1px solid red;
+    font-size: 30px;
+}
+.flex-container{
+    background: yellow;
+    /* display: flex; */
+    display: inline-flex;
+}