Updated header

mate-academy · Dec 3, 2024 · 5f9b84b · 5f9b84b
1 parent 969f7de
commit 5f9b84b
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 56 deletions.
diff --git a/src/index.html b/src/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
+    <meta charset="utf-8" />
     <meta
       name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
@@ -20,87 +20,88 @@
       href="https://fonts.gstatic.com"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
       rel="stylesheet"
     />
     <link
       rel="stylesheet"
-      href="./style.css"
+      href="style.css"
     />
   </head>
   <body>
-    <h1>Moyo header</h1>
-    <header class="container">
-      <div class="nav__logo">
-        <a href="https://example.com">
-          <img
-            src="images/logo.png"
-            alt="Logo"
-          />
-        </a>
-      </div>
+    <header class="header">
+      <a
+        class="header-link"
+        href="index.html"
+      >
+        <img
+          src="images/logo.png"
+          alt="moyo_logo"
+        />
+      </a>
       <nav class="nav">
-        <ul class="nav__list">
-          <li class="nav__item">
+        <ul class="nav-list">
+          <li class="nav-item">
             <a
+              class="is-active nav-link"
               href="#"
-              class="nav__link is-active"
             >
               Apple
             </a>
           </li>
-          <li class="nav__item">
+          <li class="nav-item">
             <a
+              class="nav-link"
               href="#"
-              class="nav__link"
             >
               Samsung
             </a>
           </li>
-          <li class="nav__item">
+          <li class="nav-item">
             <a
+              class="nav-link"
               href="#"
-              class="nav__link"
             >
               Smartphones
             </a>
           </li>
-          <li class="nav__item">
+          <li class="nav-item">
             <a
+              class="nav-link"
               href="#"
-              class="nav__link"
+              data-qa="hover"
             >
               Laptops & Computers
             </a>
           </li>
-          <li class="nav__item">
+          <li class="nav-item">
             <a
+              class="nav-link"
               href="#"
-              class="nav__link"
             >
               Gadgets
             </a>
           </li>
-          <li class="nav__item">
+          <li class="nav-item">
             <a
+              class="nav-link"
               href="#"
-              class="nav__link"
             >
               Tablets
             </a>
           </li>
-          <li class="nav__item">
+          <li class="nav-item">
             <a
+              class="nav-link"
               href="#"
-              class="nav__link"
             >
               Photo
             </a>
           </li>
-          <li class="nav__item">
+          <li class="nav-item">
             <a
+              class="nav-link"
               href="#"
-              class="nav__link"
             >
               Video
             </a>

diff --git a/src/style.css b/src/style.css
@@ -1,53 +1,70 @@
 html {
   --nav-hover-color: #00acdc;
   --nav-color: black;
-  --header-bg-color: #fff
+  --header-bg-color: #fff;
 }
 
 body {
-  font-family: Roboto, sans-serif;
   margin: 0;
-  padding: 0;
+  font-family: Roboto, sans-serif;
   font-size: 12px;
   font-weight: 500;
 }
 
-.container {
-  display: flex;
-  flex-direction: row;
+.header {
+  background-color: var(--header-bg-color);
   justify-content: space-between;
   align-items: center;
-  width: 100%;
+  padding: 0 50px;
+  display: flex;
 }
 
-.nav__list {
-  display: flex;
-  list-style: none;
-  padding: 0;
+.header-link {
+  width: 40px;
+  height: 40px;
+}
+
+.nav {
+  height: 60px;
+}
+
+.nav-list {
   margin: 0;
+  padding: 0;
+  display: flex;
 }
 
-.nav__link {
-  text-decoration: none;
-  color: #000;
-  padding: 10px;
+.nav-item {
+  list-style: none;
 }
 
-.nav__logo {
-  width: 40px;
-  height: 40px;
-  padding-left: 50px;
-  padding-top: 10px;
-  padding-bottom: 10px;
+.nav-item:not(:last-child) {
+  margin-right: 20px;
 }
 
-nav {
-  display: flex;
-  justify-content: space-between;
+.nav-link {
+  text-transform: uppercase;
+  color: var(--nav-color);
+  justify-content: center;
   align-items: center;
-  padding-right: 50px;
+  line-height: 60px;
+  text-decoration: none;
+  display: flex;
+  position: relative;
 }
 
-.is-active {
+.nav-link:hover,
+.nav-link.is-active {
   color: var(--nav-hover-color);
 }
+
+.nav-link.is-active::after {
+  content: '';
+  background-color: var(--nav-hover-color);
+  border-radius: 8px;
+  height: 4px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}