WilliamSimao/desafio-react-e-typescript-WilliamSimao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): Estiliza header 2500px

Browse Source
This commit is contained in:
William Simão Cavalcante 2023-01-02 12:50:36 -03:00
parent b3bd0b2c02
commit 6193e5f51f
7 changed files with 101 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
react-ts/index.html
View File

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="./src/assets/images/icon-m3.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>INSTITUCIONAL - William Simão</title>
</head>
<body>
<div id="root"></div>

BIN
react-ts/src/assets/images/icon-m3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 B

9
react-ts/src/assets/images/logo-m3academy2500.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

41
react-ts/src/components/Header/Header.scss
View File

@ -8,6 +8,18 @@
align-items: center;
justify-content: space-between;
border-bottom: 1px solid $color-grey1;
&__picture {
&__img1280 {
img {
display: block;
}
}
&__img2500 {
img {
display: none;
}
}
}
}
&__wrapper-botom {
padding: 14px 100px;
@ -28,4 +40,33 @@
}
}
}
}
@media only screen and (min-width: 2500px) {
.header {
&__wrapper-top {
&__picture {
&__img1280{
img {
display: none;
}
}
&__img2500 {
img {
display: block;
}
}
}
}
&__wrapper-botom {
&__ul {
&__li {
a {
font-size: 28px;
line-height: 28px;
}
}
}
}
}
}

10
react-ts/src/components/Header/Header.tsx
View File

@ -2,15 +2,19 @@ import './Header.scss';
import InputSearch from '../InputSearch/InputSearch';
import UserAccount from '../UserAccount/UseAccount';
import logoM3 from '../../assets/images/logo-m3academy.svg';
import logoM31280 from '../../assets/images/logo-m3academy.svg';
import logoM32500 from '../../assets/images/logo-m3academy2500.svg';
const Header = () => {
return (
<header className='header'>
<div className='header__wrapper-top'>
<picture className='header__wrapper-top__picture'>
<a href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa">
<img className='header__wrapper-top__picture__logo' src={logoM3} alt="Logo m3academy" />
<a className='header__wrapper-top__picture__img1280' href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa">
<img className='header__wrapper-top__picture__logo' src={logoM31280} alt="Logo m3academy" />
</a>
<a className='header__wrapper-top__picture__img2500' href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa">
<img className='header__wrapper-top__picture__logo' src={logoM32500} alt="Logo m3academy" />
</a>
</picture>
<InputSearch/>

24
react-ts/src/components/InputSearch/InputSearch.scss
View File

@ -5,19 +5,23 @@
align-items: center;
justify-content: end;
position: relative;
max-width: 264px;
max-width: 236px;
width: 100%;
height: 32px;
border-radius: 5px;
&__input {
position: relative;
width: 100%;
padding: 8px 16px;
height: 100%;
padding: 0 16px;
border: 2px solid #F2F2F2;
border-radius: 5px;
color: $color-grey1;
font-family: $font-family;
font-weight: 400;
font-size: 14px;
line-height: 16px;
&::placeholder {
font-family: $font-family;
color: $color-grey1;
}
}
@ -25,4 +29,18 @@
position: absolute;
margin-right: 16px;
}
}
@media only screen and (min-width: 2500px) {
.wrapper-iconSearch {
max-width: 515.62px;
height: 57px;
&__input {
font-size: 28px;
line-height: 33px;
}
&__icon {
width: 35.15px;
}
}
}

20
react-ts/src/components/UserAccount/UserAccount.scss
View File

@ -19,3 +19,23 @@
}
}
}
@media only screen and (min-width: 2500px) {
.wrapper-userAccount {
&__ul {
&__li-entrar {
a {
font-size: 28px;
line-height: 33px;
}
}
&__li-cart {
a {
img {
width: 54.68px;
}
}
}
}
}
}