push all

HTML, CSS practice/html, css lending page/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

HTML, CSS practice/html, css lending page/css/style.css

@@ -0,0 +1,799 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #727272;
+    margin: 0;
+}
+
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+.wrapper {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: top;
+}
+
+p {
+    margin-bottom: 20px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 0;
+    color: #000;
+    line-height: 1.15;
+    font-weight: 500;
+}
+
+h1 {
+    font-size: 48px;
+}
+
+h2 {
+    font-size: 32px;
+}
+
+.btn {
+    display: inline-block;
+    border: 1px solid #34547A;
+    background: #34547A;
+    color: #fff;
+    text-transform: uppercase;
+    padding: 23px 50px;
+    line-height: 1;
+    text-decoration: none;
+}
+
+.btn:hover {
+    transition: opacity .3s ease-in;
+    opacity: .7;
+}
+
+.header {
+    padding: 0;
+    background: #EEEFF1;
+    position: relative;
+}
+.container {
+    max-width: 1180px;
+    padding: 0 15px;
+    margin: 0 auto;
+}
+
+.flex_box {
+    display: flex;
+    order: 2;
+}
+
+.header_wrap {
+    display: flex;
+    align-items: center;
+    margin: 0 25px 0 15px;
+}
+
+
+
+.burger-checkbox {
+    opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    left: -9999999px;
+}
+
+.burger {
+    position: relative;
+    width: 26px;
+    height: 18px;
+}
+
+.burger:before,
+.burger span,
+.burger:after {
+    position: absolute;
+    right: 0;
+    left: 0;
+    background: #000;
+    height: 2px;
+}
+
+.burger:before {
+    content: '';
+    top: 0;
+}
+
+.burger span {
+    top: 8px;
+}
+
+.burger:after {
+    content: '';
+    bottom: 0;
+}
+
+.burger-checkbox:checked + .burger span {
+    opacity: 0;
+}
+
+.burger-checkbox:checked + .burger:before {
+    transition: transform .3s ease-in;
+    transform: rotate(45deg);
+    top: 8px;
+} 
+
+.burger-checkbox:checked + .burger:after {
+    transition: transform .3s ease-in;
+    transform: rotate(-45deg);
+    bottom: 8px;
+}
+
+.header-flex {
+    display: flex;
+    justify-content: space-between;
+}
+
+.nav {
+   
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-left: 15px;
+}
+
+.header-block {
+    padding: 15px 0 0 0;
+}
+
+.img {
+    padding: 15px;
+}
+
+
+.burger-checkbox:checked ~ .header-list {
+    transition: opacity .3s ease-in;
+    opacity: 1;
+    visibility: visible;
+}
+
+.header-list {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    left: 0;
+    text-align: center;
+    background: #EEEFF1;
+    opacity: 0;
+    visibility: hidden;
+    list-style-type: none;
+    padding: 0 20px 0 0;
+    border: 2px solid #cbcbcb;
+}
+
+.header-item {
+    padding: 10px 0 10px 25px;
+}
+
+
+
+.header-item a {
+    color: black;
+    text-decoration: none;
+}
+
+.header-item a:hover {
+    opacity: 0.3;
+}
+
+.about-me {
+    max-width: 100%;
+    text-align: center;
+}
+
+.about-me-h2 h2 {
+    margin-bottom: 0;
+}
+
+.about-me-h2 {
+    margin-top: 30px;
+}
+
+.about-me-lorem {
+    display: inline-block;
+    max-width: 80%;
+    margin: 30px 0 30px 0;
+}
+
+.about-me-lorem p {
+    margin: 0;
+}
+
+.many-projects {
+    width: 100%;
+    background: #34547A;
+}
+
+.project {
+    display: flex;
+}
+
+.project-container {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    padding: 100px 0;
+    margin: 0 -7px;
+}
+
+.ptoject-text p,
+.ptoject-text h3 {
+    color: white;
+}
+
+.ptoject-text p {
+    margin: 10px 0 0 0;
+}
+
+.ptoject-text h3 {
+    margin: 0;
+    width: calc(100% - 70px);
+}
+
+.project-img {
+    margin-right: 20px;
+}
+
+.section-banner {
+    background: #EEEFF1;
+    padding: 50px 0 50px;
+}
+
+.banner-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 -65px;
+}
+
+.col--description {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.col {
+    padding: 0 65px;
+    width: 80%;
+}
+
+.col--img {
+    display: flex;
+    justify-content: center;
+}
+
+
+
+.title {
+    margin-bottom: 30px;
+}
+
+.section-banner .holder {
+    padding-bottom: 40px;
+}
+
+.img-compuhter {
+    margin-bottom: 30px;
+}
+
+.holder,
+.title {
+    text-align: center;
+}
+
+.section-skill {
+    padding: 40px 0;
+}
+
+.skill-row {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+}
+
+.skill-col {
+    width: 90%;
+}
+
+.skill-descr {
+    padding-right: 20px;
+}
+
+.skill-img {
+    margin: 0 0 20px 0;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    padding-top: 34.6%;
+}
+
+.skill-descr .title {
+    margin-bottom: 50px;
+}
+
+.skill-box {
+    max-width: 445px;
+}
+
+.skill-this {
+    margin-bottom: 30px;
+}
+
+.skill-label {
+    display: block;
+    margin-bottom: 20px;
+}
+
+.skill-loader {
+    background: #C4C4C4;
+    height: 4px;
+    position: relative;
+}
+
+.skill-load {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    background: #34547A;
+}
+
+.deceptive-video {
+    width: 100%;
+    background: #EEEFF1;
+}
+
+.video-block {
+    text-align: center;
+    padding: 40px 0 40px 0;
+}
+
+.play-button {
+    color: #000;
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    z-index: 1;
+    width: 9%;
+}
+
+.lorem-p {
+    margin: 50px 0 57px 0;
+}
+
+.buttom-center {
+    position: relative;
+   
+}
+
+.buttom-center .fake-video {
+    width: 100%;
+    height: auto;
+}
+
+.buttom-center .play-button {
+    position: absolute;
+    top: 42%;
+    left: 45%;
+}  
+
+.video-block h2 {
+    margin: 0;
+}
+
+/* gellary */
+
+.section-gellary .row {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.section-gellary .col {
+    width: 50%;
+    padding-top: 50%;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+}
+
+.section-gellary .col:hover::before,
+.section-gellary .col:hover::after {
+    transition: opacity .3s ease-in;
+    opacity: 1;
+    visibility: visible;
+}
+
+.section-gellary .col::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(52, 84, 122, .8);
+    opacity: 0;
+    visibility: hidden;
+}
+
+.section-gellary .col::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: url(../img/Group.svg) no-repeat;
+    background-size: cover;
+    background-position: center;
+    width: 100px;
+    height: 58px;
+    opacity: 0;
+    visibility: hidden;
+}
+
+.col {
+    order: 0;
+}
+
+.col-order1 {
+    order: 1;
+}
+
+.col-order2 {
+    order: 2;
+}
+
+.col-order3 {
+    order: 3;
+}
+
+.col-order4 {
+    order: 4;
+}
+
+.form-section {
+    width: 100%;
+    background: #EEEFF1;
+}
+
+.input-block {
+    text-align: center;
+    padding: 40px 0 40px 0;
+}
+
+.input-block p {
+    margin: 30px 0 35px 0;
+}
+
+.about-me-lorem-p {
+    display: inline-block;
+    max-width: 80%;
+    margin: 30px 0 30px 0;
+}
+
+.form-block-name-email {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+.input-name,
+.input-email {
+    width: 70%;
+    padding-left: 20px;
+    height: 50px;
+    margin-bottom: 20px;
+    border: none;
+    
+}
+
+.microsoft-flex-block {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    padding: 40px 0 50px 0;
+}
+
+.message-form {
+    padding: 17px 0 0 20px;
+    width: 70%; 
+    height: 125px;
+    resize: none;
+    margin-bottom: 50px;
+    border: none;
+}
+
+.col-microsoft {
+    width: 25%;
+}
+
+.footer {
+    width: 100%;
+    background: #34547A;
+}
+
+.footer-block {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px 0 42px 0;
+}
+
+.info {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.info h3,
+.info p {
+    color: white;
+    margin: 0;
+    padding: 0;
+}
+
+.info p {
+    margin: 0 0 25px 0;
+}
+
+.vk-img a img {
+    margin-left: 22px;
+}
+
+.info h3 {
+    margin: 20px 0 20px 0;
+}
+
+@media (min-width: 556px) and (max-width: 767px) {
+
+    .many-projects {
+        padding: 0 60px;
+    }
+}
+
+@media (min-width: 795px) and (max-width: 1049px) {
+    .microsoft-flex-block {
+        padding: 40px 100px 50px 100px;
+    }
+}
+
+@media (max-width: 575px)  {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-size: 24px;
+    }
+
+    p {
+        font-size: 14px;
+    }
+
+    .img-compuhter {
+        max-width: 70%;
+    }
+}
+
+@media (min-width: 576px) {
+    .project-img img {
+        margin: 0 0 0 15px;
+    }
+
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+    .project-container {
+        flex-wrap: nowrap;
+    }
+    
+}
+
+@media (min-width: 768px) {
+
+    .form-block-name-email {
+        display: block;
+    }
+
+    .input-name,
+    .input-email {
+        width: 22.2%;
+        padding-left: 20px;
+        height: 50px;
+    }
+    
+    .input-email {
+        margin: 0 0 20px 20px;
+    }
+
+    .message-form {
+        padding: 17px 0 0 20px;
+        width: 46.4%; 
+        height: 175px;
+        resize: none;
+        margin-bottom: 50px;
+    }
+}
+
+@media (min-width: 992px) {
+
+}
+
+@media (min-width: 1024px) {
+
+    .about-me-lorem {
+        max-width: 270px;
+    }
+
+    .col-order1,
+    .col-order2,
+    .col-order3,
+    .col-order4 {
+        order: 0;
+    }
+
+    .section-gellary .col {
+        width: 25%;
+        padding-top: 25%;
+    }
+
+    .skill-col {
+        width: 50%;
+    }
+
+    .col {
+        width: 50%;
+    }
+    
+
+    .img-compuhter {
+        margin-bottom: 0px;
+    }
+
+    .col--description {
+        display: block;
+    }
+
+    .holder,
+    .title {
+        text-align: left;
+    }
+
+    .title {
+        margin-bottom: 60px;
+    }
+
+    .banner-wrap {
+        flex-direction: row;
+    }
+
+    .skill-row {
+        flex-direction: row;
+    }
+
+    .skill-img {
+        margin: 0;
+    }
+
+    .input-block p {
+        margin: 50px 0 65px 0;
+    }
+
+    .about-me-lorem-p {
+        display: inline-block;
+        max-width: 44.8%;
+        margin: 50px 0 100px 0;
+    }
+
+    .about-me-h2 {
+        margin-top: 119px;
+    }
+    
+    .about-me-lorem {
+        max-width: 545px;
+        margin: 50px 0 100px 0;
+    }
+
+    .project {
+        display: flex;
+        width: 16.666%;
+        padding: 0 7px 14px;
+    }
+
+    .section-skill {
+        padding: 100px 0;
+    }
+
+    .video-block {
+        padding: 100px 0 100px 0;
+    }
+
+    .input-block {
+        padding: 100px 0 100px 0;
+    }
+
+    .microsoft-flex-block {
+        padding: 72px 0 100px 0;
+    }
+
+    .section-banner {
+        background: #EEEFF1;
+        padding: 150px 0 146px;
+    }
+
+    .header-block {
+        padding: 57px 0 0 0;
+    }
+
+    .burger {
+        display: none;
+    }
+    
+    .header-list {
+        position: static;
+        display: flex;
+        align-items: center;
+        opacity: 1;
+        visibility: visible;
+        border: 0;
+    }
+
+    .item a {
+        padding-bottom: 0px;
+        margin-bottom: 0px;
+    }
+
+    .header-item + .header-item {
+        padding-left: 42px;
+    }
+
+    .footer-block {
+        display: flex;
+        justify-content: space-between;
+        flex-direction: row;
+        align-items: center;
+        padding: 42px 0 42px 0;
+    }
+    
+    .info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    
+    .info p {
+        margin: 0;
+    }
+    
+    
+}

HTML, CSS practice/html, css lending page/img/Group.svg

@@ -0,0 +1,5 @@
+<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
+<path d="M48.2635 15.436C41.7432 15.436 36.4392 20.7401 36.4392 27.2604C36.4392 28.1928 37.1959 28.9496 38.1284 28.9496C39.0608 28.9496 39.8176 28.1928 39.8176 27.2604C39.8176 22.6033 43.6064 18.8144 48.2635 18.8144C49.1959 18.8144 49.9527 18.0577 49.9527 17.1252C49.9527 16.1928 49.1976 15.436 48.2635 15.436Z" fill="white"/>
+<path d="M49.9527 6.98999C37.8446 6.98999 27.9932 16.8413 27.9932 28.9494C27.9932 41.0576 37.8446 50.9089 49.9527 50.9089C62.0608 50.9089 71.9121 41.0576 71.9121 28.9494C71.9121 16.8413 62.0625 6.98999 49.9527 6.98999ZM49.9527 47.5305C39.7078 47.5305 31.3716 39.1944 31.3716 28.9494C31.3716 18.7045 39.7078 10.3684 49.9527 10.3684C60.1976 10.3684 68.5338 18.7045 68.5338 28.9494C68.5338 39.1944 60.1993 47.5305 49.9527 47.5305Z" fill="white"/>
+</svg>

HTML, CSS practice/html, css lending page/img/oko.svg

@@ -0,0 +1,5 @@
+<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
+<path d="M48.2635 15.436C41.7432 15.436 36.4392 20.7401 36.4392 27.2604C36.4392 28.1928 37.1959 28.9496 38.1284 28.9496C39.0608 28.9496 39.8176 28.1928 39.8176 27.2604C39.8176 22.6033 43.6064 18.8144 48.2635 18.8144C49.1959 18.8144 49.9527 18.0577 49.9527 17.1252C49.9527 16.1928 49.1976 15.436 48.2635 15.436Z" fill="white"/>
+<path d="M49.9527 6.98999C37.8446 6.98999 27.9932 16.8413 27.9932 28.9494C27.9932 41.0576 37.8446 50.9089 49.9527 50.9089C62.0608 50.9089 71.9121 41.0576 71.9121 28.9494C71.9121 16.8413 62.0625 6.98999 49.9527 6.98999ZM49.9527 47.5305C39.7078 47.5305 31.3716 39.1944 31.3716 28.9494C31.3716 18.7045 39.7078 10.3684 49.9527 10.3684C60.1976 10.3684 68.5338 18.7045 68.5338 28.9494C68.5338 39.1944 60.1993 47.5305 49.9527 47.5305Z" fill="white"/>
+</svg>

HTML, CSS practice/html, css lending page/index.html

@@ -0,0 +1,419 @@
+<!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>
+        <link rel="stylesheet" href="css/style.css" />
+        <link rel="shortcut icon" href="img/WDicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
+            rel="stylesheet"/>
+    </head>
+    
+    <body>
+        <div class="wrapper">
+            <header class="header">
+                <div class="container header-container">
+                    <div class="header-block">
+                        <div class="header-flex">
+                            <div class="img-block">
+                                <a href="#"
+                                    ><img
+                                        src="img/WD.svg"
+                                        class="wd-logo"
+                                        alt="WD logo"
+                                /></a>
+                            </div>
+                            <div class="nav">
+                                <input
+                                    type="checkbox"
+                                    id="burger"
+                                    class="burger-checkbox"
+                                />
+                                <label for="burger" class="burger">
+                                    <span></span>
+                                </label>
+                                <ul class="header-list">
+                                    <li class="header-item">
+                                        <a href="#">ГЛАВНАЯ</a>
+                                    </li>
+                                    <li class="header-item">
+                                        <a href="#">ОБ АВТОРЕ</a>
+                                    </li>
+                                    <li class="header-item">
+                                        <a href="#">РАБОТЫ</a>
+                                    </li>
+                                    <li class="header-item">
+                                        <a href="#">ПРОЦЕСС</a>
+                                    </li>
+                                    <li class="header-item">
+                                        <a href="#">КОНТАКТЫ</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+            <main class="main">
+                <section class="section-banner">
+                    <div class="container">
+                        <div class="banner-wrap">
+                            <div class="col col--img">
+                                <img
+                                    src="./img/img-01.png"
+                                    class="img-compuhter"
+                                    alt="image description"
+                                />
+                            </div>
+                            <div class="col col--description">
+                                <header class="section-header">
+                                    <h1 class="title">Дизайн и верстка</h1>
+                                </header>
+                                <div class="holder">
+                                    <p>
+                                        Lorem Ipsum - это текст-"рыба", часто
+                                        используемый в печати и вэб-дизайне.
+                                        Lorem Ipsum является стандартной "рыбой"
+                                        для текстов на латинице с начала XVI
+                                        века.
+                                    </p>
+                                </div>
+                                <a href="#" class="btn">НАПИСАТЬ МНЕ</a>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="about-me">
+                    <div class="container">
+                        <div class="about-me-h2">
+                            <h2>Обо мне</h2>
+                        </div>
+                        <div class="about-me-lorem">
+                            <p>
+                                Lorem Ipsum - это текст-"рыба", часто используемый в
+                                печати и вэб-дизайне. Lorem Ipsum является
+                                стандартной "рыбой" для текстов на латинице с начала
+                                XVI века.
+                            </p>
+                        </div>
+                    </div>
+                    
+                </section>
+
+                <section class="many-projects">
+                    <div class="container">
+                        <div class="project-container">
+                            <div class="project">
+                                <div class="project-img">
+                                    <img
+                                        src="img/project.svg"
+                                        alt="Pencil, triangle and piece of paper"
+                                    />
+                                </div>
+                                <div class="ptoject-text">
+                                    <h3>40+</h3>
+                                    <p>проектов</p>
+                                </div>
+                            </div>
+                            <div class="project">
+                                <div class="project-img">
+                                    <img
+                                        src="img/project.svg"
+                                        alt="Pencil, triangle and piece of paper"
+                                    />
+                                </div>
+                                <div class="ptoject-text">
+                                    <h3>40+</h3>
+                                    <p>проектов</p>
+                                </div>
+                            </div>
+                            <div class="project">
+                                <div class="project-img">
+                                    <img
+                                        src="img/project.svg"
+                                        alt="Pencil, triangle and piece of paper"
+                                    />
+                                </div>
+                                <div class="ptoject-text">
+                                    <h3>40+</h3>
+                                    <p>проектов</p>
+                                </div>
+                            </div>
+                            <div class="project">
+                                <div class="project-img">
+                                    <img
+                                        src="img/project.svg"
+                                        alt="Pencil, triangle and piece of paper"
+                                    />
+                                </div>
+                                <div class="ptoject-text">
+                                    <h3>40+</h3>
+                                    <p>проектов</p>
+                                </div>
+                            </div>
+                            <div class="project">
+                                <div class="project-img">
+                                    <img
+                                        src="img/project.svg"
+                                        alt="Pencil, triangle and piece of paper"
+                                    />
+                                </div>
+                                <div class="ptoject-text">
+                                    <h3>40+</h3>
+                                    <p>проектов</p>
+                                </div>
+                            </div>
+                            <div class="project">
+                                <div class="project-img">
+                                    <img
+                                        src="img/project.svg"
+                                        alt="Pencil, triangle and piece of paper"
+                                    />
+                                </div>
+                                <div class="ptoject-text">
+                                    <h3>40+</h3>
+                                    <p>проектов</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="section-skill">
+                    <div class="container">
+                        <div class="skill-row">
+                            <div class="skill-col skill-descr">
+                                <header class="section-header">
+                                    <h2 class="title">Мои навыки</h2>
+                                </header>
+                                <div class="skill-box">
+                                    <div class="skill-this">
+                                        <span class="skill-label"
+                                            >Adobe Photoshop</span
+                                        >
+                                        <div class="skill-loader">
+                                            <div
+                                                class="skill-load"
+                                                style="width: 75%"
+                                            ></div>
+                                        </div>
+                                    </div>
+                                    <div class="skill-this">
+                                        <span class="skill-label"
+                                            >Adobe Photoshop</span
+                                        >
+                                        <div class="skill-loader">
+                                            <div
+                                                class="skill-load"
+                                                style="width: 75%"
+                                            ></div>
+                                        </div>
+                                    </div>
+                                    <div class="skill-this">
+                                        <span class="skill-label"
+                                            >Adobe Photoshop</span
+                                        >
+                                        <div class="skill-loader">
+                                            <div
+                                                class="skill-load"
+                                                style="width: 75%"
+                                            ></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                class="skill-col skill-img"
+                                style="
+                                    background-image: url(img/creepy-man.jpeg);
+                                "
+                            ></div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="deceptive-video">
+                    <div class="container">
+                        <div class="video-block">
+                            <h2>Как я работаю</h2>
+                            <p class="about-me-lorem lorem-p">
+                                Lorem Ipsum - это текст-"рыба", часто
+                                используемый в печати и вэб-дизайне. Lorem Ipsum
+                                является стандартной "рыбой" для текстов на
+                                латинице с начала XVI века.
+                            </p>
+                            <div class="fake-video-block"></div>
+
+                            <div class="buttom-center">
+                                <img
+                                    src="img/video.svg"
+                                    class="fake-video"
+                                    alt="fake video"
+                                />
+                                <a href="#">
+                                    <img
+                                        src="img/play-button.svg"
+                                        class="play-button"
+                                        alt="play buttom"
+                                    />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="section-gellary">
+                    <div class="row">
+                        <a
+                            href="#"
+                            class="col"
+                            style="background-image: url(img/img-04.jpg)"
+                        ></a>
+                        <a
+                            href="#"
+                            class="col"
+                            style="background-image: url(img/img-03.jpg)"
+                        ></a>
+                        <a
+                            href="#"
+                            class="col col-order1"
+                            style="background-image: url(img/img-04.jpg)"
+                        ></a>
+                        <a
+                            href="#"
+                            class="col col-order2"
+                            style="background-image: url(img/img-03.jpg)"
+                        ></a>
+                        <a
+                            href="#"
+                            class="col col-order3"
+                            style="background-image: url(img/img-03.jpg)"
+                        ></a>
+                        <a
+                            href="#"
+                            class="col col-order4"
+                            style="background-image: url(img/img-04.jpg)"
+                        ></a>
+                        <a
+                            href="#"
+                            class="col"
+                            style="background-image: url(img/img-03.jpg)"
+                        ></a>
+                        <a
+                            href="#"
+                            class="col"
+                            style="background-image: url(img/img-04.jpg)"
+                        ></a>
+                    </div>
+                </section>
+
+                <section class="microsoft">
+                    <div class="container">
+                        <div class="microsoft-flex-block">
+                            <div class="col-microsoft">
+                                <a href="#">
+                                    <img
+                                        src="img/microsoft.png"
+                                        width="255"
+                                        alt="microsoft logo"
+                                    />
+                                </a>
+                            </div>
+                            <div class="col-microsoft">
+                                <a href="#">
+                                    <img
+                                        src="img/microsoft.png"
+                                        width="255"
+                                        alt="microsoft logo"
+                                    />
+                                </a>
+                            </div>
+                            <div class="col-microsoft">
+                                <a href="#">
+                                    <img
+                                        src="img/microsoft.png"
+                                        width="255"
+                                        alt="microsoft logo"
+                                    />
+                                </a>
+                            </div>
+                            <div class="col-microsoft">
+                                <a href="#">
+                                    <img
+                                        src="img/microsoft.png"
+                                        width="255"
+                                        alt="microsoft logo"
+                                    />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="form-section">
+                    <div class="container">
+                        <div class="input-block">
+                            <h2>Хотите веб-сайт?</h2>
+                            <p class="about-me-lorem-p">
+                                Lorem Ipsum - это текст-"рыба", часто
+                                используемый в печати и вэб-дизайне. Lorem Ipsum
+                                является стандартной "рыбой" для текстов на
+                                латинице с начала XVI века.
+                            </p>
+                            <form class="form-block-name-email">
+                                <input
+                                    type="text"
+                                    class="input-name"
+                                    placeholder="Ваше имя"
+                                />
+                                <input
+                                    type="email"
+                                    class="input-email"
+                                    placeholder="Ваш e-mail"
+                                />
+                            </form>
+                            <form action="">
+                                <textarea
+                                    name="Message"
+                                    class="message-form"
+                                    cols="35"
+                                    rows="15"
+                                    placeholder="Сообщение"
+                                ></textarea>
+                            </form>
+                            <a href="#" class="btn">ОТПРАВИТЬ</a>
+                        </div>
+                    </div>
+                </section>
+            </main>
+
+            <footer class="footer">
+                <div class="container">
+                  <div class="footer-block">
+                    <div class="info">
+                      <h3>Иванов Иван</h3>
+                      <p>(с) 2018. Все права защищены.</p>
+                    </div>
+                    <div class="vk-img">
+                      <a href="#"
+                        ><img src="./img/vk.svg" class="vk-logo" alt="VK logo"
+                      /></a>
+                      <a href="#"
+                        ><img src="./img/vk.svg" class="vk-logo" alt="VK logo"
+                      /></a>
+                      <a href="#"
+                        ><img src="./img/vk.svg" class="vk-logo" alt="VK logo"
+                      /></a>
+                    </div>
+                  </div>
+                </div>
+              </footer>
+        </div>
+    </body>
+</html>