header finish

src/index.html

@@ -38,31 +38,31 @@
         </a>
         <nav class="nav">
           <ul class="nav__list">
-            <li>
+            <li class="nav__item">
               <a
-                class="nav__link nav__link--is-active"
+                class="nav__link is-active"
                 href="#"
               >
                 Apple
               </a>
             </li>
-            <li>
+            <li class="nav__item">
               <a
                 class="nav__link"
                 href="#"
               >
                 Samsung
               </a>
             </li>
-            <li>
+            <li class="nav__item">
               <a
                 class="nav__link"
                 href="#"
               >
                 Smartphones
               </a>
             </li>
-            <li>
+            <li class="nav__item">
               <a
                 class="nav__link"
                 href="#"
@@ -71,31 +71,31 @@
                 Laptops & Computers
               </a>
             </li>
-            <li>
+            <li class="nav__item">
               <a
                 class="nav__link"
                 href="#"
               >
                 Gadgets
               </a>
             </li>
-            <li>
+            <li class="nav__item">
               <a
                 class="nav__link"
                 href="#"
               >
                 Tablets
               </a>
             </li>
-            <li>
+            <li class="nav__item">
               <a
                 class="nav__link"
                 href="#"
               >
                 Photo
               </a>
             </li>
-            <li>
+            <li class="nav__item">
               <a
                 class="nav__link"
                 href="#"

src/styles/base/_base.scss

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  font-family: Roboto, sans-serif;
+}

src/styles/base/_reset.scss

@@ -0,0 +1,7 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style-type: none;
+  text-decoration: none;
+}

src/styles/_variables.scss → src/styles/base/_variables.scss

@@ -1,2 +1,3 @@
 $header__black: #060b35;
 $header__blue: #00acdc;
+$header__box-shadow: rgba(0, 0, 0, 0.05);

src/styles/components/_header.scss

@@ -0,0 +1,57 @@
+@use '../base/variables' as var;
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 50px;
+  box-shadow: 0 2px 4px var.$header__box-shadow;
+
+  &__logo-link {
+    display: flex;
+  }
+}
+
+.nav {
+  &__item {
+    position: relative;
+    &:not(:first-child) {
+      margin-left: 20px;
+    }
+  }
+
+  &__list {
+    display: flex;
+    align-items: center;
+  }
+
+  &__link {
+    display: block;
+    font-size: 12px;
+    font-weight: 500;
+    color: var.$header__black;
+    height: 60px;
+    line-height: 60px;
+    text-transform: uppercase;
+
+    &.is-active {
+      color: var.$header__blue;
+
+      &::after {
+        position: absolute;
+        content: '';
+        background-color: var.$header__blue;
+        border-radius: 8px;
+        width: 100%;
+        height: 4px;
+        bottom: 0;
+        left: 0;
+      }
+    }
+
+    &:hover {
+      color: var.$header__blue;
+    }
+  }
+}

src/styles/index.scss

@@ -1,71 +1,4 @@
-@use '_variables' as var;
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  list-style-type: none;
-  text-decoration: none;
-}
-
-body {
-  margin: 0;
-  font-family: Roboto, sans-serif;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0 50px;
-
-  &__logo-link {
-    display: flex;
-  }
-}
-
-.nav {
-  li {
-    position: relative;
-    &:not(:first-child) {
-      margin-left: 20px;
-    }
-  }
-  &__list {
-    display: flex;
-    align-items: center;
-  }
-  &__link {
-    font-size: 12px;
-    font-weight: 500;
-    color: var.$header__black;
-    height: 60px;
-    line-height: 60px;
-    text-transform: uppercase;
-
-    &:not(:first-child) {
-      margin-left: 20px;
-    }
-
-    &:hover {
-      color: var.$header__blue;
-    }
-
-    &--is-active {
-      color: var.$header__blue;
-
-      &::after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 4px;
-        background-color: var.$header__blue;
-        border-radius: 8px;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-      }
-    }
-  }
-}
+@use './base/base';
+@use './base/reset';
+@use './base/variables' as var;
+@use './components/header';