add moyo header

mate-academy · Apr 24, 2024 · 99ebba6 · 99ebba6
1 parent 7b40e19
commit 99ebba6
Show file tree

Hide file tree

Showing 2 changed files with 175 additions and 40 deletions.
diff --git a/src/index.html b/src/index.html
@@ -6,35 +6,62 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <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">
-
-    <link rel="stylesheet" href="style.css">
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+    />
+    <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"
+    />
+    <link
+      rel="stylesheet"
+      href="style.css"
+    />
     <title>MOYO</title>
   </head>
   <body>
-    <nav class="navbar">
+    <header class="page_header">
       <div class="container">
-        <img 
-        src="./images/logo.png" 
-        alt="moyo_icon" 
-        class="navbar-icon">
-      </div>
-
-      <div class="navbar-wrap">
-        <ul class="navbar-menu">
-          <li><a href="#" class="nav__link active">Apple</a></li>
-          <li><a href="#">Samsung</a></li>
-          <li><a href="#">Smartphones</a></li>
-          <li><a href="#" class="nav__link active">Laptops & Computers</a></li>
-          <li><a href="#">Gadgets</a></li>
-          <li><a href="#">Tablets</a></li>
-          <li><a href="#">Photo</a></li>
-          <li><a href="#">Video</a></li>
-        </ul>
+        <img
+          src="./images/logo.png"
+          alt="moyo_icon"
+          class="navbar-icon"
+        />
       </div>
-    </nav>
-    <span class="line"></span>
+      <nav class="navbar">
+        <div class="navbar-wrap">
+          <ul class="navbar-menu">
+            <li>
+              <a
+                href="#"
+                class="nav__link active"
+              >
+                Apple
+              </a>
+            </li>
+            <li><a href="#">Samsung</a></li>
+            <li><a href="#">Smartphones</a></li>
+            <li>
+              <a
+                data-qa="hover"
+                href="#"
+                class="nav__link"
+              >
+                Laptops & Computers
+              </a>
+            </li>
+            <li><a href="#">Gadgets</a></li>
+            <li><a href="#">Tablets</a></li>
+            <li><a href="#">Photo</a></li>
+            <li><a href="#">Video</a></li>
+          </ul>
+        </div>
+      </nav>
+    </header>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1,18 +1,117 @@
 body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.page_header {
+  font-family: Roboto, sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 12px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  height: 60px;
+}
+
+.navbar-icon {
+  width: 40px;
+  height: 40px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.navbar-menu {
+  list-style-type: none;
+  padding-left: 0;
+  margin-bottom: 15px;
+  margin-right: 50px;
+}
+
+a {
+  cursor: pointer;
+  color: #000;
+  text-transform: uppercase;
+}
+
+a:hover {
+  color: #00acdc;
+}
+
+.navbar-menu li a {
+  display: inline-block;
+  text-decoration: none;
+  margin-left: 20px;
+}
+
+.navbar-menu li {
+  display: inline-block;
+}
+
+img {
+  cursor: pointer;
+}
+
+.container {
+  margin-left: 50px;
+}
+
+.nav__link {
+  color: #00acdc;
+}
+
+.nav__link.active::after {
+  content: '';
+  display: block;
+  width: 37px;
+  height: 4px;
+  border-radius: 8px;
+  background-color: #00acdc;
+  position: absolute;
+  margin-top: 18.5px;
+}
+
+.active {
+  color: #00acdc;
+}
+
+/* body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.page_header {
   font-family: Roboto, sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 12px;
+  display: flex;
+  justify-content: space-between;
 }
 
-.navbar  {
+.navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 1200px;
+  max-width: 1200px;
   height: 60px;
 }
 
+.navbar-icon {
+  width: 40px;
+  height: 40px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .navbar-menu {
   list-style-type: none;
   padding-left: 0;
@@ -25,7 +124,10 @@ a {
   cursor: pointer;
   color: #000;
   text-transform: uppercase;
-
+}
+
+a:hover {
+  color: #00acdc;
 }
 
 .navbar-menu li a {
@@ -34,28 +136,34 @@ a {
   margin-left: 20px;
 }
 
-.navbar-menu li  {
+.navbar-menu li {
   display: inline-block;
 }
 
 img {
   cursor: pointer;
 }
 
-.line {
-  display: block; 
-  width: 37px; 
-  height: 4px; 
-  background-color: #00ACDC;
-  border-radius: 8px; 
-  margin-left: 498px;
-}
-
 .container {
   margin-left: 50px;
   line-height: 50%;
 }
 
-.active {
-  color: #00ACDC;
+.nav__link {
+  color: #00acdc;
 }
+
+.nav__link.active::after {
+  content: '';
+  display: block;
+  width: 37px;
+  height: 4px;
+  border-radius: 8px;
+  background-color: #00acdc;
+  position: absolute;
+  margin-top: 18.5px;
+}
+
+.active {
+  color: #00acdc;
+} */