fixed code according to requirements and code review

mate-academy · Sep 10, 2024 · 45377b3 · 45377b3
1 parent e88b836
commit 45377b3
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 38 deletions.
diff --git a/src/index.html b/src/index.html
@@ -24,56 +24,102 @@
       href="https://fonts.gstatic.com"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500&display=swap"
       rel="stylesheet"
     />
   </head>
+
   <body>
-    <header id="top">
-      <div class="imgContainer">
+    <header
+      id="top"
+      class="header"
+    >
+      <div class="headerImgContainer">
         <a href="#top">
           <img
-            class="img"
+            class="headerImg"
             src="./images/logo.png"
-            alt="logo"
+            alt="Moyo header logo"
           />
         </a>
       </div>
 
-      <nav>
-        <ul>
-          <li>
+      <nav class="navigation">
+        <ul class="list">
+          <li class="listItem">
             <a
               href="#1"
-              class="is-active"
+              class="is-active link"
             >
               apple
             </a>
           </li>
-          <li><a href="#2">samsung</a></li>
-          <li><a href="#3">smartphones</a></li>
-          <li>
+
+          <li class="listItem">
+            <a
+              href="#2"
+              class="link"
+            >
+              samsung
+            </a>
+          </li>
+
+          <li class="listItem">
+            <a
+              href="#3"
+              class="link"
+            >
+              smartphones
+            </a>
+          </li>
+
+          <li class="listItem">
             <a
               href="#4"
               data-qa="hover"
+              class="link"
             >
               laptops & computers
             </a>
           </li>
-          <li><a href="#5">gadgets</a></li>
-          <li><a href="#6">tablets</a></li>
-          <li><a href="#7">photo</a></li>
-          <li><a href="#8">video</a></li>
+
+          <li class="listItem">
+            <a
+              href="#5"
+              class="link"
+            >
+              gadgets
+            </a>
+          </li>
+
+          <li class="listItem">
+            <a
+              href="#6"
+              class="link"
+            >
+              tablets
+            </a>
+          </li>
+
+          <li class="listItem">
+            <a
+              href="#7"
+              class="link"
+            >
+              photo
+            </a>
+          </li>
+
+          <li class="listItem">
+            <a
+              href="#8"
+              class="link"
+            >
+              video
+            </a>
+          </li>
         </ul>
       </nav>
     </header>
-    <div id="1"></div>
-    <div id="2"></div>
-    <div id="3"></div>
-    <div id="4"></div>
-    <div id="5"></div>
-    <div id="6"></div>
-    <div id="7"></div>
-    <div id="8"></div>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -13,41 +13,63 @@ body {
   margin: 0;
 }
 
-header {
-  height: 60px;
+.header {
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
 }
 
-.imgContainer {
-  margin: 10px 0 10px 50px;
+.headerImgContainer {
+  margin-left: 50px;
+}
+
+.navigation {
+  width: 60%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-ul {
+.list {
+  width: 100%;
   display: flex;
-  justify-content: space-evenly;
-  margin-right: 50px;
+  justify-content: space-around;
 }
 
-li {
+.listItem {
   list-style: none;
-  height: 15px;
-  margin-left: 13px;
+  display: flex;
+  align-items: center;
 }
 
-a {
+.link {
   text-decoration: none;
   color: inherit;
 }
 
-a.is-active {
+.link.is-active {
+  color: var(--my-color);
+  width: 100%;
+  position: relative;
+  display: inline-block;
+}
+
+.link.is-active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -23;
+  border-radius: 2px;
+  height: 4px;
+  width: 100%;
+  background-color: var(--my-color);
   text-decoration: underline 4px;
   text-underline-offset: 1.2rem;
-  color: var(--my-color);
 }
 
-a:hover {
+.link:hover {
   color: var(--my-color);
 }