re-review rework

mate-academy · Dec 3, 2024 · 7d2a85e · 7d2a85e
1 parent fbfa365
commit 7d2a85e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 58 deletions.
diff --git a/src/index.html b/src/index.html
@@ -31,61 +31,30 @@
 
   <body>
     <header class="header">
-      <img
+      <a href="#">
+        <img
         class="logo"
         src="/src/images/logo.png"
         alt="Moyo logo"
-      />
+        />
+      </a>
       <nav class="navbar">
-        <a
-          href="#"
-          class="is-active nav-link nav-link-1"
-        >
-          APPLE
-        </a>
-        <a
-          href="#"
-          class="nav-margin nav-link"
-        >
-          SAMSUNG
-        </a>
-        <a
-          href="#"
-          class="nav-margin nav-link"
-        >
-          SMARTPHONES
-        </a>
-        <a
-          data-qa="hover"
-          href="#"
-          class="nav-margin nav-link nav-link-4"
-        >
-          LAPTOPS & COMPUTERS
-        </a>
-        <a
-          href="#"
-          class="nav-margin nav-link"
-        >
-          GADGETS
-        </a>
-        <a
-          href="#"
-          class="nav-margin nav-link"
-        >
-          TABLETS
-        </a>
-        <a
-          href="#"
-          class="nav-margin nav-link"
-        >
-          PHOTO
-        </a>
-        <a
-          href="#"
-          class="nav-link nav-link-8"
-        >
-          VIDEO
-        </a>
+        <ul class="list">
+          <li><a href="#" class="is-active nav-link nav-link-1">APPLE</a></li>
+          <li><a href="#" class="nav-margin nav-link">SAMSUNG</a></li>
+          <li><a href="#" class="nav-margin nav-link">SMARTPHONES</a></li>
+          <li>
+            <a
+            data-qa="hover"
+            href="#"
+            class="nav-margin nav-link"
+            >LAPTOPS & COMPUTERS</a>
+          </li>
+          <li><a href="#" class="nav-margin nav-link">GADGETS</a></li>
+          <li><a href="#" class="nav-margin nav-link">TABLETS</a></li>
+          <li><a href="#" class="nav-margin nav-link">PHOTO</a></li>
+          <li><a href="#" class="nav-link nav-link-8">VIDEO</a></li>
+        </ul>
       </nav>
     </header>
   </body>

diff --git a/src/style.css b/src/style.css
@@ -1,9 +1,12 @@
+html{
+  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+}
+
 body {
   margin: 0;
   padding: 0;
-  font-family: Roboto, serif;
-  font-size: 12px;
-  font-weight: 500;
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
 }
@@ -14,7 +17,7 @@ body {
   height: 60px;
   justify-content: space-between;
   padding: 0 50px;
-  align-items: baseline;
+  align-items: center;
 }
 
 .logo {
@@ -24,14 +27,25 @@ body {
 }
 
 .navbar {
-  margin: auto 0;
   display: flex;
-  line-height: 60px;
+  max-height: 60px;
+  align-items: center;
+}
+
+.list{
+  display: flex;
+  flex-direction: row;
+  text-decoration: none;
+  list-style: none;
+  min-height: 60px;
+  align-items: center;
 }
 
 .nav-link {
   text-decoration: none;
   color: black;
+  line-height: 60px;
+  display: grid;
 }
 
 .nav-margin {
@@ -55,12 +69,13 @@ body {
   position: relative;
 }
 
-.is-active::before {
+.is-active::after {
   content: '';
   width: 100%;
   height: 4px;
   border-radius: 8px;
   background-color: #00acdc;
   position: absolute;
   bottom: 0;
+  left: 0;
 }