feat: added header

assets/scss/_b-mixins.scss

@@ -0,0 +1,29 @@
+@mixin desktop {
+  @media (max-width: 1240px) {
+    @content;
+  }
+}
+
+@mixin laptop {
+  @media (max-width: 992px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (max-width: 768px) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: 576px) {
+    @content;
+  }
+}
+
+@mixin mobilesm {
+  @media (max-width: 400px) {
+    @content;
+  }
+}

assets/scss/_b-reset.scss

@@ -0,0 +1,44 @@
+html {
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  scroll-behavior: smooth;
+}
+
+body {
+  position: relative;
+  margin: 0;
+  overflow-y: scroll;
+  color: $black;
+  background-color: $greybg;
+}
+
+a,
+button,
+input,
+textarea {
+  font-family: 'Montserrat', sans-serif;
+  text-decoration: none;
+}
+
+a {
+  transition: all ease-in-out 0.1s;
+
+  &:hover {
+    color: $blue;
+  }
+
+  &:active {
+    color: $darkblue;
+  }
+}
+
+figure {
+  margin: 0;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}

assets/scss/_b-vars.scss

@@ -0,0 +1,9 @@
+// colors
+
+$black: #2d2d2d;
+$grey: #878787;
+$lightgrey: #cacaca;
+$blue: #609eff;
+$darkblue: #3081ff;
+$greybg: #ededed;
+$white: #ffffff;

assets/scss/_l-footer.scss

@@ -0,0 +1,2 @@
+.footer {
+}

assets/scss/_l-header.scss

@@ -0,0 +1,28 @@
+.header {
+  padding: 26px 0 29px;
+
+  & .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+  }
+
+  &__nav {
+    display: flex;
+    align-items: center;
+    gap: 36px;
+    padding: 0 30px 0 35px;
+
+    &-link {
+      font-weight: 400;
+      font-size: 15px;
+    }
+  }
+
+  &__social {
+    display: flex;
+    align-items: center;
+    gap: 17px;
+  }
+}

assets/scss/_l-main.scss

@@ -0,0 +1,2 @@
+.main {
+}

assets/scss/_m-button.scss

@@ -0,0 +1,15 @@
+.button {
+  border-radius: 100px;
+  background-color: $white;
+  transition: all ease-in-out 0.1s;
+  cursor: pointer;
+
+  &--order {
+    display: inline-block;
+    padding: 14px 29px;
+    font-weight: 500;
+    font-size: 14px;
+    letter-spacing: 0.01em;
+    border: 1px solid #cacaca;
+  }
+}

assets/scss/_m-container.scss

@@ -0,0 +1,7 @@
+.container {
+  max-width: 1236px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 15px;
+  box-sizing: border-box;
+}

assets/scss/_m-logo.scss

@@ -0,0 +1,42 @@
+.logo {
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: 22px;
+  }
+
+  &__figure {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-image {
+      display: block;
+      max-width: 100%;
+      width: 35px;
+      height: auto;
+    }
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    &-name {
+      font-weight: 600;
+      font-size: 26px;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: $black;
+    }
+
+    &-slogan {
+      font-weight: 400;
+      font-size: 9px;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: $grey;
+    }
+  }
+}

assets/scss/_m-social-link.scss

@@ -0,0 +1,35 @@
+.social-link {
+  display: inline-block;
+  height: 29px;
+  width: 29px;
+  border-radius: 32px;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  &--whatsapp {
+    background-image: url(../img/icons/whatsapp.svg);
+    background-color: #2aa81a;
+
+    &:active {
+      background-color: #42d030;
+    }
+  }
+
+  &--tg {
+    background-image: url(../img/icons/telegram.svg);
+    background-color: #178ec9;
+
+    &:active {
+      background-color: #45b3ea;
+    }
+  }
+
+  &--phone {
+    width: auto;
+    height: auto;
+    margin-left: 17px;
+    font-weight: 600;
+    font-size: 24px;
+    color: $black;
+  }
+}

assets/scss/index.scss

@@ -0,0 +1,18 @@
+// Base
+
+@import './b-vars';
+@import './b-mixins';
+@import './b-reset';
+
+// Modules
+
+@import './m-container';
+@import './m-logo';
+@import './m-social-link';
+@import './m-button';
+
+// Layouts
+
+@import './l-header';
+@import './l-main';
+@import './l-footer';