my module home work on markup

MarkupModule/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

MarkupModule/dist/js/script.js

@@ -0,0 +1,41 @@
+//hamburger menu activation classes
+const hamburger = document.querySelector('.hamburger');
+const menu = document.querySelector('.menu');
+
+
+ function toggleMenu() {
+    if (menu.classList.contains('menu_active')) {
+            menu.classList.remove('menu_active');
+            hamburger.classList.remove('hamburger_active')
+            console.log('if');
+            console.log(menu.classList.contains('menu_active'))
+    } else {
+        menu.classList.add('menu_active');
+        hamburger.classList.add('hamburger_active')
+        console.log('else');
+        console.log(menu.classList.contains('menu_active'))    
+    }
+}
+ 
+ hamburger.addEventListener('click', toggleMenu);
+ console.log(menu.classList.contains('menu_active'))
+
+//show section
+
+const showBtn = document.querySelector('.descript__btn');
+const sectionD = document.querySelector('.projects');
+const desc = document.querySelector('.descript');
+console.log(sectionD);
+showBtn.addEventListener('click', () =>{
+    sectionD.style.display = "block";
+    desc.style.display = "none";
+
+});
+
+//show alert 
+const form = document.querySelector('.btn__header');
+
+form.addEventListener('click', ()=> {
+    alert('Здесь будет выводиться форма, аналогичная той которая внизу и лэйаут на сайт - если успею дописать)')
+})
+

MarkupModule/gulpfile.js

@@ -0,0 +1,71 @@
+const gulp        = require('gulp');
+const browserSync = require('browser-sync');
+const sass        = require('gulp-sass');
+const cleanCSS = require('gulp-clean-css');
+const autoprefixer = require('gulp-autoprefixer');
+const rename = require("gulp-rename");
+const imagemin = require('gulp-imagemin');
+const htmlmin = require('gulp-htmlmin');
+
+gulp.task('server', function() {
+
+    browserSync({
+        server: {
+            baseDir: "dist"
+        }
+    });
+
+    gulp.watch("src/*.html").on('change', browserSync.reload);
+});
+
+gulp.task('styles', function() {
+    return gulp.src("src/sass/**/*.+(scss|sass)")
+        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
+        .pipe(rename({suffix: '.min', prefix: ''}))
+        .pipe(autoprefixer())
+        .pipe(cleanCSS({compatibility: 'ie8'}))
+        .pipe(gulp.dest("dist/css"))
+        .pipe(browserSync.stream());
+});
+
+gulp.task('watch', function() {
+    gulp.watch("src/sass/**/*.+(scss|sass|css)", gulp.parallel('styles'));
+    gulp.watch("src/*.html").on('change', gulp.parallel('html'));
+    gulp.watch("src/js/**/*.js").on('change', gulp.parallel('scripts'));
+    gulp.watch("src/fonts/**/*").on('all', gulp.parallel('fonts'));
+    gulp.watch("src/icons/**/*").on('all', gulp.parallel('icons'));
+    gulp.watch("src/img/**/*").on('all', gulp.parallel('images'));
+});
+
+gulp.task('html', function () {
+    return gulp.src("src/*.html")
+        .pipe(htmlmin({ collapseWhitespace: true }))
+        .pipe(gulp.dest("dist/"));
+});
+
+gulp.task('scripts', function () {
+    return gulp.src("src/js/**/*.js")
+        .pipe(gulp.dest("dist/js"))
+        .pipe(browserSync.stream());
+});
+
+gulp.task('fonts', function () {
+    return gulp.src("src/fonts/**/*")
+        .pipe(gulp.dest("dist/fonts"))
+        .pipe(browserSync.stream());
+});
+
+gulp.task('icons', function () {
+    return gulp.src("src/icons/**/*")
+        .pipe(gulp.dest("dist/icons"))
+        .pipe(browserSync.stream());
+});
+
+gulp.task('images', function () {
+    return gulp.src("src/img/**/*")
+        .pipe(imagemin())
+        .pipe(gulp.dest("dist/img"))
+        .pipe(browserSync.stream());
+});
+
+gulp.task('default', gulp.parallel('watch', 'server', 'styles', 'scripts', 'fonts', 'icons', 'html', 'images'));

MarkupModule/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "portfolio",
+  "version": "1.0.0",
+  "description": "",
+  "main": "gulpfile.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "browser-sync": "^2.26.12",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^6.1.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-cli": "^2.3.0",
+    "gulp-htmlmin": "^5.0.1",
+    "gulp-imagemin": "^6.2.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.1.0"
+  },
+  "browserslist": [
+    "last 1 version",
+    "> 1%",
+    "maintained node versions",
+    "not dead"
+  ]
+}

MarkupModule/src/index.html

@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.min.css">
+    <title>WD - module work on markup NIX</title>
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header__top">
+               <a href="#"><h2 class="header__logo">WD</h2></a> 
+                <nav class="header__nav"> 
+                    <ul class="header__pc" >
+                        <li><a href="#">ГЛАВНАЯ</a> </li>
+                        <li><a href="#about">ОБ АВТОРЕ</a></li>
+                        <li><a href="#projects">РАБОТЫ</a></li>
+                        <li><a href="#skills">ПРОЦЕСС</a></li>
+                        <li><a href="#">КОНТАКТЫ</a></li>
+                    </ul>
+                    <div class="hamburger">
+                        <span></span>
+                        <span class="long" ></span>
+                        <span></span>
+                    </div>
+                    <ul class="menu">
+                        <li class="menu__link"><a href="#">ГЛАВНАЯ</a></li>
+                        <li class="menu__link"><a href="#about">ОБ АВТОРЕ</a></li>
+                        <li class="menu__link"><a href="#projects">РАБОТЫ</a></li>
+                        <li class="menu__link"><a href="#skills">ПРОЦЕСС</a></li>
+                        <li class="menu__link"><a href="#">КОНТАКТЫ</a></li>
+                    </ul>
+                   
+                </nav>
+            </div>
+            <div class="header__wrapper">
+                <img src="img/Frame.png" alt="Frame">
+                <div class="header__content">
+                    <h1>Дизайн и верстка</h1>
+                    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
+                    <button class="btn btn__header">НАПИСАТЬ МНЕ</button>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main class="main">
+        <section id="about" class="about">
+            <div class="container">
+                <div class="about__wrapper">
+                   <h2>Обо мне</h2>
+                    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p> 
+                </div>
+            </div>
+        </section>
+        <section class="numbers">
+            <div class="container">
+                <div class="numbers__wrapper">
+                    
+                    <div class="numbers__item">
+                        <div class="number__img">
+                            <img src="icons/project.png" width=50 alt="Project ">
+                        </div>
+                        <div class='numbers__desc'>
+                                <h4>40+</h4>
+                                <span>проектов</span>  
+                        </div>
+                    </div>
+                    <div class="numbers__item">
+                        <div class="number__img">
+                            <img src="icons/project.png" width=50 alt="Project ">
+                        </div>
+                        <div class='numbers__desc'>
+                                <h4>40+</h4>
+                                <span>проектов</span>  
+                        </div>
+                    </div>
+                    <div class="numbers__item">
+                        <div class="number__img">
+                            <img src="icons/project.png" width=50 alt="Project ">
+                        </div>
+                        <div class='numbers__desc'>
+                                <h4>40+</h4>
+                                <span>проектов</span>  
+                        </div>
+                    </div>
+                    <div class="numbers__item">
+                        <div class="number__img">
+                            <img src="icons/project.png" width=50 alt="Project ">
+                        </div>
+                        <div class='numbers__desc'>
+                                <h4>40+</h4>
+                                <span>проектов</span>  
+                        </div>
+                    </div>
+                    <div class="numbers__item">
+                        <div class="number__img">
+                            <img src="icons/project.png" width=50 alt="Project ">
+                        </div>
+                        <div class='numbers__desc'>
+                                <h4>40+</h4>
+                                <span>проектов</span>  
+                        </div>
+                    </div>
+                </div>
+            </div>    
+        </section>
+        <section id="skills" class="skills">
+            <div class="container">
+                <div class="skills__wrapper">
+                    <div class="skills__list">
+                        <h4>Мои навыки</h4>
+                        <span>Adobe Photoshop</span>
+                        <div class="skills__progress"></div>
+                        <span>Adobe Photoshop</span>
+                        <div class="skills__progress"></div>
+                        <span>Adobe Photoshop</span>
+                        <div class="skills__progress"></div>
+                    </div>
+                    <div class="skills__img"><img src="img/skills.png" width=555 alt="My photo"></div>
+                </div>
+            </div>
+        </section>
+        <section class="video">
+            <div class="container">
+                <div class="video__wrapper">
+                   <h2>Как я работаю</h2>
+                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p> 
+                </div>
+                <div class="video__img">
+                    <img src="img/video.png" alt="video">
+                    <a href=""><img src="img/play-button.png" class="video__play" alt="play"></a>  
+                </div>
+               
+            </div>
+        </section>
+      
+       <section id="projects" class="projects">
+           
+            <div class="row">
+                <div class="col">
+                    <div class="projects__item"><a href="#">
+                        <img src="img/project_list.png" alt="project_list"></a>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="projects__item"><a href="#"><img src="img/project_pc.png" alt="project_pc"></a></div>
+                </div>
+                <div class="col">
+                    <div class="projects__item"><a href="#"><img src="img/project_list.png" alt="project_list"></a></div>
+                </div>
+                <div class="col">
+                    <div class="projects__item"><a href="#"><img src="img/project_pc.png" alt="project_pc"></a></div>
+                </div>
+        
+                <div class="col">
+                    <div class="projects__item"><a href="#"><img src="img/project_list.png" alt="project_list"></a></div>
+                </div>
+                <div class="col">
+                    <div class="projects__item"><a href="#"><img src="img/project_pc.png" alt="project_pc"></a></div>
+                </div>
+                <div class="col">
+                    <div class="projects__item"><a href="#"><img src="img/project_list.png" alt="project_list"></a></div>
+                </div>
+                <div class="col">
+                    <div class="projects__item"><a href="#"><img src="img/project_pc.png" alt="project_pc"></a></div>
+                </div>
+            </div>
+        </section>
+        <section class="clients">
+            <div class="container">
+                <div class="clients__wrapper">
+                    <a href="#"><img class="clients__img" src="img/windows.png"  alt="windows"></a>
+                    <a href="#"><img class="clients__img" src="img/windows.png"  alt="windows"></a>
+                    <a href="#"><img class="clients__img" src="img/windows.png"   alt="windows"></a>
+                    <a href="#"><img class="clients__img" src="img/windows.png"  alt="windows"></a>  
+                </div>
+            </div>
+        </section>
+        <section class="form">
+            <div class="container">
+                <div class="form__title">
+                    <h3>Хотите веб-сайт?</h3>
+                    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
+                </div>
+
+                <form action="#">
+                    <div class="form__wrapper">
+                        <div class="form__inputs">
+                           <input type="text" required placeholder="Ваше имя" >
+                            <input type="e-mail" required placeholder="Ваш e-mail">  
+                        </div>
+                            <textarea name="message" placeholder="Сообщение" id="text" cols="30" rows="10" ></textarea>
+                            <button type="submit">ОТПРАВИТЬ</button> 
+                    </div>
+                </form>
+            </div>
+        </section>
+    </main>
+    <footer class="footer">
+        <div class="container">
+             <div class="footer__wrapper">
+                <div class="footer__title">
+                    <h3>Сергей Борщ</h3>
+                    <span>(с) 2021. Все права защищены.</span>
+                </div>
+                <div class="footer__icons">
+                    <a href="#"><img src="img/vk_logo.png" width="44" alt="logo"></a>
+                    <a href="#"><img src="img/vk_logo.png" width="44"  alt="logo"></a>
+                    <a href="#"><img src="img/vk_logo.png" width="44"  alt="logo"></a>
+                </div>
+            </div>
+        </div>
+           
+    </footer>
+    <script src="js/script.js"></script>
+</body>
+</html>

MarkupModule/src/js/script.js

@@ -0,0 +1,41 @@
+//hamburger menu activation classes
+const hamburger = document.querySelector('.hamburger');
+const menu = document.querySelector('.menu');
+
+
+ function toggleMenu() {
+    if (menu.classList.contains('menu_active')) {
+            menu.classList.remove('menu_active');
+            hamburger.classList.remove('hamburger_active')
+            console.log('if');
+            console.log(menu.classList.contains('menu_active'))
+    } else {
+        menu.classList.add('menu_active');
+        hamburger.classList.add('hamburger_active')
+        console.log('else');
+        console.log(menu.classList.contains('menu_active'))    
+    }
+}
+ 
+ hamburger.addEventListener('click', toggleMenu);
+ console.log(menu.classList.contains('menu_active'))
+
+//show section
+
+const showBtn = document.querySelector('.descript__btn');
+const sectionD = document.querySelector('.projects');
+const desc = document.querySelector('.descript');
+console.log(sectionD);
+showBtn.addEventListener('click', () =>{
+    sectionD.style.display = "block";
+    desc.style.display = "none";
+
+});
+
+//show alert 
+const form = document.querySelector('.btn__header');
+
+form.addEventListener('click', ()=> {
+    alert('Здесь будет выводиться форма, аналогичная той которая внизу и лэйаут на сайт - если успею дописать)')
+})
+

MarkupModule/src/sass/base/_button.scss

@@ -0,0 +1,16 @@
+.btn {
+    background: #34547A;
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    text-align: center;
+    cursor: pointer;
+    color: #FFFFFF;
+    &__header {
+        width: 225px;
+        height: 65px;
+        font-size: 16px;
+        line-height: 26px;
+        letter-spacing: 0.1em;
+    }
+}

MarkupModule/src/sass/blocks/_about.scss

@@ -0,0 +1,30 @@
+.about {
+    padding: 119px 0 100px 0;
+    &__wrapper{
+        
+        max-width: 460px;
+        margin: 0 auto;
+        font-family: Roboto;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 26px;
+        text-align: center;
+        color: #727272;
+        & h2 {
+            margin: 0;
+            margin-bottom: 50px;
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 32px;
+            line-height: 37px;
+            color: #000000;
+        }
+        & p {
+            margin: 0;
+        }
+
+    }
+
+}

MarkupModule/src/sass/blocks/_burger.scss

@@ -0,0 +1,65 @@
+.hamburger {
+    display: none;
+    position: absolute;
+    top: 40px;
+    right: 50px;
+    cursor: pointer;
+    flex-direction: column;
+    align-items: flex-end;
+    z-index: 20;
+    span {
+        display: block;
+        margin-top: 6px;
+        width: 30px;
+        height: 3px;
+        background: #151812;
+    }
+    span.long {
+        width: 36px;
+    }
+    &_active {
+        span {
+        transform: rotate(-45deg);
+        margin-top: -3px;
+        background: #33382e;
+        transition: all .6s;
+        &:last-child {
+            transform: rotate(45deg);
+        }
+        &:nth-child(2){
+        display: none;
+        }
+        } 
+    }
+}
+
+.menu {
+    position: fixed;
+    top: 0;
+    left: 100%;
+    width: 40vw;
+    height: 100vh;
+    padding-top: 30px;
+    z-index: 10;
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.6s;
+    list-style: none;
+    background-color: #727272;;
+    &_active {
+        visibility: visible;
+        opacity: 1;
+        left: 0;
+    }
+    &__link {
+        border: 1px blanchedalmond solid;
+        border-radius: 10px;
+        position: relative;
+        margin-bottom: 15px;
+        margin-right: 20px;
+        a {
+            color:rgb(255, 255, 255);
+            padding: 0;
+        }    
+    }
+}

MarkupModule/src/sass/blocks/_clients.scss

@@ -0,0 +1,14 @@
+.clients {
+    padding: 72px 0 100px 0;
+    &__wrapper {
+        min-height: 120px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    &__img {
+        vertical-align: top;
+        max-width: 255px;
+        height: auto;
+    }
+}

MarkupModule/src/sass/blocks/_footer.scss

@@ -0,0 +1,28 @@
+.footer {
+    padding: 56px 0 55px 0;
+    background-color: #34547A;
+    &__wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    &__title {
+        font-family: Roboto;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 13px;
+        line-height: 21px;
+        color: #FFFFFF;
+        & h3 {
+            margin: 0;
+            margin-bottom: 20px;
+            font-weight: 500;
+            font-size: 21px;
+            line-height: 25px;
+        }
+    }
+    &__icons a {
+        margin-left: 22px;
+
+    }
+}

MarkupModule/src/sass/blocks/_form.scss

@@ -0,0 +1,66 @@
+.form {
+    padding: 100px 0 100px 0;
+    background-color: #EEEFF1;
+    &__title {
+        margin: 0 auto;
+        margin-bottom: 65px;
+        max-width: 540px;
+        font-family: Roboto;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 26px;
+        text-align: center;
+        color: #727272;
+        & p {
+            margin: 0;
+        }
+        & h3 {
+            font-weight: 700;
+            font-size: 32px;
+            line-height: 37px;
+            text-align: center;
+            color: #000000;
+            margin: 0; 
+            margin-bottom: 50px;
+        }
+    }
+    &__inputs {
+        margin: 0 auto;
+        margin-bottom: 20px;
+        input {
+            width: 255px;
+            height: 50px;
+            padding: 17px 0 18px 20px;
+            border: none;
+            &:first-child {
+                margin-right: 20px;
+            }
+        }
+    }
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        & textarea {
+            padding: 17px 0 0 20px;
+            resize: none;
+            border:none;
+            width: 540px; 
+            height: 175px;
+            margin: 0 auto;
+            margin-bottom: 50px;
+        }
+        & button {
+            margin: 0 auto;
+            width: 190px;
+            height: 55px;
+            font-size: 14px;
+            line-height: 23px;
+            text-align: center;
+            letter-spacing: 0.15em;
+            color: #FFFFFF;
+            background: #34547A;
+        }
+    }
+
+}

MarkupModule/src/sass/blocks/_header.scss

@@ -0,0 +1,72 @@
+.header {
+    padding: 57px 0 146px 0;
+    background-color: #EEEFF1;
+    &__logo {
+        font-family: 'Revalia', cursive;
+        color: #34547A;
+        font-weight: normal;
+        font-size: 48px;
+        line-height: 60px;
+
+    }
+    &__wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        img {
+            width: 357px;
+            height: 233.7px;
+        }
+    }
+    &__pc {
+        display: flex;
+        position: relative;
+        justify-content: space-around;
+        list-style: none;
+        li a{
+            padding-left: 42px;
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 26px;
+            letter-spacing: 0.1em;
+            color: #34547A;
+            text-decoration: none;
+        }       
+    }
+    &__top{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 161px;
+        h2 {
+            margin: 0;
+        }
+        a {
+            text-decoration: none;
+        }
+    }
+    &__content{
+        padding-left: 131px;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 26px;
+        color: #727272;
+        h1 {
+            font-style: normal;
+            font-size: 48px;
+            line-height: 79px;
+            color: #000000;
+            margin-bottom: 44px;
+        }
+        p {
+
+            margin:0 0 60px 0;
+        }
+    }
+    &__burger {
+        display: none;
+    }
+}

MarkupModule/src/sass/blocks/_media.scss

@@ -0,0 +1,161 @@
+@media (max-width: 1200px) {
+    .container {
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: 5px 10px 5px 10px
+    }
+    .clients {
+        padding-bottom: 50px;
+        &__img {
+            max-width: 180px;   
+        }  
+    }
+    .video__img img {
+        max-width: 75%;   
+}
+ @media (max-width: 992px) {
+    .header {
+        padding: 37px 0 46px 0;
+        &__top {
+            margin-bottom: 30px;
+        }
+        &__nav ul>li>a{
+            padding-left: 22px;
+            font-size: 16px;
+            line-height: 18px;   
+        }         
+        &__content {
+            padding-left: 50px;
+            h1 {
+                font-size: 36px;
+                margin-bottom: 0px;
+            }
+            p {
+                margin-bottom: 10px;
+            }
+        }
+        }
+    }
+    .btn__header {
+        width: 190px;
+        height: 45px;
+    }
+    .skills {
+        padding: 50px 10px;
+        &__list {
+            padding-right: 20px;
+            h4 {
+                margin-bottom: 0;
+            }
+            span {
+                margin-bottom: 5px;
+            }
+        }
+    }
+    .numbers {
+        padding: 40px 10px;
+    }
+    .video {
+        padding: 20px 0;
+    }
+    .clients {
+        padding: 20px 10px;
+    }
+    .form {
+        padding: 20px 0;
+    }
+    .footer {
+        padding: 20px 10px;
+    }
+}
+@media ( max-width: 768px) {
+    .hamburger {
+        display: flex;
+    }
+    .header {
+        &__content {
+            padding-left: 20px;
+            font-size: 14px;
+            h1 {
+                font-size: 32px;
+            }
+        }
+        &__pc {
+            display: none;
+        }
+        &__wrapper img{
+            max-width:40%;
+            height: auto;
+        }
+        &__logo {
+            padding-left: 20px;
+        }
+
+    }
+    .about {
+        padding: 20px 10px;
+    }
+    .numbers {
+        &__item {
+            padding-right: 20px;
+            margin-bottom: 20px;
+        }
+        &__wrapper {
+            justify-content: center;
+        }
+    }
+    .col {
+        max-width: 33.333%;
+         
+    }
+    .skills__progress {
+        max-width: 250px;
+        &:after {
+            max-width: 150px;  
+        } 
+    }
+    .clients__wrapper {
+        flex-direction: column;
+    }
+    
+}
+@media ( max-width: 576px) {
+    .header__content {
+        padding: 5px;
+        h1 {
+            font-size: 38px;
+            line-height: 39px;
+            margin-bottom: 20px;
+        }
+    }
+    .hamburger {
+        top: 40px;
+        left: 0;
+    }
+    .menu {
+        width: 50vw;
+        height: 100vh;
+    }
+    .skills__progress {
+        max-width: 150px;
+        &:after {
+            max-width: 50%;  
+        } 
+    }
+    .col {
+        max-width: 50%;
+         
+    }
+    .form {
+        &__inputs {
+            width: 70%;
+            margin-bottom: 10px;
+            input {
+                margin-bottom: 8px;
+            }
+        }
+         textarea {
+        width: 80%;
+        }
+    }
+}

MarkupModule/src/sass/blocks/_numbers.scss

@@ -0,0 +1,31 @@
+.numbers {
+    background: #34547A;
+    padding: 100px 0;
+    &__wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+    &__item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    &__desc {
+        font-family: Roboto;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 26px;
+        color: #FFFFFF;
+        padding-left: 20px;
+        & h4 {
+            margin: 0;
+            font-weight: 500;
+            font-size: 21px;
+            line-height: 25px;
+        }
+        
+    }
+}

MarkupModule/src/sass/blocks/_projects.scss

@@ -0,0 +1,33 @@
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;    
+}
+.col {
+    max-width: 25%;
+    padding: 1px;  
+}
+.projects {
+    &__item{
+        position: relative;
+        img {
+            vertical-align: top;
+            width: 100%;
+            min-height: auto;
+        }
+        &:after {
+            content:'';
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background:url('../img/view.png') center no-repeat,linear-gradient(0deg, rgba(52, 84, 122, 0.8), rgba(52, 84, 122, 0.8));
+
+        }
+        &:hover::after {
+            position: absolute;
+            cursor: pointer;
+        }
+    }    
+}

MarkupModule/src/sass/blocks/_skills.scss

@@ -0,0 +1,51 @@
+.skills {
+    background: #E5E5E5;
+    padding: 102px 0;
+    &__wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    &__list {
+        text-align: left;
+        font-family: Roboto;
+        font-style: normal;
+        font-size: 16px;
+        line-height: 26px;
+        color: #727272;
+        padding-right: 150px;
+        & h4 {
+            margin: 0;
+            font-weight: 500;
+            font-size: 32px;
+            line-height: 37px;
+            color: #000000;
+            margin-bottom: 20px;
+        }
+        & span {
+            display: block;
+            margin-bottom: 20px;
+            padding-top: 30px;
+        }
+
+    }
+    &__progress {
+        width: 445px;
+        height: 4px;
+        border: 1px solid #000000;
+        &:after {
+            content:'';
+            display: block;
+            height: 3px;
+            width: 350px;
+            background-color: #34547A;
+        }
+    }
+    &__img {
+        img {
+            width: 100%;
+            height: auto;
+            vertical-align: top;
+        }
+    }
+}

MarkupModule/src/sass/blocks/_video.scss

@@ -0,0 +1,39 @@
+.video {
+    background: #EEEFF1;
+    padding: 100px 0;
+    text-align: center;
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 26px;
+    text-align: center;
+    color: #727272;
+    h2 {
+        font-weight: 500;
+        font-size: 32px;
+        line-height: 37px;
+        text-align: center;
+        color: #000000;
+    }
+    &__wrapper {
+        margin: 0 auto;
+        max-width:540px;
+        margin-bottom: 57px;
+    }
+    &__img {
+        position: relative;
+        max-width: 1110px;
+        & img {
+            vertical-align: top;
+            max-width: 100%;
+            height: auto;
+        }
+    }
+    &__play {
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+    }
+}

MarkupModule/src/sass/libs/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;
+}
+
+/* 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;
+}

MarkupModule/src/sass/style.scss

@@ -0,0 +1,31 @@
+@import 'libs/normalize.css';
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Revalia&display=swap');
+
+html {
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+*,
+:before,
+:after {
+    box-sizing: inherit;
+}
+.container {
+    max-width: 1110px;
+    margin: 0 auto;
+    padding: 0 10px 0 10px
+}
+
+@import 'base/button';
+@import 'blocks/header';
+@import 'blocks/about';
+@import 'blocks/numbers';
+@import 'blocks/skills';
+@import 'blocks/video';
+@import 'blocks/projects';
+@import 'blocks/clients';
+@import 'blocks/form';
+@import 'blocks/footer';
+@import 'blocks/burger';
+@import 'blocks/media';