fixed solution

mate-academy · Sep 9, 2024 · 35bca4f · 35bca4f
1 parent 54b2875
commit 35bca4f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 25 deletions.
diff --git a/src/index.html b/src/index.html
@@ -27,15 +27,11 @@
       rel="stylesheet"
       href="./style.css"
     />
-    <link
-      rel="stylesheet"
-      href="reset.css"
-    />
   </head>
   <body>
     <header class="header">
       <a
-        class="logo"
+        class="header__link"
         href="images/logo.png"
       >
         <img
@@ -44,10 +40,9 @@
         />
       </a>
       <nav class="nav">
-        <ul class="ul">
+        <ul class="nav__list">
           <li class="nav__item">
             <a class="nav__link color is-active">Apple</a>
-            <div class="is-active"></div>
           </li>
 
           <li class="nav__item">
@@ -79,9 +74,5 @@
         </ul>
       </nav>
     </header>
-    <main>
-      <div class="div"></div>
-    </main>
-    <footer></footer>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1,18 +1,17 @@
 body {
   margin: 0;
+
+  --active-color: #00acdc;
 }
 
 html {
   font-family: Roboto, sans-serif;
   font-size: 12px;
   font-weight: 500;
-  text-align: left;
   text-transform: uppercase;
-
-  --active-color: #00acdc;
 }
 
-header {
+.header {
   position: relative;
   display: flex;
   align-items: center;
@@ -21,13 +20,15 @@ header {
   padding: 0 50px;
 }
 
-.ul {
+.nav__list {
   display: flex;
   list-style: none;
   padding-left: 0;
+  margin: 0;
 }
 
 .nav__link {
+  position: relative;
   display: flex;
   height: 60px;
   margin-left: 20px;
@@ -44,19 +45,18 @@ header {
 }
 
 .color {
-  color: #00acdc;
+  color: var(--active-color);
 }
 
 a:hover {
   color: var(--active-color);
 }
 
-.data-qa:hover {
+.nav__link:hover {
   color: var(--active-color);
 }
 
-.logo {
-  position: absolut;
+.header__link {
   display: flex;
   width: 40px;
   height: 40px;
@@ -68,14 +68,13 @@ a:hover {
   content: '';
   display: block;
   height: 4px;
-  width: 37px;
-  background-color: #00acdc;
+  width: 100%;
+  background-color: var(--active-color);
   position: absolute;
   bottom: 0;
   border-radius: 8px;
 }
 
-div:hover::after {
-  outline: solid 1px;
-  text-decoration-color: var(--active-color);
+.header:hover {
+  outline: solid 3px var(--active-color);
 }