diff --git a/src/sectors/Header/TopHeader/TopHeader.tsx b/src/sectors/Header/TopHeader/TopHeader.tsx
index 9510582..2f5a8d0 100644
--- a/src/sectors/Header/TopHeader/TopHeader.tsx
+++ b/src/sectors/Header/TopHeader/TopHeader.tsx
@@ -21,11 +21,13 @@ const TopHeader = () => {
placeholder="Buscar"
required
/>
-
+
ENTRAR
diff --git a/src/sectors/Header/TopHeader/styles.module.scss b/src/sectors/Header/TopHeader/styles.module.scss
index 604febf..2b1971a 100644
--- a/src/sectors/Header/TopHeader/styles.module.scss
+++ b/src/sectors/Header/TopHeader/styles.module.scss
@@ -1,16 +1,61 @@
.TopHeader {
+ width: 100%;
display: flex;
flex-direction: row;
+ height: 101px;
+
.logoAcademyImg {
- width: 500px;
+ width: 262px;
+ height: 50.5px;
+ margin-left: 100px;
+ margin-right: 626.38px;
}
.search-wrapper {
- background: wheat;
+ //background: #fff;
+ display: flex;
+ flex-direction: row;
+ width: 515.62px;
+ //width: 20.62%;
+ height: 57px;
+ margin-right: 677.38px;
.search-input {
- width: 100px;
+ width: 515.62px;
+ height: 57px;
+ border: 2px solid #f0f0f0;
+ border-radius: 5px;
+ &::placeholder {
+ padding: 3px;
+ color: black;
+ }
}
- .searchImg {
- width: 200px;
+ .buscaBtn {
+ width: 100px;
+ height: 50px;
+ position: relative;
+ background-color: white;
+ right: 160px;
+ top: 7px;
+ border: white;
+ .searchImg {
+ width: 35.15px;
+ height: 35.15px;
+ img {
+ margin: 0 0 0 0;
+ }
+ }
+ }
+ }
+
+ .loginLink {
+ height: 300px;
+ color: white;
+ }
+ .cartLink {
+ width: 54px;
+ height: 54px;
+ .cartImg {
+ width: 54px;
+ height: 54px;
}
}
}
diff --git a/src/styles/partials/header.scss b/src/styles/partials/header.scss
index 6be8453..c108e58 100644
--- a/src/styles/partials/header.scss
+++ b/src/styles/partials/header.scss
@@ -1,3 +1,6 @@
.header {
+ width: 100%;
+ height: 162px;
background-color: $black100;
+ padding-top: 22px;
}
diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss
index 9d022f0..beec5c9 100644
--- a/src/styles/utils/variables.scss
+++ b/src/styles/utils/variables.scss
@@ -1,6 +1,6 @@
// colors
-// $white: #ffffff;
+$white100: #ffffff;
$black100: #000000;
// $black2: #333333;
// $gray: #858585;