add header(not all)

ReshetS · Apr 13, 2024 · c9db2d9 · c9db2d9
1 parent 747da6d
commit c9db2d9
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 68 deletions.
diff --git a/src/css/header.css b/src/css/header.css
@@ -3,69 +3,41 @@
 }
 .header-container {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
   position: absolute;
+  padding-top: 20px;
+  padding-bottom: 48px;
 }
 .header-logo-mob {
-  align-items: center;
-  justify-content: center;
   display: flex;
-  gap: 4px;
-  padding: 20px 0;
-}
-.header-logo-svg-mob {
   fill: #FBFBFB;
 }
-.button-shop-now {
-  display: none;
-}
 .button-menu-open-mob {
-    background-color: transparent;
-    cursor: pointer;
-    line-height: 0;
-    border: none;
-
-}
-.open-menu-mob-icon {
-  stroke-width: 3px;
-  stroke: #fbfbfb;
-}
-.nav {
-  display: none;
-}
-.header-logo-tablet-desc {
-  fill: #fbfbfb;
-  display: none;
+  stroke: #FBFBFB;
+  background-color: transparent;
+  border: none;
 }
 .button-menu-open-td {
   display: none;
 }
-/*** tablet ***/
-@media screen and (min-width:768px) {
-
-}
-.open-menu-tablet-icon {
-}
-.header-logo-tablet-desc {
-}
-.header-logo-svg-tablet-desc {
-}
-/*** desctop ***/
-@media screen and (min-width:1280px) {
-
-}
-.nav {
-}
-.nav-list {
-}
-.nav-item {
-}
-.header-logo-tablet-desc {
-}
-.header-logo-svg-tablet-desc {
+.header-logo-tab {
+  display: none;
 }
-.nav-link {
+.open-menu-mob-icon {
 }
-.button-shop-now {
+@media screen and (min-width: 768px) {
+  .button-menu-open-td {
+    stroke: #FBFBFB;
+    background-color: transparent;
+    border: none;
+  }
+  .button-menu-open-mob {
+    display: none;
+  }
+  .open-menu-tablet-icon {
+  }
+  .header-logo-tab {
+    fill: #FBFBFB;
+  }
 }
diff --git a/src/partials/header.html b/src/partials/header.html
@@ -1,21 +1,22 @@
 <header class="header">
   <div class="container header-container">
-    <div class="header-logo-mob">
-     <svg class="header-logo-svg-mob" width="16" height="16">
-      <use href="../img/icons.svg#mini-cubiki"></use>
-     </svg>
-     <svg class="header-logo-svg-mob" width="148" height="12">
-      <use href="../img/icons.svg#mini-green-harvest"></use>
-     </svg>
+    <div class="header-logo">
+      <a class="header-logo-link" href="./index.html">
+        <svg class="header-logo-icon-mob" width="16" height="16">
+          <use href="./img/icons.svg#mini-cubiki"></use>
+        </svg>
+        <svg class="header-logo-mob" width="148" height="12">
+          <use href="./img/icons.svg#mini-green-harvest"></use>
+        </svg>
+        <svg class="header-logo-tab" width="18" height="18">
+          <use href="./img/icons.svg#big-cubiki"></use>
+        </svg>
+        <svg class="header-logo-tab" width="168" height="15">
+          <use href="./img/icons.svg#big-green-harvest"></use>
+        </svg>
+      </a>
     </div>
-    <div class="header-logo-tablet-desc">
-      <svg class="header-logo-svg-tablet-desc" width="16" height="16">
-       <use href="../img/icons.svg#big-cubiki"></use>
-      </svg>
-      <svg class="header-logo-svg-tablet-desc" width="148" height="12">
-       <use href="../img/icons.svg#big-green-harvest"></use>
-      </svg>
-      <nav class="nav">
+      <!-- <nav class="nav">
         <ul class="nav-list">
           <li class="nav-item">
             <a href="#how-it-works" class="nav-link">How it works</a>
@@ -28,7 +29,7 @@
           </li>
         </ul>
       </nav>
-      <button type="button" class="button-shop-now">SHOP NOW</button>
+      <button type="button" class="button-shop-now">SHOP NOW</button> -->
       <button type="button" class="button-menu-open-mob">
         <svg width="32" height="32">
           <use class="open-menu-mob-icon" href="../img/icons.svg#mini-icon-menu-open"></use>
@@ -39,6 +40,6 @@
             <use class="open-menu-tablet-icon" href="../img/icons.svg#big-icon-menu-open"></use>
           </svg>
       </button>
-     </div>
+
  </div>
 </header>