adaptive

index.html

@@ -22,6 +22,10 @@
     <div class="wrapper">
       <!-- первая страница сайта -->
       <header class="header">
+        <!-- бургер меню -->
+        <a href="#" class="burger">
+          <span></span>
+        </a>
         <!-- шапка сайта -->
         <div class="header_top">
           <div class="container">
@@ -2028,6 +2032,17 @@
         //   };
         // });
       });
+    $(".header_nav-list a, .haeder_top_btn, .footer_go_top").on("click", function (e) {
+        //отменяем стандартную обработку нажатия по ссылке
+        event.preventDefault();
+        //забираем идентификатор бока с атрибута href
+        var id  = $(this).attr('href'),
+        //узнаем высоту от начала страницы до блока на который ссылается якорь
+            top = $(id).offset().top;
+        //анимируем переход на расстояние - top за 1500 мс
+        $('body,html').animate({scrollTop: top}, 1500);
+    });
+
     </script>
     <!-- <script async
     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">

style.css

@@ -1436,3 +1436,38 @@ body {
 .footer_go_top:hover {
   opacity: 1;
 }
+/* ----------------------------------------BURGER MENU------------------------------------------------------- */
+.burger {
+  display: none;
+}
+
+/* ----------------------------------------MEDIA--------------------------------------------------- */
+
+@media (max-width: 1100px) {
+  .burger {
+    display: block;
+    position: absolute;
+    top: 30px;
+    right: 15px;
+  }
+  .burger span {
+    display: block;
+    height: 4px;
+    width: 30px;
+    background-color: #424551;
+    border-radius: 3px;
+    margin: 4px 0px;
+  }
+  .burger::before,
+  .burger::after {
+    content: "";
+    display: block;
+    height: 4px;
+    width: 30px;
+    background-color: #424551;
+    border-radius: 3px;
+  }
+  .header_top {
+    position: absolute;
+  }
+}