fixed the issues

mate-academy · Dec 27, 2024 · c548e61 · c548e61
1 parent e11f432
commit c548e61
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 25 deletions.
diff --git a/src/index.html b/src/index.html
@@ -24,7 +24,7 @@
       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>
@@ -38,65 +38,65 @@
         />
       </a>
       <nav class="navigation">
-        <ul>
-          <li>
+        <ul class="nav__list">
+          <li class="list_item">
             <a
               href="#apple"
               class="nav-link is-active"
             >
               apple
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#samsung"
               class="nav-link"
             >
               samsung
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#smartphones"
               class="nav-link"
             >
               smartphones
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               data-qa="hover"
-              class="nav-link computers-link"
+              class="nav-link"
               href="#computers"
             >
               laptops & computers
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#gadgets"
               class="nav-link"
             >
               gadgets
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#tablets"
               class="nav-link"
             >
               tablets
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#photo"
               class="nav-link"
             >
               photo
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#video"
               class="nav-link"

diff --git a/src/style.css b/src/style.css
@@ -5,31 +5,28 @@ html {
   font-style: normal;
   font-weight: 500;
   text-transform: uppercase;
+
+  --link-color: #00acdc;
 }
 
 * {
   margin: 0;
 }
 
-li {
+.list_item {
   list-style: none;
   margin-left: 20px;
 }
 
-li:first-child {
+.list_item:first-child {
   margin-left: 0;
 }
 
-ul {
+.nav__list {
   padding: 0;
   display: flex;
 }
 
-a {
-  text-decoration: none;
-  color: black;
-}
-
 .header {
   position: relative;
   width: 100%;
@@ -51,7 +48,7 @@ a {
 
 .is-active {
   position: relative;
-  color: #00acdc;
+  color: var(--link-color);
 }
 
 .is-active::after {
@@ -60,19 +57,21 @@ a {
   position: absolute;
   height: 4px;
   width: 100%;
-  background-color: #00acdc;
+  background-color: var(--link-color);
   bottom: 0;
   border-radius: 8px;
 }
 
-.computers-link:hover {
-  color: #00acdc;
-}
-
 .nav-link {
   line-height: 60px;
   height: 60px;
   display: inline-block;
+  text-decoration: none;
+  color: black;
+}
+
+.nav-link:hover {
+  color: var(--link-color);
 }
 
 .navigation {