forked from M3-Academy/desafio-react-e-typescript
feat: cria header 1024px e 375px #2
BIN
src/assets/images/menu-button.png
Normal file
BIN
src/assets/images/menu-button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 B |
@ -3,35 +3,37 @@ import "./styles.scss";
|
||||
import logo from "../../assets/images/logo.png";
|
||||
import cart from "../../assets/images/header-cart.png";
|
||||
import search from "../../assets/images/header-search.png";
|
||||
import menuButton from "../../assets/images/menu-button.png";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="header__content">
|
||||
<div className="header__content-top">
|
||||
<div className="logo">
|
||||
<a href="/">
|
||||
<img src={logo} alt="Logo da M3" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="search-desktop">
|
||||
<input
|
||||
className="search-desktop__input"
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
<button className="search-desktop__button" type="button">
|
||||
<img src={search} alt="Pesquisar" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="buttons">
|
||||
<button className="buttons__logIn" type="button">
|
||||
ENTRAR
|
||||
</button>
|
||||
<button className="buttons__cart" type="button">
|
||||
<img src={cart} alt="Carrinho" />
|
||||
</button>
|
||||
</div>
|
||||
<button className="menu-mobile-button">
|
||||
<img src={menuButton} alt="Menu mobile" />
|
||||
</button>
|
||||
<div className="logo">
|
||||
<a href="/">
|
||||
<img src={logo} alt="Logo da M3" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="search-desktop">
|
||||
<input
|
||||
className="search-desktop__input"
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
<button className="search-desktop__button" type="button">
|
||||
<img src={search} alt="Pesquisar" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="buttons">
|
||||
<button className="buttons__logIn" type="button">
|
||||
ENTRAR
|
||||
</button>
|
||||
<button className="buttons__cart" type="button">
|
||||
<img src={cart} alt="Carrinho" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header__nav">
|
||||
@ -49,6 +51,16 @@ const Header = () => {
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="search-mobile">
|
||||
<input
|
||||
className="search-mobile__input"
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
<button className="search-mobile__button" type="button">
|
||||
<img src={search} alt="Pesquisar" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
@ -7,110 +7,119 @@
|
||||
|
||||
&__content {
|
||||
width: 84.375%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 76px;
|
||||
padding: 0 16px 0 16px;
|
||||
|
||||
&-top {
|
||||
.menu-mobile-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo,
|
||||
.buttons {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 76px;
|
||||
align-items: center;
|
||||
width: 136px;
|
||||
|
||||
.logo,
|
||||
.buttons {
|
||||
height: 100%;
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 25.86px;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 25.86px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.search-desktop {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.search-desktop {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__input {
|
||||
width: 28.668%;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
&__input {
|
||||
width: 29.915%;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
|
||||
&::placeholder {
|
||||
padding: 8px 0 8px 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--gray-200);
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: var(--white-500);
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
padding-right: 7px;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 55px;
|
||||
|
||||
&__logIn {
|
||||
&::placeholder {
|
||||
padding: 8px 0 8px 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: var(--white-500);
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: 0.3s;
|
||||
color: var(--gray-200);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
&__button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: var(--white-500);
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
padding-right: 7px;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
|
||||
&__cart {
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 13%;
|
||||
|
||||
&__logIn {
|
||||
width: 53px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: var(--white-500);
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
}
|
||||
|
||||
&__cart {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--black-500);
|
||||
border: none;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--black-500);
|
||||
border: none;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,6 +131,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 0 16px 0 16px;
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
@ -149,4 +159,90 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
&__content {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
|
||||
.menu-mobile-button {
|
||||
display: block;
|
||||
background: transparent;
|
||||
border: none;
|
||||
width: 28px;
|
||||
height: 22.5px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 22.5px;
|
||||
}
|
||||
}
|
||||
.search-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
width: 2.823%;
|
||||
justify-content: flex-end;
|
||||
|
||||
&__logIn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-mobile {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 16px 25px 16px;
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
|
||||
&::placeholder {
|
||||
padding: 8px 0 8px 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--gray-200);
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 32px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
background: var(--white-500);
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
padding-right: 7px;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user