From 747da6d0cca960accf7bd9ac9a1607d4620376bb Mon Sep 17 00:00:00 2001
From: Vadim Kotlyarov <bufalog4@gmail.com>
Date: Sat, 13 Apr 2024 21:50:33 +0300
Subject: [PATCH] add header(not all)

---
 src/css/header.css       | 73 +++++++++++++++++++++++++++++++++-------
 src/partials/header.html | 55 +++++++++++++++++++++++-------
 2 files changed, 103 insertions(+), 25 deletions(-)

diff --git a/src/css/header.css b/src/css/header.css
index 39ff606..3459902 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -1,22 +1,71 @@
 /* Header styles */
 .header {
-  padding: 20px 0;
 }
-
-.nav-list {
+.header-container {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  gap: 40px;
+  justify-content: space-between;
+  position: absolute;
+}
+.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;
 
-.nav-link {
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  line-height: 1.5;
 }
+.open-menu-mob-icon {
+  stroke-width: 3px;
+  stroke: #fbfbfb;
+}
+.nav {
+  display: none;
+}
+.header-logo-tablet-desc {
+  fill: #fbfbfb;
+  display: none;
+}
+.button-menu-open-td {
+  display: none;
+}
+/*** tablet ***/
+@media screen and (min-width:768px) {
 
-.nav-link:hover,
-.nav-link:focus {
-  color: #747bff;
 }
+.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 {
+}
+.nav-link {
+}
+.button-shop-now {
+}
\ No newline at end of file
diff --git a/src/partials/header.html b/src/partials/header.html
index 28b450c..83f9893 100644
--- a/src/partials/header.html
+++ b/src/partials/header.html
@@ -1,15 +1,44 @@
 <header class="header">
-  <nav class="nav">
-    <ul class="nav-list">
-      <li class="nav-item">
-        <a href="#how-it-works" class="nav-link">How it works</a>
-      </li>
-      <li class="nav-item">
-        <a href="#vegetables" class="nav-link">Vegetables</a>
-      </li>
-      <li class="nav-item">
-        <a href="#reviews" class="nav-link">Reviews</a>
-      </li>
-    </ul>
-  </nav>
+  <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>
+    <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">
+        <ul class="nav-list">
+          <li class="nav-item">
+            <a href="#how-it-works" class="nav-link">How it works</a>
+          </li>
+          <li class="nav-item">
+            <a href="#vegetables" class="nav-link">Vegetables</a>
+          </li>
+          <li class="nav-item">
+            <a href="#reviews" class="nav-link">Reviews</a>
+          </li>
+        </ul>
+      </nav>
+      <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>
+        </svg>
+      </button>
+        <button type="button" class="button-menu-open-td">
+          <svg width="32" height="32">
+            <use class="open-menu-tablet-icon" href="../img/icons.svg#big-icon-menu-open"></use>
+          </svg>
+      </button>
+     </div>
+ </div>
 </header>