feat(header): Adicionando o botao da busca

This commit is contained in:
Savio Carvalho Moraes 2023-01-09 19:39:41 -03:00
parent 69da918a39
commit a855e4de3c
4 changed files with 61 additions and 11 deletions

View File

@ -21,11 +21,13 @@ const TopHeader = () => {
placeholder="Buscar"
required
/>
<img
className={styles["searchImg"]}
alt="LogoM3Academy"
src={searchImg}
/>
<button className={styles["buscaBtn"]}>
<img
className={styles["searchImg"]}
alt="LogoM3Academy"
src={searchImg}
/>
</button>
</div>
<a className={styles["loginLink"]} href="/">
ENTRAR

View File

@ -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;
}
}
}

View File

@ -1,3 +1,6 @@
.header {
width: 100%;
height: 162px;
background-color: $black100;
padding-top: 22px;
}

View File

@ -1,6 +1,6 @@
// colors
// $white: #ffffff;
$white100: #ffffff;
$black100: #000000;
// $black2: #333333;
// $gray: #858585;