feat(header):header desktop finalizado

desafio-5/.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+todo.txt
 # dependencies
+/webpack.config.js
 /node_modules
 /.pnp
 .pnp.js

desafio-5/src/components/modules/header.module.scss

@@ -2,7 +2,6 @@
 
 .Header_wrapper {
     display: flex;
-    min-height: 120px;
     color: white;
     background: black;
     flex-direction: column;
@@ -19,7 +18,7 @@
         width: 100%;
         height: 76px;
         border-bottom: 1px solid $-gray-300;
-        
+
     &-logo {
         width: 12.593%;
         margin: 3px 0;
@@ -40,6 +39,24 @@
             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] {
+            color: $-gray-400 !important;
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
         }
         button{
             position: absolute;
@@ -85,6 +102,35 @@
     //bottom-header
 
     &-bottom {
-        background: orangered;
+        min-height: 44px;
+        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%;
+                    button{
+                        width: 100%;
+                        height: 100%;
+                        font-family: 'Roboto';
+                        font-style: normal;
+                        font-weight: 400;
+                        font-size: 14px;
+                        line-height: 16px;
+                        color: $-white;
+                    }
+                }
+            }
+        }
     }
 }

desafio-5/src/components/scripts/header.tsx

@@ -15,7 +15,6 @@ const Header = () =>{
                         <img src={Logo} alt="Logo" />
                     </a>
                 </div>
-
                 <div className={HeaderStyles["Header_wrapper-top-Searchbox"]}>
                     <input name="search" type="text" placeholder="Buscar">
                     </input>
@@ -25,7 +24,6 @@ const Header = () =>{
                         </button>
                     </label>
                 </div>
-                
                 <div className={HeaderStyles["Header_wrapper-top-menu"]}>
                     <button className={HeaderStyles["Header_wrapper-top-menu-login"]}>Entrar</button>
                     <button className={HeaderStyles["Header_wrapper-top-menu-cart"]}>
@@ -36,7 +34,13 @@ const Header = () =>{
 
 
             <div className={HeaderStyles["Header_wrapper-bottom"]}>
-                opções
+                <nav className={HeaderStyles["Header_wrapper-bottom-navigator"]}>
+                    <ul>
+                        <li><button>CURSOS</button></li>
+                        <li><button>SAIBA MAIS</button></li>
+                        <li><button>INSTITUCIONAIS</button></li>
+                    </ul>
+                </nav>
             </div>
         </div>
     )

desafio-5/src/components/utils/Variables.scss

@@ -6,8 +6,9 @@ $-gray-light:#e5e5e5;
 $-gray-100: #F0F0F0;
 $-gray-200: #F2F2F2;
 $-gray-300:#C4C4C4;
-$-gray-400:#858585;
-$-gray-500:#333333;
+$-gray-400:#C6C6C6;
+$-gray-500:#858585;
+$-gray-600:#333333;
 $-prisma: #FF5A5F;
 $-crimson: rgb(156, 4, 34);
 $-shockPink:rgb(220, 20, 60);