add task solution

mate-academy · Mar 12, 2024 · f99dbdd · f99dbdd
1 parent f859342
commit f99dbdd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 32 deletions.
diff --git a/src/index.html b/src/index.html
@@ -15,19 +15,6 @@
       rel="stylesheet"
       href="./style.css"
     />
-    <link
-      rel="preconnect"
-      href="https://fonts.googleapis.com"
-    />
-    <link
-      rel="preconnect"
-      href="https://fonts.gstatic.com"
-      crossorigin="anonymous"
-    />
-    <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"
-      rel="stylesheet"
-    />
   </head>
   <body>
     <header>
@@ -38,7 +25,7 @@
         />
       </div>
       <nav class="nav">
-        <ul class="list">
+        <ul class="nav__list">
           <li class="link">
             <a
               href="#"

diff --git a/src/style.css b/src/style.css
@@ -1,5 +1,9 @@
 @import '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&displ0ay=swap';
 
+:root {
+  --blue-color: #00acdc;
+}
+
 body {
   margin: 0;
   font-family: Roboto, sans-serif;
@@ -32,7 +36,7 @@ img {
   margin-left: 20px;
 }
 
-.list {
+.nav__list {
   margin: 0;
   display: flex;
   list-style: none;
@@ -43,46 +47,34 @@ img {
   text-transform: uppercase;
   text-align: center;
   align-items: center;
-  height: 60px;
   font-size: 12px;
   font-weight: 500;
   line-height: 14px;
   display: flex;
 }
 
-.element::after {
-  content: '';
-  position: absolute;
-  background-color: #00acdc;
-  border-radius: 8px;
-  height: 4px;
-  width: 0;
-  left: 0;
-  bottom: 0;
-}
-
 .element:active {
-  color: #00acdc;
-  box-shadow: 0 4px 0 #00acdc;
+  color: var(--blue-color);
 }
 
 .element:hover {
-  color: #00acdc;
+  color: var(--blue-color);
 }
 
 a {
+  height: 60px;
   text-decoration: none;
 }
 
 .is-active {
   position: relative;
-  color: #00acdc;
+  color: var(--blue-color);
 }
 
 .is-active::after {
   content: '';
   position: absolute;
-  background-color: #00acdc;
+  background-color: var(--blue-color);
   border-radius: 8px;
   height: 4px;
   width: 100%;