fix the header

mate-academy · Apr 29, 2024 · 16f6a78 · 16f6a78
1 parent ea2fc1a
commit 16f6a78
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 24 deletions.
diff --git a/src/index.html b/src/index.html
@@ -40,53 +40,53 @@
         />
       </a>
       <nav class="nav">
-        <ul class="bar">
+        <ul class="nav__list">
           <a
             href="#"
-            class="bar__link is-active"
+            class="nav__link is-active"
           >
             Apple
           </a>
           <a
             href="#"
-            class="bar__link"
+            class="nav__link"
           >
             Samsung
           </a>
           <a
             href="#"
-            class="bar__link"
+            class="nav__link"
           >
             Smartphones
           </a>
           <a
             href="#"
-            class="bar__link"
+            class="nav__link"
             data-qa="hover"
           >
             Laptops &amp Computers
           </a>
           <a
             href="#"
-            class="bar__link"
+            class="nav__link"
           >
             Gadgets
           </a>
           <a
             href="#"
-            class="bar__link"
+            class="nav__link"
           >
             Tablets
           </a>
           <a
             href="#"
-            class="bar__link"
+            class="nav__link"
           >
             Photo
           </a>
           <a
             href="#"
-            class="bar__link"
+            class="nav__link"
           >
             Video
           </a>

diff --git a/src/style.css b/src/style.css
@@ -1,33 +1,30 @@
-html {
+:root {
   --active-color: #00acdc;
 }
 
-.logo {
-  padding-left: 50px;
-  margin-top: 10px;
+html {
+  font-family: Roboto, sans-serif;
+  font-weight: 500;
 }
 
 body {
   margin: 0;
-  font-family: Roboto, sans-serif;
-  font-weight: 500;
-  font-style: normal;
 }
 
-header {
+.header {
   display: flex;
   justify-content: space-between;
-  padding-right: 50px;
-  flex-direction: row;
+  padding: 0 50px;
+  align-items: center;
 }
 
-.bar {
+.nav__list {
   display: flex;
   margin: 0;
   padding: 0;
 }
 
-.bar__link {
+.nav__link {
   line-height: 60px;
   text-decoration: none;
   font-style: normal;
@@ -37,11 +34,11 @@ header {
   text-transform: uppercase;
 }
 
-.bar__link:last-child {
+.nav__link:last-child {
   margin-right: 0;
 }
 
-.bar__link:hover {
+.nav__link:hover {
   color: var(--active-color);
 }
 
@@ -52,7 +49,6 @@ header {
 
 .is-active::after {
   position: absolute;
-  top: 56px;
   bottom: 0;
   display: block;
   content: '';