emmanuelvitor/desafio-react-e-typescript-emmanuelvitor
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cria componentes para o header, menu hamburguer e header totalmente responsivo #2

Merged
emmanuelvitor merged 1 commits from feature/header into development 2023-01-12 02:28:24 +00:00
Conversation 0 Commits 1 Files Changed 20 +748 -66
20 changed files with 748 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9b88010cf8 - Show all commits

3
public/index.html
View File

@ -3,6 +3,9 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<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:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta

12
src/assets/svg/cart.svg
View File

@ -1,12 +0,0 @@
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3751_539)">
<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.1338 42.0615C19.9449 42.0615 17.3503 44.6559 17.3503 47.845C17.3503 51.0341 19.9448 53.6285 23.1338 53.6285C26.3228 53.6285 28.9173 51.0341 28.9173 47.845C28.9173 44.6559 26.3229 42.0615 23.1338 42.0615Z" fill="white"/>
<path d="M42.0614 42.0615C38.8725 42.0615 36.278 44.6559 36.278 47.845C36.278 51.0341 38.8724 53.6285 42.0614 53.6285C45.2504 53.6285 47.8449 51.0341 47.8449 47.845C47.8449 44.6559 45.2505 42.0615 42.0614 42.0615Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_3751_539">
<rect width="54.68" height="54.68" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

9
src/assets/svg/logo.svg
View File

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

Before

Width:  |  Height:  |  Size: 19 KiB

10
src/assets/svg/search.svg
View File

@ -1,10 +0,0 @@
<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.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>
Side by Side

Before

Width:  |  Height:  |  Size: 821 B

3
src/components/Header/Header.scss
View File

@ -1,3 +0,0 @@
header{
background-color: #000;
}

37
src/components/Header/Header.tsx
View File

@ -1,34 +1,17 @@
import React from "react";
import './Header.scss';
import logo from "../../assets/svg/logo.svg"
import search from "../../assets/svg/search.svg"
import cart from "../../assets/svg/cart.svg"
import { HeaderTop } from "./HeaderDesk/HeaderTop";
import { HeaderBottom } from "./HeaderDesk/HeaderBottom";
import { HeaderMobile } from "./HeaderMobile/HeaderMobile";
const Header = ()=>{
import styleHeader from './styles/Header.module.scss';
export const Header = () => {
return (
<header className="header">
<div className="container__header__top">
<div className="container__logo">
< img src={logo} alt="Logo M3" className="container__logo__img" />
</div>
<div className="container__search">
<input className="container__search__input" type="text" placeholder="Buscar"/>
<img className="container__search__img" src={search} alt="" />
</div>
<div className="container__menu" >
<span className="container__menu__enter">
<a href="/">Entrar</a>
</span>
<span className="container__menu_cart">
<a href="/" ><img src={cart} alt="icone de cart" /></a>
</span>
</div>
</div>
<div className="container__header__bottom">
</div>
<header className={styleHeader["header"]}>
<HeaderTop />
<HeaderBottom />
<HeaderMobile />
</header>
)
}
export {Header}

20
src/components/Header/HeaderDesk/HeaderBottom.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from "react";
import styleHeader from '../styles/Header.module.scss';
export const HeaderBottom = () => {
return (
<div className={styleHeader["header__bottom"]}>
<nav className={styleHeader["navBar__items"]}>
<a className={styleHeader["list__items__link"]} href="/cursos">
Cursos
</a>
<a className={styleHeader["list__items__link"]} href="/saiba-mais">
Saiba Mais
</a>
<a className={styleHeader["list__items__link"]} href="/institucionais">
Institucionais
</a>
</nav>
</div>
);
}

34
src/components/Header/HeaderDesk/HeaderTop.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import logo from "../assets/svgs/logo.svg";
import search from "../assets/svgs/search.svg";
import cart from "../assets/svgs/cart.svg";
import styleHeader from '../styles/Header.module.scss';
export const HeaderTop = () => {
return (
<div className={styleHeader["header__top"]}>
<div className={styleHeader["container__header__top"]}>
<div className={styleHeader["container__logo"]}>
< img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} />
</div>
<form className={styleHeader["container__search"]}>
<input className={styleHeader["container__search__input"]} type="text" placeholder="Buscar..." />
<a className={styleHeader["container__search__link"]} href="/">
<img className={styleHeader["container__search__link__img"]} src={search} alt="Icone de busca" />
</a>
</form>
<div className={styleHeader["container__menu"]} >
<span className={styleHeader["container__menu__enter"]}>
<a href="/">Entrar</a>
</span>
<span className={styleHeader["container__menu__cart"]}>
<a href="/" >
<img src={cart} alt="icone de cart" />
</a>
</span>
</div>
</div>
</div>
);
}

49
src/components/Header/HeaderMobile/BurguerMenu.tsx Normal file
View File

@ -0,0 +1,49 @@
import React from "react";
import closeIcon from "../assets/svgs/icon-close.svg";
import styleHeader from '../styles/Header.module.scss';
interface MenuMobile {
isOpenMenu: boolean;
setisOpenMenu: React.Dispatch<React.SetStateAction<boolean>>
}
export const BurguerMenu = ({ isOpenMenu, setisOpenMenu }: MenuMobile) => {
return (
< div className={isOpenMenu
? `${styleHeader["wrapper"]} ${styleHeader['aberto']}`
: `${styleHeader["wrapper"]}`} >
<div className={styleHeader["content"]}>
<div className={styleHeader["header__menu"]} >
<div className={styleHeader["header__menu__wrapper"]}>
<span className={styleHeader["menu__enter"]}>
<a href="/">Entrar</a>
</span>
<span className={styleHeader["close"]} onClick={() => setisOpenMenu(false)}>
<img src={closeIcon} alt="Botão de fechar" onClick={() => setisOpenMenu(false)} />
</span>
</div>
</div>
{/* Esse nav vai viraar um componente */}
<nav className={styleHeader["navBar__items"]}>
{/* esse "a" vai virar um componente */}
<a className={styleHeader["list__items__link"]} href="/cursos">
Cursos
</a>
<a className={styleHeader["list__items__link"]} href="/saiba-mais">
Saiba Mais
</a>
<a className={styleHeader["list__items__link"]} href="/institucionais">
Institucionais
</a>
</nav>
</div>
<div className={styleHeader["overlay"]} onClick={() => setisOpenMenu(false)}></div>
</div >
);
}

42
src/components/Header/HeaderMobile/HeaderMobile.tsx Normal file
View File

@ -0,0 +1,42 @@
import { useState } from "react";
import logo from "../assets/svgs/logo.svg";
import search from "../assets/svgs/search.svg";
import cart from "../assets/svgs/cart.svg";
import burguerIcon from "../assets/svgs/burger-icon.svg";
import styleHeader from '../styles/Header.module.scss';
import { BurguerMenu } from "./BurguerMenu";
export const HeaderMobile = () => {
const [isOpenMenu, setisOpenMenu] = useState(false);
return (
<div className={styleHeader["header__mobile"]}>
<div className={styleHeader["mobile__wrapper"]} >
<div className={styleHeader["wrapper__icon-burger"]}>
<img src={burguerIcon} alt="Menu Hamburguer" onClick={() => setisOpenMenu(true)} />
</div>
<div className={styleHeader["container__logo"]}>
< img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} />
</div>
<div className={styleHeader["container__menu"]} >
<span className={styleHeader["container__menu_cart"]}>
<a href="/" ><img src={cart} alt="icone de cart" /></a>
</span>
</div>
</div>
<form className={styleHeader["container__search__mobile"]}>
<input className={styleHeader["container__search__input"]} type="text" placeholder="Buscar..." />
<a className={styleHeader["container__search__link"]} href="/">
<img src={search} alt="Icone de busca" />
</a>
</form>
<BurguerMenu isOpenMenu={isOpenMenu}
setisOpenMenu={setisOpenMenu} />
</div>
);
}

5
src/components/Header/assets/svgs/burger-icon.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 688 B

12
src/components/Header/assets/svgs/cart.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4778_970)">
<path d="M27.823 4.07236C27.6697 3.88079 27.4377 3.76928 27.1923 3.76928H5.69581L5.09469 1.16451C5.01009 0.798054 4.68377 0.538452 4.30768 0.538452H0.80768C0.361648 0.538452 0 0.9001 0 1.34619C0 1.79227 0.361648 2.15387 0.80768 2.15387H3.66516L7.7455 19.8355C7.83005 20.2019 8.15642 20.4615 8.53251 20.4615H24.7154C25.1614 20.4615 25.523 20.0999 25.523 19.6539C25.523 19.2078 25.1614 18.8462 24.7154 18.8462H9.17509L8.55384 16.1539H24.7693C25.1471 16.1539 25.4744 15.892 25.5573 15.5235L27.9803 4.75426C28.0342 4.51483 27.9763 4.26398 27.823 4.07236Z" fill="white"/>
<path d="M11.8462 21.5385C10.2132 21.5385 8.88464 22.867 8.88464 24.5C8.88464 26.133 10.2132 27.4615 11.8462 27.4615C13.4792 27.4615 14.8077 26.133 14.8077 24.5C14.8077 22.867 13.4792 21.5385 11.8462 21.5385Z" fill="white"/>
<path d="M21.5385 21.5385C19.9055 21.5385 18.5769 22.867 18.5769 24.5C18.5769 26.133 19.9054 27.4615 21.5385 27.4615C23.1714 27.4615 24.5 26.133 24.5 24.5C24.5 22.867 23.1715 21.5385 21.5385 21.5385Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4778_970">
<rect width="28" height="28" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
src/components/Header/assets/svgs/icon-close.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 638 B

9
src/components/Header/assets/svgs/logo.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

10
src/components/Header/assets/svgs/search.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4778_966)">
<path d="M13.2094 11.6186C14.0951 10.409 14.6249 8.92328 14.6249 7.31261C14.6249 3.28064 11.3444 0.00012207 7.31245 0.00012207C3.28048 0.00012207 0 3.28064 0 7.31261C0 11.3446 3.28052 14.6251 7.31248 14.6251C8.92315 14.6251 10.409 14.0952 11.6186 13.2094L16.4092 18L18 16.4092C18 16.4092 13.2094 11.6186 13.2094 11.6186ZM7.31248 12.3751C4.52086 12.3751 2.25001 10.1042 2.25001 7.31261C2.25001 4.52098 4.52086 2.25013 7.31248 2.25013C10.1041 2.25013 12.375 4.52098 12.375 7.31261C12.375 10.1042 10.1041 12.3751 7.31248 12.3751Z" fill="#303030"/>
</g>
<defs>
<clipPath id="clip0_4778_966">
<rect width="18" height="18" rx="5" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 799 B

501
src/components/Header/styles/Header.module.scss Normal file
View File

@ -0,0 +1,501 @@
li {
list-style: none;
}
a {
text-decoration: none;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: #FFFFFF;
position: relative;
@media (min-width:2500px) {
font-size: 28px;
line-height: 33px;
}
&:hover {
text-decoration: none;
}
&:active,
&:visited {
text-decoration: none;
}
}
.header {
display: flex;
flex-direction: column;
// AREA HEADER TOP
&__top {
background-color: #000;
display: flex;
height: 75px;
border-bottom: 1px solid #C4C4C4;
@media (min-width:2500px) {
height: 100px;
}
@media (max-width:1025px) {
display: none;
}
.container__header__top {
display: flex;
align-items: center;
margin: 0 7.8125%;
width: 100%;
.container__logo {
display: block;
width: 100%;
max-width: 162px;
@media (min-width:2500px) {
max-width: 265.62px;
}
&__img {
display: block;
width: 100%;
height: 25.86px;
@media (min-width:2500px) {
height: 50.5px;
}
}
}
.container__search {
width: 100%;
height: 32px;
margin: 0 auto;
display: flex;
justify-content: center;
max-width: 264px;
@media (min-width:2500px) {
max-width: none;
width: 24.44444%;
height: 57px;
}
&__input {
width: 262px;
font-size: 1rem;
outline: none;
padding-left: 16px;
border-radius: 5px;
color: #C4C4C4;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
@media (min-width:2500px) {
width: 100%;
height: 57px;
font-size: 28px;
line-height: 33px;
}
&::placeholder {
color: #C4C4C4;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
@media (min-width:2500px) {
font-size: 28px;
line-height: 33px;
}
}
&:focus {
transition: 0.35s ease;
color: #000;
&::-webkit-input-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
&::-moz-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
&:-ms-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
}
&:focus {
transition: 0.35s ease;
color: #000;
&::-webkit-input-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
&::-moz-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
&:-ms-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
}
}
&__link {
position: relative;
float: right;
width: 18px;
height: 18px;
top: 7px;
right: 32px;
@media (min-width:2500px) {
top: 14px;
right: 64px;
img {
width: 35.15px;
height: 35.15px;
}
}
}
}
.container__menu {
display: flex;
align-items: center;
width: 100%;
max-width: 136px;
justify-content: space-between;
@media (min-width:2500px) {
max-width: 214.68px;
}
&__enter {
a {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: #FFFFFF;
@media (min-width:2500px) {
font-size: 28px;
line-height: 33px;
}
}
}
&__cart {
a {
img {
@media (min-width:2500px) {
width: 54.68px;
height: 54.68px;
}
}
}
}
}
}
.search-container {
width: 490px;
display: block;
margin: 0 auto;
}
.search-icon {
position: relative;
float: right;
width: 75px;
height: 75px;
top: -62px;
right: -45px;
}
}
// AREA HEADER BOTTOM
&__bottom {
width: 100%;
height: 44px;
@media (min-width:2500px) {
height: 61px;
}
background-color: #000;
display: flex;
align-items: center;
@media (max-width:1025px) {
display: none;
}
.navBar {
width: 100%;
position: relative;
&__toggle {
display: none;
}
}
}
.navBar__items {
width: 100%;
max-width: 349px;
margin: 0 7.8125%;
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 0;
@media (min-width:2500px) {
max-width: 588.62px;
justify-content: space-between;
}
@media (max-width:1024px) {
display: flex;
align-items: initial;
flex-direction: column;
row-gap: 12px;
margin: 31px 16px;
z-index: 9;
}
.list__items__link {
&::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: #FFFFFF;
transition: all .45s;
}
@media (max-width:1024px) {
color: #C4C4C4;
}
&:hover::before {
width: 100%;
}
}
}
// AREA HEADER MOBILE
&__mobile {
background-color: #000;
display: flex;
flex-direction: column;
height: auto;
row-gap: 30.5px;
padding: 25px 0;
@media (min-width:1025px) {
display: none;
}
.mobile__wrapper {
width: 96.875%;
display: flex;
margin: 0 16px;
align-items: center;
justify-content: space-between;
@media (max-width:768px) {
width: 94%;
}
@media (max-width:490px) {
width: 91.466666666666666666666666666667%;
}
.container__hamburguer {
background-color: lightgray;
width: 30px;
height: 30px;
}
}
.container__search__mobile {
width: 96.875%;
height: 32px;
display: flex;
justify-content: center;
margin: 0 16px;
max-width: 992px;
background-color: #FFFFFF;
border-radius: 5px;
@media (max-width:768px) {
width: 94%;
}
@media (max-width:490px) {
width: 91.466666666666666666666666666667%;
}
.container__search__input {
width: 100%;
font-size: 1rem;
outline: none;
padding-left: 16px;
border: none;
border-radius: 5px;
&::placeholder {
color: #C4C4C4;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
}
&:focus {
transition: 0.35s ease;
color: #000;
&::-webkit-input-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
&::-moz-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
&:-ms-placeholder {
transition: opacity 0.45s ease;
opacity: 0;
}
}
}
.container__search__link {
position: relative;
float: right;
width: 18px;
height: 18px;
top: 7px;
right: 16px;
}
}
}
}
// AREA DO MENU HAMBURGUER
@media (max-width:1025px) {
.wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-items: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: all .45s;
}
.wrapper.aberto {
opacity: 1;
pointer-events: all;
}
.content {
position: fixed;
top: 0;
width: 96.484375%;
height: 585px;
background-color: #FFFFFF;
z-index: 8;
@media (max-width:490px) {
width: 90.4%;
}
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
transition: all .45s;
}
}
.header__menu {
background-color: #000;
height: 78px;
display: flex;
align-items: center;
&__wrapper {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0 16px;
}
}

6
src/index.css
View File

@ -1,3 +1,4 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@ -5,9 +6,14 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: gray;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
a{
text-decoration: none;
}

9
src/index.tsx
View File

@ -1,13 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Header } from './components/Header/Header';
import { Home } from './pages/Home';
import './index.css';
function App() {
return (
<div className="App">
<Header/>
</div>
<Home />
);
}
@ -15,5 +14,5 @@ const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<App />
<App />
);

11
src/pages/Home.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
import { Header } from "../components/Header/Header";
export const Home = ()=>{
return(
<>
<Header/>
</>
)
}

28
variables.scss Normal file
View File

@ -0,0 +1,28 @@
/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
$font-family: "Open Sans", sans-serif;
$font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */
$color-black: #000000;
$color-black2: #292929;
$color-black3: #58595B;
$color-white: #fff;
$color-gray: #6c6c6c;
$color-gray2: #7D7D7D;
$color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$color-gray6: #C4C4C4;
$color-gray7: #e0e0e0;
$color-blue: #4267b2;
$color-blue2: #00C8FF;
$color-green: #4caf50;
$color-orange: #f15a31;