add changes to html and css code

mate-academy · Jan 19, 2025 · fa96b9c · fa96b9c
1 parent ae6658e
commit fa96b9c
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 55 deletions.
diff --git a/src/index.html b/src/index.html
@@ -17,48 +17,84 @@
     />
   </head>
   <body>
-    <header class="container">
-      <img src="./images/logo.png"
-           class="img"
-           alt="moyologo">
-
+    <header class="header">
+      <a
+        href="#"
+        class="logo"
+      >
+        <img
+          src="./images/logo.png"
+          alt="logo  MOYO"
+          class="image"
+        />
+      </a>
       <nav class="nav">
-        <ul class="nav_list">
-          <div src="./images/Rectangle 2.svg"
-               class="rect"
-               alt="line">>
-            <ul class="apple is-active"
-              href="apple.html">APPLE
-            </ul>
-          </div>
-          <ul class="sams"
-              href="samsung.html">SAMSUNG
-          </ul>
-
-          <ul class="smart"
-              href="smartphones.html">SMARTPHONES
-          </ul>
-
-          <ul class="lapcom"
+        <ul class="nav__list">
+          <li class="nav__item">
+            <a
+              href="#apple"
+              class="nav__link is-active"
+            >
+              Apple
+            </a>
+          </li>
+          <li class="nav__item">
+            <a
+              href="#samsung-products"
+              class="nav__link"
+            >
+              Samsung
+            </a>
+          </li>
+          <li class="nav__item">
+            <a
+              href="#smartphones-products"
+              class="nav__link"
+            >
+              Smartphones
+            </a>
+          </li>
+          <li class="nav__item">
+            <a
+              href="#laptops&computers-products"
+              class="nav__link hover"
               data-qa="hover"
-              href="laptops&computers.html">LAPTOPS & COMPUTERS
-          </ul>
-
-          <ul class="gadg"
-              href="gadgets.html">GADGETS
-          </ul>
-
-          <ul class="tab"
-              href="tablets.html">TABLETS
-          </ul>
-
-          <ul class="ph"
-              href="photo.html">PHOTO
-          </ul>
-
-          <ul class="vi"
-              href="video.html">VIDEO
-          </ul>
+            >
+              Laptops & computers
+            </a>
+          </li>
+          <li class="nav__item">
+            <a
+              href="#gadgets-products"
+              class="nav__link"
+            >
+              Gadgets
+            </a>
+          </li>
+          <li class="nav__item">
+            <a
+              href="#tablets-products"
+              class="nav__link"
+            >
+              Tablets
+            </a>
+          </li>
+          <li class="nav__item">
+            <a
+              href="#photo-products"
+              class="nav__link"
+            >
+              Photo
+            </a>
+          </li>
+          <li class="nav__item">
+            <a
+              href="#video-products"
+              class="nav__link"
+            >
+              Video
+            </a>
+          </li>
         </ul>
       </nav>
     </header>

diff --git a/src/style.css b/src/style.css
@@ -1,39 +1,75 @@
 body {
   margin: 0;
+  display: flex;
+  width: 1024px;
+  height: 60px;
 }
 
 @font-face {
   font-family: Roboto;
   src: url(https://fonts.google.com/specimen/Roboto);
 }
 
-.container{
-  display:flex;
+.header {
+  display: flex;
   flex-direction: row;
   font-family: system-ui, Roboto, sans-serif;
   font-size: 12px;
-  height: 60px;
-  width: 1024px;
   background-color: #fff;
+  width: 1024px;
 }
 
-.img {
- height: 40px;
- width: 40px;
- margin-top: 10px;
- margin-left: 50px;
+.image {
+  display: flex;
+  justify-self: start;
+  align-items: center;
+  height: 40px;
+  width: 40px;
+  margin-top: 10px;
+  margin-left: 50px;
 }
 
-.nav{
+.nav {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  justify-content: end;
+  width: 939px;
+  margin-right: 40px;
 }
 
-.nav_list{
+.nav__list {
   display: flex;
+  list-style-type: none;
+}
+
+.nav__item {
+  display: block;
+  padding: 10px;
+}
+
+.nav__link {
+  height: 40px;
+  display: flex;
+  align-content: center;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: #000;
+}
+
+.nav__link:hover {
+  color: #00acdc;
+}
+
+.is-active {
+  position: relative;
+  color: #00acdc;
 }
 
-.rect{
-  background-position: bottom;
+.is-active::after {
+  content: '';
+  width: 100%;
+  height: 4px;
+  background: #00acdc;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }