Add adaptive

src/js/burger-menu.js

+'use strict';
+
+(function () {
+    var burger = document.querySelector('#hamburger-icon');
+    if(burger){
+        burger.addEventListener('click', function () {
+            burger.classList.toggle('active');
+            document.querySelector('.header__nav').classList.toggle('active')
+        })
+    }
+})();
\ No newline at end of file

src/js/main-slider.js

@@ -12,6 +12,23 @@
             pagination: {
                 el: '.swiper-pagination',
                 clickable: true
+            },
+            breakpoints: {
+                // when window width is <= 320px
+                320: {
+                    slidesPerView: 1,
+                    spaceBetween: 10
+                },
+                // when window width is <= 480px
+                480: {
+                    slidesPerView: 1,
+                    spaceBetween: 10
+                },
+                // when window width is <= 640px
+                640: {
+                    slidesPerView: 3,
+                    spaceBetween: 30
+                }
             }
         });
     });

src/js/news-slider.js

@@ -10,6 +10,13 @@
                 nextEl: '.swiper-button-next',
                 prevEl: '.swiper-button-prev',
             },
+            breakpoints: {
+                570: {
+                    slidesPerView: 1,
+                    spaceBetween: 0,
+                    simulateTouch: true,
+                }
+            }
         });
     });
 })();
\ No newline at end of file

src/js/product-slider.js

@@ -10,6 +10,19 @@
                 nextEl: '.swiper-button-next',
                 prevEl: '.swiper-button-prev',
             },
+            breakpoints: {
+                // when window width is <= 320px
+                500: {
+                    slidesPerView: 1,
+                    spaceBetween: 0,
+                    simulateTouch: true,
+                },
+                870: {
+                    slidesPerView: 2,
+                    spaceBetween: 0,
+                    simulateTouch: true,
+                }
+            }
         });
     });
 })();
\ No newline at end of file

src/scss/about-main/about-main.scss

 @import "../settings/color";
 
 .about-main{
+  overflow: hidden;
   background: $about-bg;
   border-top: 2px solid;
   border-bottom: 2px solid;
@@ -32,3 +33,23 @@
     line-height: 1.5;
   }
 }
+@media screen and (max-width: 780px){
+  .about-main__content{
+    flex-direction: column;
+    align-items: center;
+  }
+  .about-main__img{
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  .about-main__text{
+    padding: 0 15px;
+    font-size: 16px;
+  }
+  .about-main__wrapper{
+    padding-bottom: 30px;
+  }
+  .about-main__img{
+    max-width: 100%;
+  }
+}

src/scss/common/footer/footer-main.scss

@@ -59,3 +59,70 @@
   font-size: 20px;
   margin: 0;
 }
+
+@media screen and (max-width: 1170px){
+  .footer__wrapper{
+    width: 100%;
+    padding: 0 10px;
+  }
+}
+
+@media screen and (max-width: 700px){
+  .footer__main{
+    flex-wrap: wrap;
+  }
+  .footer-hr{
+    display: none
+  }
+  .footer__main-item{
+    width: 50%;
+  }
+  .footer__main-item-last{
+    width: 100%;
+    text-align: center;
+  }
+  .footer__phone-title{
+    justify-content: center;
+  }
+  .footer__mail-link{
+    justify-content: center;
+  }
+}
+
+@media screen and (max-width: 425px){
+  .footer{
+    padding-top: 20px;
+  }
+  .footer__f-line{
+    flex-direction: column;
+  }
+  .footer__search{
+    margin-top: 20px;
+  }
+  .footer__main{
+    flex-direction: column;
+    align-items: center;
+    padding-top: 20px;
+  }
+  .footer-hr{
+    display: none;
+  }
+  .footer__list-h{
+    text-align: center;
+    width: 100%;
+    display: inline-block;
+  }
+  .footer__mail-link{
+    padding-bottom: 20px;
+  }
+}
+
+@media screen and (max-width: 425px){
+  .footer__phone{
+    text-align: center;
+  }
+  .footer__phone-title{
+    justify-content: center;
+    padding-bottom: 20px;
+  }
+}
\ No newline at end of file

src/scss/common/header/burger-menu.scss

+
+$background: #3d566e;
+$color: #ecf0f1;
+
+$height-icon: 14px;
+$width-line: 30px;
+$height-line: 3px;
+
+$transition-time: 0.4s;
+$rotation: 45deg;
+$translateY: ($height-icon / 2);
+$translateX: 0;
+
+
+
+#hamburger-icon {
+  width:$width-line;
+  height:$height-icon;
+  position:relative;
+  display:block;
+  margin: ($height-icon * 2) auto $height-icon auto;
+
+  .line {
+    display:block;
+    background:$color;
+    width:$width-line;
+    height:$height-line;
+    position:absolute;
+    left:0;
+    border-radius:($height-line / 2);
+    transition: all $transition-time;
+    -webkit-transition: all $transition-time;
+    -moz-transition: all $transition-time;
+
+    &.line-1 {
+      top:0;
+    }
+    &.line-2 {
+      top:50%;
+    }
+    &.line-3 {
+      top:100%;
+    }
+  }
+  &:hover, &:focus {
+    .line-1 {
+      transform: translateY($height-line / 2 * -1);
+      -webkit-transform: translateY($height-line / 2 * -1);
+      -moz-transform: translateY($height-line / 2 * -1);
+    }
+    .line-3 {
+      transform: translateY($height-line / 2);
+      -webkit-transform: translateY($height-line / 2);
+      -moz-transform: translateY($height-line / 2);
+    }
+  }
+  &.active {
+    .line-1 {
+      transform: translateY($translateY) translateX($translateX) rotate($rotation);
+      -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
+      -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
+    }
+    .line-2 {
+      opacity:0;
+    }
+    .line-3 {
+      transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+      -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+      -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+    }
+  }
+}
+
+
+a#hamburger-icon {
+  text-decoration:none;
+  color:#95a5a6;
+  margin: 0.5em 1.5em;
+  display:inline-block;
+  &:hover, &:focus {
+    color:$color;
+  }
+}
+@media screen and (min-width: 1025px){
+  a#hamburger-icon{
+    display: none;
+  }
+}
+
+@media screen and (max-width: 425px){
+  a#hamburger-icon{
+    margin: 0;
+  }
+}
\ No newline at end of file

src/scss/common/header/header-main.scss

@@ -32,3 +32,10 @@
   width: 50%;
 }
 
+.logo__main{
+  margin-right: 20px;
+  img{
+    max-height: 45px;
+  }
+}
+

src/scss/common/header/header-nav.scss

 @import "../../settings/color";
 .header__nav{
+  flex-grow: 1;
   height: 100%;
 }
+.header__bl-nav{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .nav__list{
   display: flex;
   height: 100%;
@@ -23,3 +29,88 @@
   text-decoration: none;
   color: $white-text;
 }
+
+@media screen and (max-width: 1024px){
+  .header__nav{
+    display: none;
+    height: auto;
+  }
+  .header__nav.active{
+    display: flex;
+    position: absolute;
+    background: $grey-text;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+    transform: translateY(100%);
+  }
+  .header__nav-list{
+    width: 100%;
+    padding: 15px;
+  }
+  .header__bl{
+    width: auto;
+  }
+  .header__bl-contacts{
+    flex-grow: 1;
+  }
+}
+
+@media screen and (max-width: 600px){
+  .nav__list{
+    flex-direction: column;
+    padding: 0;
+  }
+  .nav__item{
+    width: 100%;
+    text-align: center;
+    padding: 15px 0;
+    position: relative;
+    &:after{
+      content: "";
+      display: block;
+      width: 100%;
+      height: 1px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background: #ffffff40;
+    }
+  }
+  .header__contacts-list{
+    flex-direction: column-reverse;
+  }
+  .header__bl-nav{
+    width: auto;
+  }
+  .header__wrapper{
+    justify-content: space-between;
+    margin-bottom: 40px;
+  }
+  .header{
+    height: auto;
+  }
+  .header__contacts-item{
+    &:after{
+      display: none;
+    }
+  }
+  .header__contacts-phone{
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    height: auto;
+    margin-bottom: 15px;
+    transform: translateX(-50%);
+  }
+  .header__contacts-mail{
+    display: none;
+  }
+  .logo__main{
+    margin: 0;
+  }
+  .header__contacts-phone{
+    padding: 0;
+  }
+}
\ No newline at end of file

src/scss/link-list-red/link-list-red.scss

@@ -59,3 +59,26 @@
     transform: translateY(-4px);
   }
 }
+@media screen and (max-width: 800px){
+  .link-list-red__list{
+    flex-wrap: wrap;
+  }
+  .link-list-red__item{
+    width: 50%;
+    &:after{
+      display: none;
+    }
+  }
+}
+@media screen and (max-width: 425px){
+  .link-list-red__item{
+    width: 220px;
+    &:after{
+      top: 100%;
+      right: 50%;
+      width: 30px;
+      height: 1px;
+      transform: translate(100%, 50%);
+    }
+  }
+}
\ No newline at end of file

src/scss/menu-list/menu-list-main.scss

@@ -47,6 +47,7 @@
   color: $white-text;
   padding: 10px 20px 20px;
   transition: .2s;
+  height: 100%;
 
   &:hover {
     background: rgba($red-color, .8);
@@ -56,3 +57,31 @@
 .menu-list__link.active{
   background: $red-color;
 }
+@media screen and (max-width: 1024px){
+  .menu-list__item{
+    img{
+      width: 100%;
+    }
+  }
+}
+@media screen and (max-width: 810px){
+  .menu-list__mainpage{
+    flex-wrap: wrap;
+  }
+  .menu-list__item {
+    width: 33%;
+    text-align: center;
+    img{
+      width: 91px;
+    }
+    &:after{
+      display: none;
+    }
+  }
+
+}
+@media screen and (max-width: 425px){
+  .menu-list__item {
+    width: 100%;
+  }
+}
\ No newline at end of file

src/scss/news-main/news-main.scss

@@ -6,6 +6,8 @@
   padding-top: 45px;
   padding-bottom: 45px;
   position: relative;
+  width: 100%;
+  overflow: hidden;
 }
 
 .swiper-container-news{
@@ -104,7 +106,49 @@
   }
 }
 
+.news-main__content{
+  width: 100%;
+  padding: 0 50px;
+}
+
 .slider-nav__next{
   right: 0;
   transform: translateX(100%);
 }
+
+.slider-nav__next{
+  transform: none;
+  margin-right: 10px;
+}
+.slider-nav__prev{
+  transform: none;
+  margin-left: 10px;
+}
+@media screen and (max-width: 1024px){
+  .news-main__content{
+    width: 100%;
+  }
+  .news-main__item{
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+
+@media screen and (max-width: 425px){
+  .news-main__content {
+    width: 100%;
+  }
+  .news-main__item{
+    flex-direction: column;
+    align-items: center;
+  }
+  .slider-nav__next{
+    transform: none;
+    margin-right: 10px;
+  }
+  .slider-nav__prev{
+    transform: none;
+    margin-left: 10px;
+  }
+}
\ No newline at end of file

src/scss/product-slider/product-slider.scss

 @import "../settings/color";
 .product-slider{
   padding: 45px 0;
+  width: 100%;
+  overflow: hidden;
 }
 .product-slider__wrapper{
+  widows: 100%;
   visibility: hidden;
   opacity: 0;
   height: 0;
@@ -22,6 +25,7 @@
 
 .product-slider__content{
   overflow: hidden;
+  width: 100%;
 }
 
 .product-slider__list{
@@ -76,3 +80,28 @@
     transform: translateY(-10px);
   }
 }
+@media screen and (max-width: 1024px){
+  .product-slider__wrapper{
+    width: 100%;
+  }
+  .product-slider__wrapper.active{
+    width: 100%;
+  }
+  .product-slider__content{
+    width: 100%;
+  }
+}
+@media screen and (max-width:425px) {
+  .product-slider{
+    display: none;
+  }
+  /*.product-slider__wrapper, .product-slider__wrapper.active{
+    width: 100%;
+  }
+  .product-slider__content{
+    width: 100%;
+  }
+  .product-slider__content .swiper-slide{
+    flex-shrink: 1;
+  }*/
+}
\ No newline at end of file

src/scss/settings/common-style.scss

@@ -48,3 +48,19 @@ body{
   }
 
 }
+
+
+@media screen and (max-width: 1170px){
+  .wrapper{
+    width: 100%;
+  }
+
+}
+
+@media screen and (max-width: 1024px) {
+  .slider__main{
+    img{
+      max-width: 100%;
+    }
+  }
+}
\ No newline at end of file

src/template/common/footer.html

@@ -58,7 +58,7 @@
                 </ul>
             </div>
             <div class="footer-hr"></div>
-            <div class="footer__main-item">
+            <div class="footer__main-item footer__main-item-last">
                 <div class="footer__phone">
                     <div class="footer__phone-title">
                         <svg class="footer__phone-ico">

src/template/common/header.html

@@ -6,11 +6,15 @@
     <link rel="stylesheet" href="css/swiper.css">
     <link rel="stylesheet" href="css/nouislider.css">
     <link rel="stylesheet" href="css/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 <header class="header">
     <div class="wrapper header__wrapper">
         <div class="header__bl header__bl-nav">
+            <div class="logo__main">
+                <img src="img/logo-main.png" alt="Лого">
+            </div>
             <nav class="header__nav">
                 <ul class="header__nav-list nav__list">
                     <li class="nav__item"><a class="nav__link" href="#">Каталог</a></li>
@@ -25,14 +29,14 @@
         </div>
         <div class="header__bl header__bl-contacts">
             <ul class="header__contacts-list">
-                <li class="header__contacts-item">
+                <li class="header__contacts-item header__contacts-mail">
                     <a class="header__mail" href="mailto:test@test.ru">
                         <svg class="header__mail-ico">
                             <use xlink:href="img/sprite-vector.svg#mail-icon"></use>
                         </svg>
                     </a>
                 </li>
-                <li class="header__contacts-item">
+                <li class="header__contacts-item header__contacts-phone">
                     <a class="header__phone" href="tel:+78008888888">
                         <svg class="header__phone-ico">
                             <use xlink:href="img/sprite-vector.svg#phone-icon"></use>
@@ -49,5 +53,10 @@
                 </li>
             </ul>
         </div>
+        <a id="hamburger-icon" href="#" title="Menu">
+            <span class="line line-1"></span>
+            <span class="line line-2"></span>
+            <span class="line line-3"></span>
+        </a>
     </div>
 </header>
\ No newline at end of file

src/template/menu-list-main/index.html

@@ -2,38 +2,38 @@
     <div class="wrapper menu-list__wrapper">
         <ul class="menu-list__list menu-list__mainpage">
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link active">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link active">
+                    <img src="img/kolesnie-cat.png" alt="Колесные мини-погрузчики" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link">
+                    <img src="img/gusen-cat.png" alt="" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link">
+                    <img src="img/mini-cat.png" alt="" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link">
+                    <img src="img/tele-cat.png" alt="" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link">
+                    <img src="img/ecscat-cat.png" alt="" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link">
-                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                <a href="/build/catalog.html" class="menu-list__link">
+                    <img src="img/naves-cat.png" alt="" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>
             </li>