feat: added header adaptive

assets/css/index.css

@@ -1,6 +1,48 @@
+@font-face {
+  font-family: "Gilroy";
+  src: url("../fonts/Gilroy-Light.eot");
+  src: local("Gilroy Light"), local("Gilroy-Light"), url("../fonts/Gilroy-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-Light.woff") format("woff"), url("../fonts/Gilroy-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Gilroy";
+  src: url("../fonts/Gilroy-Regular.eot");
+  src: local("Gilroy Regular"), local("Gilroy-Regular"), url("../fonts/Gilroy-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-Regular.woff") format("woff"), url("../fonts/Gilroy-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Gilroy";
+  src: url("../fonts/Gilroy-RegularItalic.eot");
+  src: local("Gilroy Regular Italic"), local("Gilroy-RegularItalic"), url("../fonts/Gilroy-RegularItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-RegularItalic.woff") format("woff"), url("../fonts/Gilroy-RegularItalic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Gilroy";
+  src: url("../fonts/Gilroy-Medium.eot");
+  src: local("Gilroy Medium"), local("Gilroy-Medium"), url("../fonts/Gilroy-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-Medium.woff") format("woff"), url("../fonts/Gilroy-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Gilroy";
+  src: url("../fonts/Gilroy-SemiBold.eot");
+  src: local("Gilroy SemiBold"), local("Gilroy-SemiBold"), url("../fonts/Gilroy-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-SemiBold.woff") format("woff"), url("../fonts/Gilroy-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Gilroy";
+  src: url("../fonts/Gilroy-Bold.eot");
+  src: local("Gilroy Bold"), local("Gilroy-Bold"), url("../fonts/Gilroy-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy-Bold.woff") format("woff"), url("../fonts/Gilroy-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
 html {
   font-size: 16px;
-  font-family: "Montserrat", sans-serif;
+  font-family: "Gilroy", sans-serif;
   font-weight: 400;
   font-style: normal;
   scroll-behavior: smooth;
@@ -18,7 +60,7 @@ a,
 button,
 input,
 textarea {
-  font-family: "Montserrat", sans-serif;
+  font-family: "Gilroy", sans-serif;
   text-decoration: none;
 }
 
@@ -49,11 +91,19 @@ img {
   box-sizing: border-box;
 }
 
+.logo {
+  flex: 0 0 auto;
+}
 .logo__link {
   display: flex;
   align-items: center;
   gap: 22px;
 }
+@media (max-width: 1240px) {
+  .logo__link {
+    gap: 16px;
+  }
+}
 .logo__figure {
   display: flex;
   align-items: center;
@@ -65,6 +115,11 @@ img {
   width: 35px;
   height: auto;
 }
+@media (max-width: 992px) {
+  .logo__figure-image {
+    width: 25px;
+  }
+}
 .logo__text {
   display: flex;
   flex-direction: column;
@@ -77,6 +132,12 @@ img {
   text-transform: uppercase;
   color: #2d2d2d;
 }
+@media (max-width: 992px) {
+  .logo__text-name {
+    font-weight: 600;
+    font-size: 19px;
+  }
+}
 .logo__text-slogan {
   font-weight: 400;
   font-size: 9px;
@@ -84,6 +145,12 @@ img {
   text-transform: uppercase;
   color: #878787;
 }
+@media (max-width: 992px) {
+  .logo__text-slogan {
+    font-weight: 400;
+    font-size: 7px;
+  }
+}
 
 .social-link {
   display: inline-block;
@@ -93,6 +160,12 @@ img {
   background-position: center;
   background-repeat: no-repeat;
 }
+@media (max-width: 992px) {
+  .social-link {
+    height: 23px;
+    width: 23px;
+  }
+}
 .social-link--whatsapp {
   background-image: url(../img/icons/whatsapp.svg);
   background-color: #2aa81a;
@@ -110,11 +183,33 @@ img {
 .social-link--phone {
   width: auto;
   height: auto;
-  margin-left: 17px;
   font-weight: 600;
   font-size: 24px;
   color: #2d2d2d;
 }
+@media (max-width: 1240px) {
+  .social-link--phone {
+    font-size: 20px;
+  }
+}
+@media (max-width: 992px) {
+  .social-link--phone {
+    background-color: #609eff;
+    background-image: url(../img/icons/phone.svg);
+    height: 23px;
+    width: 23px;
+  }
+}
+@media (max-width: 992px) {
+  .social-link--phone:active {
+    background-color: #3081ff;
+  }
+}
+@media (max-width: 992px) {
+  .social-link--phone > * {
+    display: none;
+  }
+}
 
 .button {
   border-radius: 100px;
@@ -125,33 +220,114 @@ img {
 .button--order {
   display: inline-block;
   padding: 14px 29px;
+  color: #878787;
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.01em;
   border: 1px solid #cacaca;
 }
+.button--order:hover {
+  color: #ffffff;
+  border-color: #609eff;
+  background-color: #609eff;
+}
+.button--order:active {
+  border-color: #3081ff;
+  background-color: #3081ff;
+}
 
 .header {
   padding: 26px 0 29px;
 }
+@media (max-width: 992px) {
+  .header {
+    padding: 17px 0 20px;
+  }
+}
 .header .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
 }
+@media (max-width: 992px) {
+  .header .container {
+    gap: 16px;
+  }
+}
 .header__nav {
   display: flex;
   align-items: center;
   gap: 36px;
   padding: 0 30px 0 35px;
 }
+@media (max-width: 1240px) {
+  .header__nav {
+    flex: 1 1 auto;
+    justify-content: space-around;
+    gap: 16px;
+    padding: 0;
+  }
+}
+@media (max-width: 992px) {
+  .header__nav {
+    display: none;
+  }
+}
 .header__nav-link {
   font-weight: 400;
   font-size: 15px;
 }
+@media (max-width: 1240px) {
+  .header__nav-link {
+    font-size: 14px;
+  }
+}
 .header__social {
   display: flex;
   align-items: center;
   gap: 17px;
+}
+@media (max-width: 992px) {
+  .header__social {
+    gap: 13px;
+  }
+}
+.header__social .social-link--phone {
+  margin-left: 17px;
+}
+@media (max-width: 1240px) {
+  .header__social .social-link--phone {
+    margin-left: 0;
+  }
+}
+.header__buttons {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+}
+@media (max-width: 576px) {
+  .header__buttons .button--order {
+    display: none;
+  }
+}
+.header__burger {
+  display: none;
+  height: 30px;
+  width: 30px;
+  border: none;
+  border-radius: 30px;
+  background: url(../img/icons/burger.svg) center no-repeat;
+  background-color: #609eff;
+  transition: all ease-in-out 0.1s;
+  cursor: pointer;
+}
+@media (max-width: 992px) {
+  .header__burger {
+    display: inline-block;
+    background-color: #609eff;
+  }
+}
+.header__burger:active {
+  background-color: #3081ff;
 }

assets/img/icons/burger.svg

@@ -0,0 +1,5 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2891 2.72605C13.6436 2.7636 13.9922 2.94716 14.1445 3.18079C14.2148 3.28509 14.2236 3.32473 14.2236 3.51873C14.2236 3.71689 14.2148 3.75027 14.1416 3.85666C14.0303 4.01728 13.8281 4.15704 13.5938 4.23631L13.4033 4.30097L7.55859 4.30723C2.27344 4.3114 1.70215 4.30932 1.55566 4.27803C1.21875 4.20919 0.93457 4.01728 0.814453 3.7753C0.732422 3.60634 0.74707 3.34767 0.855469 3.18497C1.0166 2.93465 1.3418 2.76568 1.73145 2.72605C1.95703 2.7031 13.0664 2.7031 13.2891 2.72605Z" fill="white"/>
+<path d="M13.4531 7.56014C13.7666 7.63308 14.0039 7.77896 14.1416 7.98945C14.2148 8.0999 14.2236 8.13741 14.2236 8.32289C14.2236 8.50419 14.2148 8.54587 14.1445 8.65007C14.0537 8.79179 13.8691 8.93767 13.6963 9.00852C13.4092 9.12939 13.5352 9.12523 9.75586 9.12523C6.97266 9.12523 6.25195 9.11897 6.12012 9.09605C5.54883 9.00227 5.16797 8.59381 5.27051 8.19368C5.34082 7.92068 5.56055 7.71436 5.91211 7.59766L6.1084 7.53097L9.69727 7.5268C13.0986 7.52263 13.2949 7.52472 13.4531 7.56014Z" fill="white"/>
+<path d="M13.4501 12.0262C13.7655 12.0986 14.0751 12.3304 14.1715 12.5665C14.2416 12.743 14.2153 12.9961 14.1072 13.1556C13.9992 13.3151 13.8035 13.4576 13.5815 13.5384L13.4063 13.6001H7.49212H1.57795L1.41148 13.5427C1.19536 13.4704 0.985075 13.3151 0.874093 13.1535C0.798158 13.0365 0.789396 13.0067 0.789396 12.8025C0.789396 12.5984 0.798158 12.5686 0.874093 12.4516C0.985075 12.29 1.18075 12.1475 1.40272 12.0667L1.57795 12.005L7.44831 12.0007C12.4133 11.9986 13.3391 12.0007 13.4501 12.0262Z" fill="white"/>
+</svg>

assets/scss/_b-reset.scss

@@ -1,6 +1,72 @@
+@font-face {
+  font-family: 'Gilroy';
+  src: url('../fonts/Gilroy-Light.eot');
+  src: local('Gilroy Light'), local('Gilroy-Light'),
+    url('../fonts/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Gilroy-Light.woff') format('woff'),
+    url('../fonts/Gilroy-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Gilroy';
+  src: url('../fonts/Gilroy-Regular.eot');
+  src: local('Gilroy Regular'), local('Gilroy-Regular'),
+    url('../fonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Gilroy-Regular.woff') format('woff'),
+    url('../fonts/Gilroy-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Gilroy';
+  src: url('../fonts/Gilroy-RegularItalic.eot');
+  src: local('Gilroy Regular Italic'), local('Gilroy-RegularItalic'),
+      url('../fonts/Gilroy-RegularItalic.eot?#iefix') format('embedded-opentype'),
+      url('../fonts/Gilroy-RegularItalic.woff') format('woff'),
+      url('../fonts/Gilroy-RegularItalic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Gilroy';
+  src: url('../fonts/Gilroy-Medium.eot');
+  src: local('Gilroy Medium'), local('Gilroy-Medium'),
+    url('../fonts/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Gilroy-Medium.woff') format('woff'),
+    url('../fonts/Gilroy-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Gilroy';
+  src: url('../fonts/Gilroy-SemiBold.eot');
+  src: local('Gilroy SemiBold'), local('Gilroy-SemiBold'),
+    url('../fonts/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Gilroy-SemiBold.woff') format('woff'),
+    url('../fonts/Gilroy-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Gilroy';
+  src: url('../fonts/Gilroy-Bold.eot');
+  src: local('Gilroy Bold'), local('Gilroy-Bold'),
+    url('../fonts/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Gilroy-Bold.woff') format('woff'),
+    url('../fonts/Gilroy-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
 html {
   font-size: 16px;
-  font-family: 'Montserrat', sans-serif;
+  font-family: 'Gilroy', sans-serif;
   font-weight: 400;
   font-style: normal;
   scroll-behavior: smooth;
@@ -18,7 +84,7 @@ a,
 button,
 input,
 textarea {
-  font-family: 'Montserrat', sans-serif;
+  font-family: 'Gilroy', sans-serif;
   text-decoration: none;
 }
 

assets/scss/_l-header.scss

@@ -1,11 +1,19 @@
 .header {
   padding: 26px 0 29px;
 
+  @include laptop {
+    padding: 17px 0 20px;
+  }
+
   & .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
+
+    @include laptop {
+      gap: 16px;
+    }
   }
 
   &__nav {
@@ -14,9 +22,24 @@
     gap: 36px;
     padding: 0 30px 0 35px;
 
+    @include desktop {
+      flex: 1 1 auto;
+      justify-content: space-around;
+      gap: 16px;
+      padding: 0;
+    }
+
+    @include laptop {
+      display: none;
+    }
+
     &-link {
       font-weight: 400;
       font-size: 15px;
+
+      @include desktop {
+        font-size: 14px;
+      }
     }
   }
 
@@ -24,5 +47,50 @@
     display: flex;
     align-items: center;
     gap: 17px;
+
+    @include laptop {
+      gap: 13px;
+    }
+
+    & .social-link--phone {
+      margin-left: 17px;
+
+      @include desktop {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    align-items: center;
+    gap: 13px;
+
+    & .button--order {
+      @include mobile {
+        display: none;
+      }
+    }
+  }
+
+  &__burger {
+    display: none;
+    height: 30px;
+    width: 30px;
+    border: none;
+    border-radius: 30px;
+    background: url(../img/icons/burger.svg) center no-repeat;
+    background-color: $blue;
+    transition: all ease-in-out 0.1s;
+    cursor: pointer;
+
+    @include laptop {
+      display: inline-block;
+      background-color: $blue;
+    }
+
+    &:active {
+      background-color: $darkblue;
+    }
   }
 }

assets/scss/_m-button.scss

@@ -7,9 +7,21 @@
   &--order {
     display: inline-block;
     padding: 14px 29px;
+    color: $grey;
     font-weight: 500;
     font-size: 14px;
     letter-spacing: 0.01em;
-    border: 1px solid #cacaca;
+    border: 1px solid $lightgrey;
+
+    &:hover {
+      color: $white;
+      border-color: $blue;
+      background-color: $blue;
+    }
+
+    &:active {
+      border-color: $darkblue;
+      background-color: $darkblue;
+    }
   }
 }

assets/scss/_m-logo.scss

@@ -1,8 +1,14 @@
 .logo {
+  flex: 0 0 auto;
+
   &__link {
     display: flex;
     align-items: center;
     gap: 22px;
+
+    @include desktop {
+      gap: 16px;
+    }
   }
 
   &__figure {
@@ -15,6 +21,10 @@
       max-width: 100%;
       width: 35px;
       height: auto;
+
+      @include laptop {
+        width: 25px;
+      }
     }
   }
 
@@ -29,6 +39,11 @@
       letter-spacing: 0.04em;
       text-transform: uppercase;
       color: $black;
+
+      @include laptop {
+        font-weight: 600;
+        font-size: 19px;
+      }
     }
 
     &-slogan {
@@ -37,6 +52,11 @@
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: $grey;
+
+      @include laptop {
+        font-weight: 400;
+        font-size: 7px;
+      }
     }
   }
 }

assets/scss/_m-social-link.scss

@@ -6,6 +6,11 @@
   background-position: center;
   background-repeat: no-repeat;
 
+  @include laptop {
+    height: 23px;
+    width: 23px;
+  }
+
   &--whatsapp {
     background-image: url(../img/icons/whatsapp.svg);
     background-color: #2aa81a;
@@ -27,9 +32,31 @@
   &--phone {
     width: auto;
     height: auto;
-    margin-left: 17px;
     font-weight: 600;
     font-size: 24px;
     color: $black;
+
+    @include desktop {
+      font-size: 20px;
+    }
+
+    @include laptop {
+      background-color: $blue;
+      background-image: url(../img/icons/phone.svg);
+      height: 23px;
+      width: 23px;
+    }
+
+    &:active {
+      @include laptop {
+        background-color: $darkblue;
+      }
+    }
+
+    & > * {
+      @include laptop {
+        display: none;
+      }
+    }
   }
 }

index.html

@@ -35,11 +35,15 @@
         <div class="header__social">
           <a class="social-link social-link--whatsapp" href="#"></a>
           <a class="social-link social-link--tg" href="#"></a>
-          <a class="social-link social-link--phone" href="tel:88001012127">8 (800) 101-21-27</a>
+          <a class="social-link social-link--phone" href="tel:88001012127">
+            <span>8 (800) 101-21-27</span>
+          </a>
         </div>
 
         <div class="header__buttons">
-            <button class="button button--order">Заказать звонок</button>
+          <button class="button button--order">Заказать звонок</button>
+
+          <button class="header__burger"></button>
         </div>
       </div>
     </header>