add task solution

mate-academy · Sep 16, 2024 · e0fd3c1 · e0fd3c1
1 parent 948a9c8
commit e0fd3c1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/src/index.html b/src/index.html
@@ -50,6 +50,7 @@
               APPLE
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="#Samsung"
@@ -58,6 +59,7 @@
               SAMSUNG
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="#Smartphones"
@@ -66,6 +68,7 @@
               SMARTPHONES
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="#Laptops& Computers"
@@ -75,6 +78,7 @@
               Laptops & Computers
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="#Gadgets"
@@ -83,6 +87,7 @@
               GADGETS
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="#TABLETS"
@@ -91,6 +96,7 @@
               TABLETS
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="#Photo"
@@ -99,6 +105,7 @@
               PHOTO
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="#Video"

diff --git a/src/style.css b/src/style.css
@@ -1,14 +1,16 @@
 html {
   font-family: Roboto, sans-serif;
   font-style: normal;
+
+  --main-color: #00acdc;
 }
 
 body {
   padding: 0;
   margin: 0 auto;
 }
 
-header {
+.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -22,27 +24,20 @@ header {
   height: 40px;
 }
 
-.nav {
-  text-align: center;
-}
-
 .nav__list {
   display: flex;
 }
 
 .nav__item {
   list-style-type: none;
-  display: inline-block;
 }
 
 .nav__link {
   padding: 0;
   line-height: 60px;
   font-size: 12px;
   font-weight: 500;
-  align-items: center;
   display: inline-block;
-  position: relative;
   text-decoration: none;
   color: #000;
   margin-left: 20px;
@@ -51,12 +46,13 @@ header {
 }
 
 .nav__link:hover {
-  color: #00acdc;
+  color: var(--main-color);
 }
 
 .is-active {
   position: relative;
-  color: #00acdc;
+  font-weight: 500;
+  color: var(--main-color);
   margin-left: 0;
 }
 
@@ -65,7 +61,7 @@ header {
   content: '';
   width: 100%;
   height: 4px;
-  background: #00acdc;
+  background: var(--main-color);
   border-radius: 8px;
   position: absolute;
   bottom: 0;