adaptive

src/components/Footer/Footer.js

@@ -5,7 +5,7 @@ import "./footer.scss";
 const Footer = () => {
     return (
         <footer className="footer">
-            <div className="container">
+            <div className="container footer__wrapper">
                 <div className="footer__info">
                     <div className="footer__infoTop">
                         <p>

src/components/Footer/footer.scss

@@ -4,6 +4,18 @@
   color: white;
   height: 450px;
 
+  @media (max-width: 1155px) {
+    padding: 10px;
+    height: auto;
+  }
+
+  &__wrapper {
+    @media (max-width: 1155px) {
+      flex-direction: column;
+      row-gap: 20px;
+    }
+  }
+
   &__info {
     display: flex;
     flex-direction: column;
@@ -12,10 +24,21 @@
     height: 100%;
     margin-right: 200px;
 
+    @media (max-width: 1155px) {
+      margin-right: 0;
+      max-width: inherit;
+      flex-direction: row;
+      width: 100%;
+    }
+
     &Top {
       display: flex;
       flex-direction: column;
 
+      @media (max-width: 1155px) {
+        max-width: 500px;
+      }
+
       p {
         font-weight: 700;
         font-size: 20px;
@@ -50,6 +73,11 @@
     width: 100%;
     justify-content: space-between;
     height: 100%;
+
+    @media (max-width: 630px) {
+      flex-wrap: wrap;
+      row-gap: 15px;
+    }
   }
 
   &__item {
@@ -58,6 +86,15 @@
     justify-content: space-between;
     height: 100%;
 
+    @media (max-width: 630px) {
+      width: 200px;
+      height: 201px;
+    }
+
+    @media (max-width: 455px) {
+      height: auto;
+    }
+
     &Top {
       display: flex;
       flex-direction: column;

src/components/Header/Header.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import NavigationItem from "../NavigationItem/NavigationItem";
 import SocialItem from "../SocialItem/SocialItem";
@@ -7,6 +7,8 @@ import instagram from "../../assets/images/socials/instagram.png";
 import whatsapp from "../../assets/images/socials/whatsapp.png";
 import faceBook from "../../assets/images/socials/facebook.png";
 import profile from "../../assets/images/profile-user.png";
+import burger from "../../assets/images/burger-bar.png";
+import close from "../../assets/images/closeBurger.png"
 
 import "./header.scss";
 
@@ -29,6 +31,7 @@ const Header = () => {
                 href: "#"
             },
         ]
+    const [burgerOpen, setBurgerOpen] = useState(false)
     return (
         <header className="header">
             <div className="container">
@@ -49,6 +52,24 @@ const Header = () => {
                         <img src={profile} alt="profile" />
                     </div>
                 </div>
+                <div className="header__burger" onClick={() => setBurgerOpen(!burgerOpen)}>
+                    {burgerOpen ? <img className='burgerClose' src={close} alt='close'/> : <img className='burgerOpen' src={burger} alt='burger' /> }
+                </div>
+                {burgerOpen &&
+                    <div className='header__dropDown'>
+                        <nav className="header__dropDownNavMenu">
+                            {navigationItems.map((item) => {
+                                return <NavigationItem title={item} key={item} />
+                            })}
+                        </nav>
+                        <div className="header__infoSocials">
+                            {socials.map((social) => {
+                                return <SocialItem href={social.href} img={social.img} key={social.name} />
+                            })}
+                        </div>
+                        <span className="header__infoPhone">+7 (861) 111-11-11</span>
+                    </div>
+                }
             </div>
         </header>
     );

src/components/Header/header.scss

@@ -1,6 +1,7 @@
 .header {
   padding: 10px;
   background: gray;
+  position: relative;
 
   &__logo {
     font-size: 30px;
@@ -11,6 +12,10 @@
     display: flex;
     column-gap: 15px;
     margin-left: 50px;
+
+    @media (max-width: 950px) {
+      display: none;
+    }
   }
 
   &__info {
@@ -19,6 +24,10 @@
     align-items: center;
     column-gap: 15px;
 
+    @media (max-width: 950px) {
+      display: none;
+    }
+
     &Phone {
       font-size: 16px;
       font-weight: 500;
@@ -45,4 +54,50 @@
       }
     }
   }
+
+  &__burger {
+    display: none;
+    margin-left: auto;
+    width: 25px;
+    height: 25px;
+    cursor: pointer;
+
+    .burgerClose {
+      width: 20px;
+      height: 20px;
+    }
+
+    .burgerOpen {
+      width: 25px;
+      height: 25px;
+    }
+
+    @media (max-width: 950px) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &__dropDown {
+    display: none;
+    flex-direction: column;
+    border-radius: 8px;
+    background-color: #d9d9d9;
+    padding: 10px;
+    position: absolute;
+    right: 10px;
+    top: 55px;
+    row-gap: 10px;
+
+    @media (max-width: 950px) {
+      display: flex;
+    }
+
+    &NavMenu {
+      display: flex;
+      flex-direction: column;
+      row-gap: 5px;
+    }
+  }
 }

src/index.css

@@ -45,7 +45,8 @@ code {
 .container {
   display: flex;
   align-items: center;
-  max-width: 1280px;
+  max-width: 1300px;
+  padding: 0 10px;
   margin: 0 auto;
   height: 100%;
 }

src/pages/Home/home.scss

@@ -11,11 +11,25 @@
     display: flex;
     flex-direction: column;
     row-gap: 15px;
+    overflow: auto;
+
+    &::-webkit-scrollbar-thumb {
+      background: #333333;
+      border-radius: 5px;
+    }
+
+    &::-webkit-scrollbar {
+      border-radius: 8px;
+      width: 5px;
+      height: 10px;
+      background: gray;
+    }
 
     .info {
       &__top {
         display: flex;
         justify-content: space-between;
+        min-width: 1213px;
 
         button {
           background-color: #b6b6b6;
@@ -54,6 +68,7 @@
         background-color: #e6e6e6;
         align-items: center;
         justify-content: space-between;
+        min-width: 1213px;
 
         &Img {
           width: 20px;
@@ -97,6 +112,7 @@
         }
       }
       &__tableWrapper {
+        min-width: 1243px;
 
         .tableItem {
           padding: 10px;
@@ -155,6 +171,7 @@
             margin-top: 15px;
             column-gap: 8px;
             align-items: center;
+            margin-bottom: 15px;
 
             p {
               cursor: pointer;