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 /> - LogoM3Academy + 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;