Fixed elements class name

mate-academy · May 7, 2024 · 0fff24c · 0fff24c
1 parent 0be2560
commit 0fff24c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 34 deletions.
diff --git a/src/index.html b/src/index.html
@@ -29,82 +29,86 @@
     />
   </head>
   <body>
-    <!-- <h1>Moyo header</h1> -->
     <header class="header">
-      <div class="logo">
-        <a
-          class="logo-link"
-          href="#"
-        >
-          <img
-            class="logo-img"
-            src="./images/logo.png"
-            alt="logo"
-          />
-        </a>
-      </div>
+      <a
+        class="header__link"
+        href="#"
+      >
+        <img
+          class="header__logo"
+          src="./images/logo.png"
+          alt="logo"
+        />
+      </a>
       <nav class="nav">
-        <ul class="menu-items">
-          <li class="menu-item">
+        <ul class="nav__list">
+          <li class="nav__item">
             <a
               href="#"
-              class="is-active menu-link"
+              class="is-active nav__link"
             >
               Apple
             </a>
           </li>
-          <li class="menu-item">
+
+          <li class="nav__item">
             <a
-              class="menu-link"
+              class="nav__link"
               href="#"
             >
               Samsung
             </a>
           </li>
-          <li class="menu-item">
+
+          <li class="nav__item">
             <a
-              class="menu-link"
+              class="nav__link"
               href="#"
             >
               Smartphones
             </a>
           </li>
-          <li class="menu-item">
+
+          <li class="nav__item">
             <a
-              class="menu-link"
+              class="nav__link"
               href="#"
               data-qa="hover"
             >
               Laptops & Computers
             </a>
           </li>
-          <li class="menu-item">
+
+          <li class="nav__item">
             <a
-              class="menu-link"
+              class="nav__link"
               href="#"
             >
               Gadgets
             </a>
           </li>
-          <li class="menu-item">
+
+          <li class="nav__item">
             <a
-              class="menu-link"
+              class="nav__link"
               href="#"
             >
               Tablets
             </a>
           </li>
-          <li class="menu-item">
+
+          <li class="nav__item">
             <a
-              class="menu-link"
+              class="nav__link"
               href="#"
             >
               Photo
             </a>
           </li>
-          <li class="menu-item">
+
+          <li class="nav__item">
             <a
-              class="menu-link"
+              class="nav__link"
               href="#"
             >
               Video

diff --git a/src/style.css b/src/style.css
@@ -26,7 +26,7 @@ body {
   padding: 0 50px;
 }
 
-.menu-items {
+.nav__list {
   display: flex;
   list-style: none;
   column-gap: 20px;
@@ -36,12 +36,11 @@ body {
   margin-right: 0;
 }
 
-.menu-link {
+.nav__link {
   display: block;
   position: relative;
   align-items: center;
   font-weight: 500;
-  font-style: normal;
   line-height: 60px;
   color: black;
   text-transform: uppercase;
@@ -60,6 +59,6 @@ body {
 }
 
 .is-active,
-.menu-link:hover {
+.nav__link:hover {
   color: var(--active-menu);
 }