get right color varieable

Viktor-1995 · Viktor-1995 · commit 936b41939daa · 2024-11-25T22:15:54.000+02:00
diff --git a/src/index.html b/src/index.html
@@ -35,7 +35,7 @@
   <body>
     <header class="header">
       <div class="nav-logo">
-        <a href="home">
+        <a href="#home">
           <img
             src="./images/logo.png"
             alt="Moyo logo"
@@ -48,26 +48,26 @@
           <ul class="nav-items">
             <li>
               <a
-                href="apple"
+                href="#apple"
                 class="is-active"
               >
                 Apple
               </a>
             </li>
-            <li><a href="samsung">Samsung</a></li>
-            <li><a href="smartphones">Smartphones</a></li>
+            <li><a href="#samsung">Samsung</a></li>
+            <li><a href="#smartphones">Smartphones</a></li>
             <li>
               <a
-                href="Laptops"
+                href="#Laptops"
                 data-qa="hover"
               >
                 Laptops & Computers
               </a>
             </li>
-            <li><a href="gadgets">Gadgets</a></li>
-            <li><a href="tablets">Tablets</a></li>
-            <li><a href="photo">Photo</a></li>
-            <li><a href="video">Video</a></li>
+            <li><a href="#gadgets">Gadgets</a></li>
+            <li><a href="#tablets">Tablets</a></li>
+            <li><a href="#photo">Photo</a></li>
+            <li><a href="#video">Video</a></li>
           </ul>
         </div>
       </nav>
diff --git a/src/style.css b/src/style.css
@@ -1,3 +1,7 @@
+:root {
+  --blue-link-color: #00acdc;
+}
+
 body {
   margin: 0;
   font-family: Roboto, sans-serif;
@@ -60,15 +64,15 @@ a {
 }
 
 a:hover {
-  color: #00acdc;
+  color: var(--blue-link-color);
 }
 
 a:visited {
   color: #000;
 }
 
 li > .is-active {
-  color: #00acdc;
+  color: var(--blue-link-color);
 }
 
 .is-active::after {
@@ -77,7 +81,7 @@ li > .is-active {
   display: inline-block;
   height: 4px;
   width: 100%;
-  background-color: #00acdc;
+  background-color: var(--blue-link-color);
   border-radius: 8px;
   bottom: 0;
   left: 0;
