forked from M3-Academy/desafio-react-e-typescript
feat: adiciona header desktop e telas superiores
This commit is contained in:
Thiago Bronisio
parent
099d496c16
commit
b73390f6c6
@ -8,10 +8,12 @@
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
<title>React App</title>
|
||||
<title>M3 Academy</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
12
src/assets/cart.svg
Normal file
12
src/assets/cart.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3754_1375)">
|
||||
<path d="M54.3344 7.95273C54.0351 7.57862 53.5819 7.36086 53.1027 7.36086H11.1231L9.9492 2.27412C9.78398 1.55848 9.14672 1.05151 8.41228 1.05151H1.57728C0.706248 1.05151 0 1.75776 0 2.6289C0 3.50004 0.706248 4.20619 1.57728 4.20619H7.15753L15.1259 38.7358C15.291 39.4515 15.9283 39.9585 16.6628 39.9585H48.2656C49.1367 39.9585 49.8428 39.2522 49.8428 38.3812C49.8428 37.51 49.1366 36.8039 48.2656 36.8039H17.9176L16.7044 31.5462H48.3709C49.1086 31.5462 49.7478 31.0348 49.9097 30.3151L54.6416 9.28438C54.7467 8.81682 54.6338 8.32694 54.3344 7.95273Z" fill="white"/>
|
||||
<path d="M23.1336 42.0615C19.9446 42.0615 17.3501 44.6559 17.3501 47.845C17.3501 51.0341 19.9445 53.6285 23.1336 53.6285C26.3225 53.6285 28.9171 51.0341 28.9171 47.845C28.9171 44.6559 26.3226 42.0615 23.1336 42.0615Z" fill="white"/>
|
||||
<path d="M42.0613 42.0615C38.8724 42.0615 36.2778 44.6559 36.2778 47.845C36.2778 51.0341 38.8723 53.6285 42.0613 53.6285C45.2503 53.6285 47.8448 51.0341 47.8448 47.845C47.8448 44.6559 45.2504 42.0615 42.0613 42.0615Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3754_1375">
|
||||
<rect width="54.68" height="54.68" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/logo-m3.png
Normal file
BIN
src/assets/logo-m3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
10
src/assets/search.svg
Normal file
10
src/assets/search.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3751_533)">
|
||||
<path d="M25.7949 22.6886C27.5246 20.3265 28.5592 17.4252 28.5592 14.2799C28.5592 6.40637 22.1531 0.000244141 14.2796 0.000244141C6.40606 0.000244141 0 6.40637 0 14.2799C0 22.1534 6.40613 28.5596 14.2797 28.5596C17.4249 28.5596 20.3266 27.5248 22.6886 25.7951L32.0435 35.15L35.15 32.0436C35.15 32.0435 25.7949 22.6886 25.7949 22.6886V22.6886ZM14.2797 24.1658C8.82824 24.1658 4.39377 19.7313 4.39377 14.2799C4.39377 8.82848 8.82824 4.39401 14.2797 4.39401C19.7311 4.39401 24.1655 8.82848 24.1655 14.2799C24.1655 19.7313 19.731 24.1658 14.2797 24.1658Z" fill="#292929"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3751_533">
|
||||
<rect width="35.15" height="35.15" rx="5" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 829 B |
@ -1,9 +0,0 @@
|
||||
import React from "react"
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<>
|
||||
<h1>Footer</h1>
|
||||
</>
|
||||
)
|
||||
}
|
||||
13
src/components/Footer/Footer.module.scss
Normal file
13
src/components/Footer/Footer.module.scss
Normal file
@ -0,0 +1,13 @@
|
||||
.container-footer {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
|
||||
.footer-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
80
src/components/Footer/Footer.tsx
Normal file
80
src/components/Footer/Footer.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
import React from "react"
|
||||
import styleFooter from "./Footer.module.scss"
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className={styleFooter["container-footer"]}>
|
||||
<div className={styleFooter["footer-wrapper"]}>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="#" alt="#" />
|
||||
</figure>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<figure>
|
||||
<img src="#" alt="#" />
|
||||
</figure>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<figure>
|
||||
<img src="#" alt="#" />
|
||||
</figure>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<figure>
|
||||
<img src="#" alt="#" />
|
||||
</figure>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<figure>
|
||||
<img src="#" alt="#" />
|
||||
</figure>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<figure>
|
||||
<img src="#" alt="#" />
|
||||
</figure>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<figure>
|
||||
<img src="#" alt="#" />
|
||||
</figure>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<figure>
|
||||
<img src="#" alt="#" />
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<p></p>
|
||||
<img src="#" alt="#" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p></p>
|
||||
<img src="#" alt="#" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<>
|
||||
<h1>Header</h1>
|
||||
</>
|
||||
)
|
||||
}
|
||||
168
src/components/Header/Header.module.scss
Normal file
168
src/components/Header/Header.module.scss
Normal file
@ -0,0 +1,168 @@
|
||||
.container-header {
|
||||
.header-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 22px 100.32px 22px 100px;
|
||||
background-color: var(--black);
|
||||
border-bottom: 1px solid var(--gray-100);
|
||||
|
||||
&__container-logo {
|
||||
width: 12.597%;
|
||||
height: 25.86px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 11.55%;
|
||||
height: 50.5px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.logo-m3 {
|
||||
width: 100%;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
height: 50.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__container-input-busca {
|
||||
position: relative;
|
||||
width: 24.452%;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 22.421%;
|
||||
}
|
||||
|
||||
.input-busca {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 8px 44px 8px 16px;
|
||||
background: var(--white);
|
||||
border: 2px solid var(--white-100);
|
||||
border-radius: 5px;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16.41px;
|
||||
font-family: var(--font-roboto);
|
||||
|
||||
//font-family: roboto;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
height: 57px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--gray-100);
|
||||
}
|
||||
}
|
||||
|
||||
.button-search {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
top: 7px;
|
||||
right: 17px;
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 35.15px;
|
||||
height: 35.15px;
|
||||
top: 10px;
|
||||
right: 17px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 35.15px;
|
||||
height: 35.15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__container-login-cart {
|
||||
display: flex;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
margin-right: 55px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
align-items: center;
|
||||
color: var(--white);
|
||||
font-family: var(--font-roboto);
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 54.68px;
|
||||
height: 54.68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-nav {
|
||||
background-color: var(--black);
|
||||
padding: 14px 100.32px 14px 100px;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--white);
|
||||
font-family: var(--font-roboto);
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-child(2) {
|
||||
margin: 0 55px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
margin: 0 55.92px 0 55.71px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
src/components/Header/Header.tsx
Normal file
47
src/components/Header/Header.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import React from "react";
|
||||
import styleHeader from "./Header.module.scss"
|
||||
|
||||
import logo from "../assets/logo-m3.png"
|
||||
import cart from "../assets/cart.svg"
|
||||
import search from "../assets/search.svg"
|
||||
|
||||
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<header className={styleHeader["container-header"]}>
|
||||
|
||||
<div className={styleHeader["header-wrapper"]}>
|
||||
<div className={styleHeader["header-wrapper__container-logo"]}>
|
||||
<a href="teste">
|
||||
<img className={styleHeader["logo-m3"]} src={logo} alt="Logo M3 Academy" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className={styleHeader["header-wrapper__container-input-busca"]}>
|
||||
<input
|
||||
className={styleHeader["input-busca"]}
|
||||
placeholder="Buscar...">
|
||||
</input>
|
||||
<button className={styleHeader["button-search"]}>
|
||||
<img src={search} alt="Lupa de pesquisa" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styleHeader["header-wrapper__container-login-cart"]}>
|
||||
<p>ENTRAR</p>
|
||||
<img src={cart} alt="Carrinho" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<nav className={styleHeader["container-nav"]}>
|
||||
<ul>
|
||||
<li><a href="teste">CURSOS</a></li>
|
||||
<li><a href="teste">SAIBA MAIS</a></li>
|
||||
<li><a href="teste">INSTITUCIONAIS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
1
src/components/LinksFotter/LinksFotter.tsx
Normal file
1
src/components/LinksFotter/LinksFotter.tsx
Normal file
@ -0,0 +1 @@
|
||||
import react from "react"
|
||||
1
src/components/Newsletter/Newsletter.tsx
Normal file
1
src/components/Newsletter/Newsletter.tsx
Normal file
@ -0,0 +1 @@
|
||||
import react from "react"
|
||||
@ -1,5 +1,13 @@
|
||||
//VARIABLES
|
||||
:root {
|
||||
--font-roboto: "Roboto", sans-serif;
|
||||
|
||||
--black: #000000;
|
||||
|
||||
--white: #ffffff;
|
||||
--white-100: #f0f0f0;
|
||||
|
||||
--gray-100: #c4c4c4;
|
||||
}
|
||||
|
||||
* {
|
||||
|
||||
3
src/index.d.ts
vendored
Normal file
3
src/index.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
declare module '*.png'
|
||||
declare module '*.jpg'
|
||||
declare module '*.svg'
|
||||
@ -1,8 +1,6 @@
|
||||
import React from "react";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { Header } from "../components/Header"
|
||||
|
||||
|
||||
import { Footer } from "../components/Footer/Footer";
|
||||
import { Header } from "../components/Header/Header"
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user