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 1/6] 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>

From c9db2d9f10868e23e86b763b9083c0c5c05f2cd2 Mon Sep 17 00:00:00 2001
From: Vadim Kotlyarov <bufalog4@gmail.com>
Date: Sat, 13 Apr 2024 23:38:16 +0300
Subject: [PATCH 2/6] add header(not all)

---
 src/css/header.css       | 74 +++++++++++++---------------------------
 src/partials/header.html | 35 ++++++++++---------
 2 files changed, 41 insertions(+), 68 deletions(-)

diff --git a/src/css/header.css b/src/css/header.css
index 3459902..9564577 100644
--- 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;
+  }
 }
\ No newline at end of file
diff --git a/src/partials/header.html b/src/partials/header.html
index 83f9893..cc340c9 100644
--- 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>

From 01e71a697b2bfd8a6915f3b9c2c980a2cc594e4a Mon Sep 17 00:00:00 2001
From: Vadim Kotlyarov <bufalog4@gmail.com>
Date: Sat, 13 Apr 2024 23:42:44 +0300
Subject: [PATCH 3/6] add header(not all)

---
 src/css/header.css       | 7 ++++++-
 src/partials/header.html | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/css/header.css b/src/css/header.css
index 9564577..9d318e3 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -9,8 +9,13 @@
   padding-top: 20px;
   padding-bottom: 48px;
 }
-.header-logo-mob {
+.footer-logo-link {
   display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+}
+.header-logo-mob {
   fill: #FBFBFB;
 }
 .button-menu-open-mob {
diff --git a/src/partials/header.html b/src/partials/header.html
index cc340c9..cb0fd36 100644
--- a/src/partials/header.html
+++ b/src/partials/header.html
@@ -2,7 +2,7 @@
   <div class="container header-container">
     <div class="header-logo">
       <a class="header-logo-link" href="./index.html">
-        <svg class="header-logo-icon-mob" width="16" height="16">
+        <svg class="header-logo-mob" width="16" height="16">
           <use href="./img/icons.svg#mini-cubiki"></use>
         </svg>
         <svg class="header-logo-mob" width="148" height="12">

From 48ed0fc1aacea359d3e041944353fd04945e37a1 Mon Sep 17 00:00:00 2001
From: kandyy9 <a.kandy.sk@gmail.com>
Date: Sun, 14 Apr 2024 12:28:13 +0300
Subject: [PATCH 4/6] styles-fixed

---
 src/css/header.css       | 90 ++++++++++++++++++++++++++++++++++++----
 src/partials/header.html | 59 ++++++++++++++------------
 2 files changed, 116 insertions(+), 33 deletions(-)

diff --git a/src/css/header.css b/src/css/header.css
index 9d318e3..b390780 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -1,48 +1,124 @@
 /* Header styles */
-.header {
+
+.header .container {
+  position: relative;
 }
+
 .header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: absolute;
-  padding-top: 20px;
-  padding-bottom: 48px;
+  padding: 0 20px;
+  left: 0;
+  right: 0;
+  top: 20px;
+  width: 100%;
 }
+
 .footer-logo-link {
   display: flex;
   gap: 4px;
   align-items: center;
   justify-content: center;
 }
+
+.header-logo-link{
+  display: flex;
+  align-items: center;
+  gap:4px;
+}
+
 .header-logo-mob {
   fill: #FBFBFB;
 }
+
 .button-menu-open-mob {
   stroke: #FBFBFB;
   background-color: transparent;
   border: none;
 }
+
 .button-menu-open-td {
   display: none;
 }
-.header-logo-tab {
+
+.header-logo-tab, .menu{
   display: none;
 }
-.open-menu-mob-icon {
-}
+
 @media screen and (min-width: 768px) {
+  .header-container{
+    padding: 0 32px;
+    top: 32px;
+  }
+
+    .header-logo-link {
+      gap: 8px;
+    }
+  
   .button-menu-open-td {
+    display: block;
+    height: 40px;
     stroke: #FBFBFB;
     background-color: transparent;
     border: none;
   }
-  .button-menu-open-mob {
+
+  .button-menu-open-mob, .header-logo-mob {
     display: none;
   }
+
   .open-menu-tablet-icon {
+    stroke: #FBFBFB;
+    background-color: transparent;
+    border: none;
   }
+
   .header-logo-tab {
+    display: inline;
     fill: #FBFBFB;
   }
+}
+
+@media screen and (min-width:1280px) {
+  .header-container {
+      padding: 0 100px;
+    }
+
+    .button-menu-open-td{
+      display: none;  
+    }
+
+    .menu{
+      display: flex;
+      align-items: center;
+      gap: 20px;
+    }
+
+    .nav-list{
+      display: flex;
+      gap: 8px;
+    }
+
+    .nav-link{
+      padding: 12px;
+      border: 1px solid rgba(251, 251, 251, 0.4);
+      border-radius: 12px;
+      font-weight: 500;
+      line-height: 1.25;
+      letter-spacing: -0.02em;
+    }
+
+    .button-shop-now{
+      border-radius: 30px;
+      padding: 16px 32px;
+      background-color: #7a3145;
+      border: none;
+      font-weight: 600;
+      font-size: 18px;
+      letter-spacing: -0.01em;
+      text-transform: uppercase;
+      color: var(--main-text);
+    }
 }
\ No newline at end of file
diff --git a/src/partials/header.html b/src/partials/header.html
index cb0fd36..ef47cbf 100644
--- a/src/partials/header.html
+++ b/src/partials/header.html
@@ -1,45 +1,52 @@
 <header class="header">
-  <div class="container header-container">
-    <div class="header-logo">
+  <div class="container">
+    <div class="header-container">
       <a class="header-logo-link" href="./index.html">
-        <svg class="header-logo-mob" width="16" height="16">
+        <svg class="header-logo-mob squares" 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">
+        <svg class="header-logo-tab squares" 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>
-      <!-- <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> -->
+      <div class="menu">
+        <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>
+      </div>
       <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>
+          <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 type="button" class="button-menu-open-td">
+        <svg width="40" height="40">
+          <use
+            class="open-menu-tablet-icon"
+            href="../img/icons.svg#big-icon-menu-open"
+          ></use>
+        </svg>
       </button>
-     
- </div>
+    </div>
+  </div>
 </header>

From 02c79a3b1b9f37580fae81e419b8e79335a184a5 Mon Sep 17 00:00:00 2001
From: kandyy9 <a.kandy.sk@gmail.com>
Date: Sun, 14 Apr 2024 15:11:07 +0300
Subject: [PATCH 5/6] logo fixed

---
 src/css/header.css       | 3 ++-
 src/partials/header.html | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/css/header.css b/src/css/header.css
index b390780..6c01314 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -110,7 +110,7 @@
       letter-spacing: -0.02em;
     }
 
-    .button-shop-now{
+    .shop-now{
       border-radius: 30px;
       padding: 16px 32px;
       background-color: #7a3145;
@@ -118,6 +118,7 @@
       font-weight: 600;
       font-size: 18px;
       letter-spacing: -0.01em;
+      line-height: 1.11;
       text-transform: uppercase;
       color: var(--main-text);
     }
diff --git a/src/partials/header.html b/src/partials/header.html
index ef47cbf..9251e09 100644
--- a/src/partials/header.html
+++ b/src/partials/header.html
@@ -11,7 +11,7 @@
         <svg class="header-logo-tab squares" width="18" height="18">
           <use href="./img/icons.svg#big-cubiki"></use>
         </svg>
-        <svg class="header-logo-tab" width="168" height="15">
+        <svg class="header-logo-tab" width="168" height="16">
           <use href="./img/icons.svg#big-green-harvest"></use>
         </svg>
       </a>
@@ -29,7 +29,7 @@
             </li>
           </ul>
         </nav>
-        <button type="button" class="button-shop-now">shop now</button>
+        <a href="#your-order" class="shop-now">shop now</a>
       </div>
       <button type="button" class="button-menu-open-mob">
         <svg width="32" height="32">

From 3d6e707b8002a43321972d49a6362a48f87add95 Mon Sep 17 00:00:00 2001
From: kandyy9 <a.kandy.sk@gmail.com>
Date: Sun, 14 Apr 2024 16:20:47 +0300
Subject: [PATCH 6/6] transfer pseudo button to the list

---
 src/css/header.css       | 53 +++++++++++++++++++++++-----------------
 src/partials/header.html | 44 ++++++++++++++++-----------------
 2 files changed, 51 insertions(+), 46 deletions(-)

diff --git a/src/css/header.css b/src/css/header.css
index 6c01314..9e49278 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -16,13 +16,6 @@
   width: 100%;
 }
 
-.footer-logo-link {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  justify-content: center;
-}
-
 .header-logo-link{
   display: flex;
   align-items: center;
@@ -33,17 +26,17 @@
   fill: #FBFBFB;
 }
 
-.button-menu-open-mob {
+.button-menu-open{
+  display: block;
   stroke: #FBFBFB;
   background-color: transparent;
   border: none;
 }
-
-.button-menu-open-td {
+.open-menu-tablet {
   display: none;
 }
 
-.header-logo-tab, .menu{
+.header-logo-tab, .nav{
   display: none;
 }
 
@@ -53,22 +46,26 @@
     top: 32px;
   }
 
-    .header-logo-link {
-      gap: 8px;
-    }
+  .header-logo-link {
+    gap: 8px;
+  }
   
-  .button-menu-open-td {
-    display: block;
+  .button-menu-open {
     height: 40px;
-    stroke: #FBFBFB;
-    background-color: transparent;
-    border: none;
   }
 
   .button-menu-open-mob, .header-logo-mob {
     display: none;
   }
 
+  .open-menu-mobile{
+    display: none;
+  }
+
+  .open-menu-tablet{
+    display: inline;
+  }
+
   .open-menu-tablet-icon {
     stroke: #FBFBFB;
     background-color: transparent;
@@ -90,17 +87,23 @@
       display: none;  
     }
 
-    .menu{
+    .nav{
       display: flex;
       align-items: center;
-      gap: 20px;
     }
 
     .nav-list{
-      display: flex;
-      gap: 8px;
+      display: flex;  
     }
 
+    .nav-item:not(:last-child){
+      margin-right: 8px;
+    }
+
+    .nav-item:nth-last-child(2) {
+      margin-right: 20px;
+      }
+
     .nav-link{
       padding: 12px;
       border: 1px solid rgba(251, 251, 251, 0.4);
@@ -110,6 +113,10 @@
       letter-spacing: -0.02em;
     }
 
+    .button-menu-open{
+      display: none;
+    }
+
     .shop-now{
       border-radius: 30px;
       padding: 16px 32px;
diff --git a/src/partials/header.html b/src/partials/header.html
index 9251e09..e520da9 100644
--- a/src/partials/header.html
+++ b/src/partials/header.html
@@ -15,35 +15,33 @@
           <use href="./img/icons.svg#big-green-harvest"></use>
         </svg>
       </a>
-      <div class="menu">
-        <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>
-        <a href="#your-order" class="shop-now">shop now</a>
-      </div>
-      <button type="button" class="button-menu-open-mob">
-        <svg width="32" height="32">
+      <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>
+          <li class="nav-item">
+            <a href="#your-order" class="shop-now">shop now</a>
+          </li>
+        </ul>
+      </nav>
+      <button type="button" class="button-menu-open">
+        <svg class="open-menu-mobile" width="32" height="32">
           <use
             class="open-menu-mob-icon"
-            href="../img/icons.svg#mini-icon-menu-open"
+            href="./img/icons.svg#mini-icon-menu-open"
           ></use>
         </svg>
-      </button>
-      <button type="button" class="button-menu-open-td">
-        <svg width="40" height="40">
+        <svg class="open-menu-tablet" width="40" height="40">
           <use
             class="open-menu-tablet-icon"
-            href="../img/icons.svg#big-icon-menu-open"
+            href="./img/icons.svg#big-icon-menu-open"
           ></use>
         </svg>
       </button>