AdilsonFernandoNevesOrnellas/desafio-react-e-typescript-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: header já pronto e responsivo

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-02 21:38:42 -03:00
parent 6e6665ec1c
commit d7c2aec8c6
20 changed files with 354 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
adilson-fernando/package-lock.json generated
View File

@ -18,6 +18,7 @@
"cpf": "^2.0.1",
"date-fns": "^2.28.0",
"formik": "^2.2.9",
"module-name": "^0.0.1-security",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.1",
@ -11904,6 +11905,11 @@
"mkdirp": "bin/cmd.js"
}
},
"node_modules/module-name": {
"version": "0.0.1-security",
"resolved": "https://registry.npmjs.org/module-name/-/module-name-0.0.1-security.tgz",
"integrity": "sha512-yuuTU5MhBuxtUPjTIqBz3AR2z3yrBr7yjPvpHbKLu5N3iWBRji2RnNAysonzft26mMUO+vA2tB3uiAqbZ6jXAQ=="
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -25825,6 +25831,11 @@
"minimist": "^1.2.6"
}
},
"module-name": {
"version": "0.0.1-security",
"resolved": "https://registry.npmjs.org/module-name/-/module-name-0.0.1-security.tgz",
"integrity": "sha512-yuuTU5MhBuxtUPjTIqBz3AR2z3yrBr7yjPvpHbKLu5N3iWBRji2RnNAysonzft26mMUO+vA2tB3uiAqbZ6jXAQ=="
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

1
adilson-fernando/package.json
View File

@ -13,6 +13,7 @@
"cpf": "^2.0.1",
"date-fns": "^2.28.0",
"formik": "^2.2.9",
"module-name": "^0.0.1-security",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.1",

BIN
adilson-fernando/src/assets/images/MenuHamburguer.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
adilson-fernando/src/assets/images/carrinhoCompra.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 721 B

BIN
adilson-fernando/src/assets/images/lupaBuscar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 912 B

BIN
adilson-fernando/src/assets/logos/Logo-M3Academy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

11
adilson-fernando/src/components/Footer.tsx
View File

@ -1,11 +0,0 @@
import React from "react";
import "../styles/Global.scss";
import "../styles/Variaveis.scss";
import "../styles/Footer.scss";
const Footer = () => {
return <h1>Footer</h1>;
};
export default Footer;

17
adilson-fernando/src/components/Footer/Footer.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
import "../../styles/Global.scss";
import "../../styles/Variaveis.scss";
import "../../styles/Footer.module.scss";
const Footer = () => {
return (
<footer>
</footer>
);
};
export default Footer;

11
adilson-fernando/src/components/Header.tsx
View File

@ -1,11 +0,0 @@
import React from "react";
import "../styles/Global.scss";
import "../styles/Variaveis.scss";
import "../styles/Header.scss";
const Header = () => {
return <h1>Header</h1>;
};
export default Header;

69
adilson-fernando/src/components/Header/Header.tsx Normal file
View File

@ -0,0 +1,69 @@
import React from "react";
import "../../styles/Global.scss";
import "../../styles/Variaveis.scss";
import styles from "../../styles/Header.module.scss";
import logoM3Academy from "../../assets/logos/Logo-M3Academy.jpg";
import lupaBuscar from "../../assets/images/lupaBuscar.png";
import iconeMenu from "../../assets/images/MenuHamburguer.jpg"
import carrinhoCompra from "../../assets/images/carrinhoCompra.png"
const Header = () => {
return (
<header className={styles["header"]}>
<div className={styles["header-top"]}>
<div className={styles["top-inputMenu"]}>
<button className={styles["inputMenu-button"]}>
<img className={styles["inputMenu-Img"]} src={iconeMenu} alt="Icone Menu" />
</button>
</div>
<div className={styles["top-logo"]}>
<a href="/">
<img className={styles["logo-Academy"]} src={logoM3Academy} alt="logo M3 Academy" />
</a>
</div>
<div className={styles["top-buscar"]}>
<input className={styles["buscar-input"]} type="text" placeholder=" Buscar" />
<button className={styles["buscar-button"]}>
<img className={styles["buscar-lupa"]} src={lupaBuscar} alt="LupaBuscar" />
</button>
</div>
<div className={styles["top-entrarCarrinho"]}>
<h2 className={styles["entrarCarrinho-texto"]}>ENTRAR</h2>
<a href="/">
<img className={styles["entrarCarrinho-img"]} src={carrinhoCompra} alt="carrinhoCompra" />
</a>
</div>
</div>
<div className={styles["header-navBar"]}>
<ul className={styles["navBar-Ul"]}>
<li className={styles["navBar-Li"]}>CURSOS</li>
<li className={styles["navBar-Li"]}>SAIBA MAIS</li>
<li className={styles["navBar-Li"]}>INSTITUCIONAIS</li>
</ul>
</div>
<div className={styles["top-buscarMobile"]}>
<input className={styles["buscarMobile-input"]} type="text" placeholder=" Buscar" />
<button className={styles["buscarMobile-button"]}>
<img className={styles["buscarMobile-lupa"]} src={lupaBuscar} alt="LupaBuscar" />
</button>
</div>
</header>
);
};
export default Header;

11
adilson-fernando/src/components/Main.tsx
View File

@ -1,11 +0,0 @@
import React from "react";
import "../styles/Global.scss";
import "../styles/Variaveis.scss";
import "../styles/Main.scss";
const Main = () => {
return <h1>Main</h1>;
};
export default Main;

16
adilson-fernando/src/components/Main/Main.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
import "../../styles/Global.scss";
import "../../styles/Variaveis.scss";
import "../../styles/Main.module.scss";
const Main = () => {
return (
<main>
</main>
);
};
export default Main;

6
adilson-fernando/src/pages/Home.tsx
View File

@ -1,8 +1,8 @@
import React from "react";
import Header from "../components/Header";
import Footer from "../components/Footer";
import Main from "../components/Main";
import Header from "../components/Header/Header";
import Footer from "../components/Footer/Footer";
import Main from "../components/Main/Main";
const Home = () => {
return (

3
adilson-fernando/src/react-app-env.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
/// <reference types="react-scripts" />
// NÃO APAGAR ESSE ARQUIVO, SE NÃO O CSS MODULE PARTA DE FUNCIONAR.

0
adilson-fernando/src/styles/Footer.scss → adilson-fernando/src/styles/Footer.module.scss
View File

8
adilson-fernando/src/styles/Global.scss
View File

@ -1,4 +1,6 @@
body{
margin: 0;
border: 0;
*{
box-sizing: border-box;
margin: 0%;
padding: 0px 0px 0px;
border: 0px;
}

221
adilson-fernando/src/styles/Header.module.scss Normal file
View File

@ -0,0 +1,221 @@
.header {
background-color: black;
.header-top{
display:flex ;
align-items: center;
margin-bottom: 22px;
@media (max-width: 1024px){
margin-bottom: 25px;
margin-left: 1.563%;
}
@media (max-width: 668px){
margin-bottom: 25px;
margin-left: 4.265%;
}
.top-inputMenu{
display: none;
@media (max-width: 1024px){
display: block;
width: 28px;
height: 22.5px;
margin-top: 25px;
}
@media (max-width: 668px){
display: block;
margin-top: 25px;
}
.inputMenu-button{
background-color: black;
.inputMenu-Img{
width: 100%;
}
}
}
.top-logo{
display: flex;
align-items: center;
justify-content: center;
margin-top: 23px;
margin-left: 7.813%;
@media (min-width: 2500px){
margin-left: 4%;
margin-top: 25px;
}
@media (max-width: 1024px){
width: 91.406%;
margin-top: 25px;
margin-left: 0%;
}
@media (max-width: 668px){
width: 76.8%;
margin-top: 25px;
margin-left: 0%;
}
.logo-Academy{
width: 136px;
@media (min-width: 2500px){
width: 265.62px;
}
}
}
.top-buscar{
display: flex;
align-items: center;
width: 20.625%;
height: 32px;
border: 2px white;
margin-left: 21.25%;
margin-top: 22px;
@media (min-width: 2500px){
margin-left: 25.0556% ;
height: 57px;
}
@media (max-width: 1024px){
display: none;
}
.buscar-input{
font-family: 'Roboto',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #C4C4C4;
height: 32px;
width: 100%;
border-radius: 5px 0px 0px 5px;
@media (min-width: 2500px){
height: 57px;
font-size: 28px;
line-height: 33px;
}
}
.buscar-button{
height: 32px;
border-radius: 0px 5px 5px 0px;
@media (min-width: 2500px){
height: 57px;
}
.buscar-lupa{
border-radius: 0px 5px 5px 0px;
height: 32px;
padding: 7px;
background-color: white;
@media (min-width: 2500px){
height: 57px;
padding: 11px;
}
}
}
}
.top-entrarCarrinho{
width: 10.625%;
display: flex;
align-items: center;
margin-top: 24px;
margin-left: 21.25%;
@media (min-width: 2500px){
margin-left: 27.0956%;
}
@media (max-width: 1024px){
width: 28px;
height: 28px;
margin-top: 25px;
margin-left: 0%;
}
@media (max-width: 668px){
width: 28px;
height: 28px;
margin-top: 25px;
margin-left: 0%;
}
.entrarCarrinho-texto{
font-family: 'Roboto',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: white;
margin-right: 40.45% ;
@media (min-width: 2500px){
font-size: 28px;
line-height: 33px;
margin-right: 20.71%;
}
@media (max-width: 1024px){
display: none;
}
}
.entrarCarrinho-img{
width: 28px;
@media (min-width: 2500px){
width: 54.68px;
}
}
}
}
.header-navBar{
font-family: 'Roboto', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
border-top: 1px solid white;
@media (max-width: 1024px){
display: none;
}
.navBar-Ul{
display: flex;
list-style: none;
margin-left: 7.813%;
padding-bottom: 14px;
margin-top: 14px;
@media (min-width: 2500px){
margin-left: 4%;
}
.navBar-Li{
margin-right: 4.297%;
@media (min-width: 2500px){
font-size: 28px;
line-height: 33px;
}
}
}
}
.top-buscarMobile{
display: none;
@media (max-width: 1024px){
display: flex;
align-items: center;
width: 96.875%;
height: 36px;
margin-left: 1.563%;
padding-bottom: 25px;
}
@media (max-width: 668px){
display: flex;
align-items: center;
width: 91.42%;
height: 36px;
margin-left: 4.265%;
padding-bottom: 25px;
}
.buscarMobile-input{
height: 36px;
width: 100%;
border-radius: 5px 0px 0px 5px;
}
.buscarMobile-button{
height: 36px;
border-radius: 0px 5px 5px 0px;
.buscarMobile-lupa{
border-radius: 0px 5px 5px 0px;
height: 36px;
padding: 9px;
background-color: white;
}
}
}
}

0
adilson-fernando/src/styles/Header.scss → adilson-fernando/src/styles/Main.module.scss
View File

0
adilson-fernando/src/styles/Main.scss
View File

8
adilson-fernando/src/styles/Variaveis.scss
View File

@ -0,0 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root{
$color-white: #fff;
$color-black: black;
}