done

mate-academy · Dec 18, 2024 · a509254 · a509254
1 parent aed6441
commit a509254
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 12 deletions.
diff --git a/src/index.html b/src/index.html
@@ -10,26 +10,72 @@
       http-equiv="X-UA-Compatible"
       content="ie=edge"
     />
+    <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:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
     <title>Moyo header</title>
     <link
       rel="stylesheet"
       href="./style.css"
     />
   </head>
   <body>
-    <h1>Moyo header</h1>
+    <!-- <h1>Moyo header</h1> -->
     <header class="header">
-      <img src="images/logo.png" alt="MOYOlogo" class="logo">
-      <nav>
-        <ul>
-          <li class="links">APPLE</li>
-          <li class="links">SAMSUNG</li>
-          <li class="links">SMARTPHONES</li>
-          <li class="links">LAPTOPS & COMPUTERS</li>
-          <li class="links">GADGETS</li>
-          <li class="links">TABLETS</li>
-          <li class="links">PHOTO</li>
-          <li class="links">VIDEO</li>
+      <a
+        href="index.html"
+        class="logo"
+      >
+        <img
+          src="images/logo.png"
+          alt="MOYOlogo"
+        />
+      </a>
+      <nav class="nav">
+        <ul class="nav-links">
+          <li class="link">
+            <a
+              href="index.html"
+              class="is-active"
+            >
+              apple
+            </a>
+          </li>
+          <li class="link">
+            <a href="index.html">samsung</a>
+          </li>
+          <li class="link">
+            <a href="index.html">smartphones</a>
+          </li>
+          <li class="link">
+            <a
+              href="index.html"
+              data-qa="hover"
+            >
+              laptops & computers
+            </a>
+          </li>
+          <li class="link">
+            <a href="index.html">gadgets</a>
+          </li>
+          <li class="link">
+            <a href="index.html">tablets</a>
+          </li>
+          <li class="link">
+            <a href="index.html">photo</a>
+          </li>
+          <li class="link last">
+            <a href="index.html">video</a>
+          </li>
         </ul>
       </nav>
     </header>

diff --git a/src/style.css b/src/style.css
@@ -1,3 +1,78 @@
+html,
 body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: Roboto, sans-serif;
+}
+
+h1 {
+  margin: 38px 0;
+}
+
+.header {
+  justify-content: space-between;
+  display: flex;
+  align-items: center;
+  padding: 0 50px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+}
+
+.nav {
+  height: 60px;
+  display: flex;
+}
+
+.nav-links {
+  display: flex;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  color: #000;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+a:hover {
+  color: #00acdc;
+}
+
+.is-active {
+  color: #00acdc;
+
+  position: relative;
+}
+
+.link {
+  text-decoration: none;
+  list-style: none;
+  margin-right: 20px;
+}
+
+.is-active::after {
+  width: 100%;
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  background-color: #00acdc;
+
+  border-radius: 8px;
+}
+
+.last {
   margin: 0;
 }