From 9bbf9e0fb493cf18cd54659fb2b2f36b82e597b4 Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Fri, 6 Jan 2023 19:13:40 -0300
Subject: [PATCH] feat(header):logo 4k responsiva

---
 desafio-5/.gitignore                          |   1 +
 .../src/components/modules/header.module.scss | 161 +++++++++++++++---
 2 files changed, 143 insertions(+), 19 deletions(-)

diff --git a/desafio-5/.gitignore b/desafio-5/.gitignore
index 51e9aa3..7520d19 100644
--- a/desafio-5/.gitignore
+++ b/desafio-5/.gitignore
@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 todo.txt
+tasksHeader.txt
 # dependencies
 /webpack.config.js
 /node_modules
diff --git a/desafio-5/src/components/modules/header.module.scss b/desafio-5/src/components/modules/header.module.scss
index 4faea65..28c0332 100644
--- a/desafio-5/src/components/modules/header.module.scss
+++ b/desafio-5/src/components/modules/header.module.scss
@@ -1,12 +1,15 @@
 @import "../utils/Variables.scss";
 
+//desktop
+
 .Header_wrapper {
     display: flex;
     color: white;
     background: black;
     flex-direction: column;
     justify-content: space-between;
-
+    height: 22.225vh;
+    max-height: 162px;
     // Top-header
 
     &-top {
@@ -16,11 +19,12 @@
         padding: 22px 100px;
         gap: 10px;
         width: 100%;
-        height: 76px;
+        min-height: 63.333333333333%;
         border-bottom: 1px solid $-gray-300;
 
     &-logo {
         width: 12.593%;
+        max-width: 265.61px;
         margin: 3px 0;
         img {
             width: 100%;
@@ -28,7 +32,7 @@
     }
     &-Searchbox{
         width: 24.445%;
-        height: 32px;
+        height: 5.926vh;
         position: relative;
         display: flex;
         align-items: center;
@@ -39,18 +43,9 @@
             background: $-white;
             border: 2px solid $-gray-200;
             border-radius: 5px;
-
-            //digitação
-
-            font-family: 'Roboto';
-            font-style: normal;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 16px;
-            color: $-gray-400;
-
         }
         input[placeholder] {
+            //digitação
             color: $-gray-400 !important;
             font-family: 'Roboto';
             font-style: normal;
@@ -62,12 +57,12 @@
             position: absolute;
             top: 0;
             right: 0;
-            margin: 7px 16px;
+            margin: 2.652% 16px;
             width: 6.82%;
-            height: 56.25%;
+            height: 72%;
             img{
                 width: 100%;
-                height: 100%;
+                // height: 3.25vh;
             }
         }
     }
@@ -92,17 +87,16 @@
 
         &-cart{
             img{
+                min-width: 28px;
                 width: 100%;
-                height: 100%;
             }
         }
     }
 }
-
     //bottom-header
 
     &-bottom {
-        min-height: 44px;
+        min-height: 36.666666666667%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -119,6 +113,7 @@
                     height: 16px;
                     min-width: 54px;
                     width: 100%;
+                    white-space: nowrap;
                     button{
                         width: 100%;
                         height: 100%;
@@ -134,3 +129,131 @@
         }
     }
 }
+
+// 4k
+
+@media screen and (min-width: 2500px){
+    //desktop
+
+.Header_wrapper {
+    height: 15.312vh;
+    max-height: 100%;
+
+    // Top-header
+
+    &-top {
+
+    &-logo {
+        width: 11.549%;
+        max-width: 100%;
+        margin: 3px 0;
+        img {
+            width: 100%;
+        }
+    }
+    &-Searchbox{
+        width: 24.445%;
+        height: 5.926vh;
+        position: relative;
+        display: flex;
+        align-items: center;
+        input{
+            width: 100%;
+            height: 100%;
+            padding: 7px 36px 7px 16px;
+            background: $-white;
+            border: 2px solid $-gray-200;
+            border-radius: 5px;
+        }
+        input[placeholder] {
+            //digitação
+            color: $-gray-400 !important;
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+        }
+        button{
+            position: absolute;
+            top: 0;
+            right: 0;
+            margin: 2.652% 16px;
+            width: 6.82%;
+            height: 72%;
+            img{
+                width: 100%;
+                // height: 3.25vh;
+            }
+        }
+    }
+    &-menu{
+        margin: 3px 0;
+        display: flex;
+        gap: 55px;
+        width: 12.594%;
+        height: 90.35%;
+        order: 2;
+
+        &-login{
+            text-transform: uppercase;
+            color: $-white;
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+
+        }
+
+        &-cart{
+            img{
+                min-width: 28px;
+                width: 100%;
+            }
+        }
+    }
+}
+    //bottom-header
+
+    &-bottom {
+        min-height: 36.666666666667%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        padding: 14px 100px;
+        gap: 10px;
+        &-navigator{
+            width: 32.686%;
+            ul{
+                list-style: none;
+                display: flex;
+                gap: 55px;
+                li{
+                    height: 16px;
+                    min-width: 54px;
+                    width: 100%;
+                    white-space: nowrap;
+                    button{
+                        width: 100%;
+                        height: 100%;
+                        font-family: 'Roboto';
+                        font-style: normal;
+                        font-weight: 400;
+                        font-size: 14px;
+                        line-height: 16px;
+                        color: $-white;
+                    }
+                }
+            }
+        }
+    }
+}
+}
+//Mobile
+
+@media screen and (min-width: 280px) and (max-width: 490px) {
+
+
+}