diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 42c89f7..d0062f8 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -1,9 +1,36 @@
import React from 'react';
import styles from '../../styles/Header.module.scss'
+import logo from '../../assets/img/logo.png'
+import search from '../../assets/img/search.png'
+import cart from '../../assets/img/cart.png'
const Header = () => {
return(
-
+
+
+
+
+
+
+
+
+
Entrar
+
+
+
+
+
+
)
}
diff --git a/src/styles/Header.module.scss b/src/styles/Header.module.scss
index 501222b..5644153 100644
--- a/src/styles/Header.module.scss
+++ b/src/styles/Header.module.scss
@@ -1,7 +1,84 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import 'variables.scss';
header {
+ width: 100%;
color: $white;
padding: 0;
background-color: $black;
+
+ .header__top{
+ padding: 25.07px 100px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .header__logo{
+ width: 10.63%;
+ height: 25.86px;
+ }
+
+ .header__container-input{
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ position: relative;
+ width: 20.63%;
+
+
+ .header__search{
+ display: flex;
+ width: 100%;
+ border: 2px solid #F2F2F2;
+ border-radius: 5px;
+ height: 32px;
+ padding-left: 16px;
+ }
+ .header__search-icon{
+ height: 18px;
+ position: absolute;
+ color: #303030;
+ margin-right: 7px;
+ }
+ }
+
+ .header__my-account-cart{
+ display: flex;
+ width: 10.63%;
+ justify-content: space-between;
+ align-items: center;
+
+ .header__account {
+ font-style: normal;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ font-family: 'Roboto', sans-serif;
+ }
+ .header__cart{
+ height: 28px;
+ }
+
+ }
+ }
+
+ .header__line{
+ border-bottom: 1px solid $white;
+ }
+
+ .header__botton{
+ display: flex;
+ width: 27.58%;
+ justify-content: space-between;
+ margin: 0px 100px;
+
+ .header__botton-nav-text {
+ font-family: 'Roboto', sans-serif;
+ font-style: normal;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ }
+ }
+
}