forked from M3-Academy/desafio-react-e-typescript
feat: header responsivo telas 4k
This commit is contained in:
parent
21979eb7f0
commit
22419b2397
4
src/assets/svgs/icon-close.svg
Normal file
4
src/assets/svgs/icon-close.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
|
||||
<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 638 B |
@ -2,6 +2,7 @@ import './header.scss'
|
||||
import iconCart from '../../assets/svgs/icon-cart.svg';
|
||||
import iconLupa from '../../assets/svgs/icon-lupa.svg';
|
||||
import iconMenu from '../../assets/svgs/icon-menu.svg';
|
||||
import iconClose from '../../assets/svgs/icon-close.svg';
|
||||
import logoM3Academy from '../../assets/imgs/logo-m3-academy.png';
|
||||
|
||||
const Header = () => {
|
||||
@ -22,18 +23,20 @@ const Header = () => {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/cursos">Cursos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/saiba-mais">Sabia mais</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/institucionais">Insititucionais</a>
|
||||
</li>
|
||||
</ul>
|
||||
<nav className=''>
|
||||
<div className="menu">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/cursos">Cursos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/saiba-mais">Sabia mais</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/institucionais">Insititucionais</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -4,13 +4,6 @@ header,
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"menu logo cart"
|
||||
"input input input";
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
@ -21,6 +14,10 @@ header {
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 25px 16px;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"menu logo cart"
|
||||
"input input input";
|
||||
}
|
||||
|
||||
.menu-mobile {
|
||||
@ -41,6 +38,11 @@ header {
|
||||
grid-area: logo;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 265.62px;
|
||||
height: 50.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
@ -53,12 +55,16 @@ header {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 57px;
|
||||
width: 22.3914%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
border: 2px solid $color-gray-700;
|
||||
border-radius: 5px;
|
||||
|
||||
color: $color-gray-500;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
@ -71,6 +77,11 @@ header {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16.41px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@ -80,6 +91,13 @@ header {
|
||||
@media (max-width: 1024px) {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: inherit;
|
||||
padding: 12px 16px;
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-lupa {
|
||||
@ -88,6 +106,12 @@ header {
|
||||
top: -27px;
|
||||
float: right;
|
||||
margin-right: 18px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 35.15px;
|
||||
width: 35.15px;
|
||||
top: -46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,12 +131,29 @@ header {
|
||||
color: $color-white;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 96.485%;
|
||||
background: black;
|
||||
padding: 31px 0 31px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-cart {
|
||||
@media (min-width: 2500px) {
|
||||
height: 54.68px;
|
||||
width: 54.68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,8 +163,34 @@ nav {
|
||||
background-color: $color-black;
|
||||
padding: 14px 100px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
// @media (max-width: 1024px) {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $color-white;
|
||||
|
||||
ul {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
width: 96.485%;
|
||||
background: #525251;
|
||||
padding: 31px 0 404px 16px;
|
||||
margin-top: 78px;
|
||||
li a {
|
||||
color: $color-gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -139,6 +206,11 @@ nav {
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user