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] 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>