forked from M3-Academy/desafio-react-e-typescript
feat: add atualizando classes
This commit is contained in:
parent
70b44d5c2f
commit
3936bd6a7c
@ -1,21 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
@ -24,12 +24,12 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
<title>Institucional</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
@ -38,6 +38,5 @@
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
--></body>
|
||||
</html>
|
||||
|
||||
0
src/components/Atomo/Link
Normal file
0
src/components/Atomo/Link
Normal file
@ -1,21 +1,20 @@
|
||||
import React from 'react'
|
||||
import FooterMenu from './FooterMenu'
|
||||
import './footer.scss'
|
||||
import iconFacebook from '../../assets/svgs/icon-facebook.svg'
|
||||
import iconInstagram from '../../assets/svgs/icon-instagram.svg'
|
||||
import iconTwitter from '../../assets/svgs/icon-twitter.svg'
|
||||
import iconYoutube from '../../assets/svgs/icon-youtube.svg'
|
||||
import iconLinkedin from '../../assets/svgs/icon-linkedin.svg'
|
||||
import iconM3 from '../../assets/imgs/icon-m3.png'
|
||||
import logoBoleto from '../../assets/imgs/logo-boleto.png'
|
||||
import logoDiners from '../../assets/imgs/logo-diners.png'
|
||||
import logoElo from '../../assets/imgs/logo-elo.png'
|
||||
import logoHiper from '../../assets/imgs/logo-hiper.png'
|
||||
import logoMaster from '../../assets/imgs/logo-master.png'
|
||||
import logoPagseguro from '../../assets/imgs/logo-pagseguro.png'
|
||||
import logoVisa from '../../assets/imgs/logo-visa.png'
|
||||
import logoVtexPci from '../../assets/imgs/logo-vtex-pci-200.png'
|
||||
import logoVtex from '../../assets/imgs/logo-vtex.png'
|
||||
import iconFacebook from './assets/icon-facebook.svg'
|
||||
import iconInstagram from './assets/icon-instagram.svg'
|
||||
import iconTwitter from './assets/icon-twitter.svg'
|
||||
import iconYoutube from './assets/icon-youtube.svg'
|
||||
import iconLinkedin from './assets/icon-linkedin.svg'
|
||||
import iconM3 from './assets/icon-m3.png'
|
||||
import logoBoleto from './assets/logo-boleto.png'
|
||||
import logoDiners from './assets/logo-diners.png'
|
||||
import logoElo from './assets/logo-elo.png'
|
||||
import logoHiper from './assets/logo-hiper.png'
|
||||
import logoMaster from './assets/logo-master.png'
|
||||
import logoPagseguro from './assets/logo-pagseguro.png'
|
||||
import logoVisa from './assets/logo-visa.png'
|
||||
import logoVtexPci from './assets/logo-vtex-pci-200.png'
|
||||
import logoVtex from './assets/logo-vtex.png'
|
||||
|
||||
const Footer = () => {
|
||||
const menuListData = [
|
||||
@ -47,10 +46,10 @@ const Footer = () => {
|
||||
<div className="newsletter-wrapper">
|
||||
<div className="newsletter">
|
||||
<h3 className="newsletter-title">Assine nossa newsletter</h3>
|
||||
<div className='second-wrapper'>
|
||||
<input className="newsletter-input" type="email" name="" id="" placeholder="E-mail"/>
|
||||
<form className='second-wrapper'>
|
||||
<input className="newsletter-input" type="email" name="email" placeholder="E-mail" required/>
|
||||
<button className="newsletter-btn" type="submit">Enviar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -147,15 +146,15 @@ const Footer = () => {
|
||||
</div>
|
||||
|
||||
<div className="payment-metods">
|
||||
<img src={logoMaster} alt="Logo Visa" />
|
||||
<img src={logoVisa} alt="Logo " />
|
||||
<img src={logoDiners} alt="Logo " />
|
||||
<img src={logoElo} alt="Logo " />
|
||||
<img src={logoHiper} alt="Logo " />
|
||||
<img src={logoPagseguro} alt="Logo " />
|
||||
<img src={logoBoleto} alt="Logo " />
|
||||
<img src={logoMaster} alt="Logo MasterCard" className='logoMaster'/>
|
||||
<img src={logoVisa} alt="Logo Visa" className='logoVisa'/>
|
||||
<img src={logoDiners} alt="Logo Diners" className='logoDiners'/>
|
||||
<img src={logoElo} alt="Logo Elo" className='logoElo'/>
|
||||
<img src={logoHiper} alt="Logo Hiper" className='logoHiper'/>
|
||||
<img src={logoPagseguro} alt="Logo Pagseguro" className='logoPagseguro'/>
|
||||
<img src={logoBoleto} alt="Logo boleto" className='logoBoleto'/>
|
||||
<div className="line"></div>
|
||||
<img src={logoVtexPci} alt="Logo " />
|
||||
<img src={logoVtexPci} alt="Logo vtex pci" className='logoVtexPci'/>
|
||||
</div>
|
||||
|
||||
<div className="authors">
|
||||
@ -174,4 +173,4 @@ const Footer = () => {
|
||||
|
||||
}
|
||||
|
||||
export default Footer
|
||||
export { Footer }
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react'
|
||||
|
||||
interface IFooterMenuProps{
|
||||
interface footerMenuProps{
|
||||
title: string;
|
||||
content1: string;
|
||||
content2: string;
|
||||
@ -8,11 +8,11 @@ interface IFooterMenuProps{
|
||||
content4: string;
|
||||
}
|
||||
|
||||
const FooterMenu = (props: IFooterMenuProps) => {
|
||||
const FooterMenu = (props: footerMenuProps) => {
|
||||
const [isActive, setIsActive] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="footer-menu-item">
|
||||
<div className="footer-menu-item" id={props.title.replace(/\s/g, '')}>
|
||||
<div
|
||||
className="footer-menu-title"
|
||||
onClick={() => setIsActive(!isActive)}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@import "../../styles/utils/variaveis";
|
||||
|
||||
footer {
|
||||
.newsletter-wrapper {
|
||||
display: flex;
|
||||
@ -90,6 +88,7 @@ footer {
|
||||
}
|
||||
|
||||
.newsletter-btn {
|
||||
cursor: pointer;
|
||||
padding: 14px 0;
|
||||
width: 126px;
|
||||
background-color: $color-black;
|
||||
@ -168,15 +167,25 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
.footer-menu-content {
|
||||
cursor: pointer;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: $color-gray-200;
|
||||
|
||||
&:last-child {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#FaleConosco li:nth-child(2),
|
||||
#FaleConosco li:nth-child(4) {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -280,10 +289,6 @@ footer {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -337,7 +342,7 @@ footer {
|
||||
|
||||
.line {
|
||||
height: 24px;
|
||||
width: 1px;
|
||||
min-width: 1px;
|
||||
background-color: $color-gray-600;
|
||||
}
|
||||
|
||||
@ -351,6 +356,12 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
&:last-child {
|
||||
width: 54.61px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 30px;
|
||||
height: 17px;
|
||||
@ -385,6 +396,7 @@ footer {
|
||||
|
||||
.m3,
|
||||
.vtex {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import React from 'react'
|
||||
import './contactForm.scss'
|
||||
|
||||
import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"
|
||||
import { Formik, Form, Field, ErrorMessage } from "formik"
|
||||
import FormSchema from '../../schema/FormSchema';
|
||||
|
||||
interface IFormikValues{
|
||||
name: string;
|
||||
@ -10,6 +8,7 @@ interface IFormikValues{
|
||||
birthDate: string;
|
||||
phone: string;
|
||||
instagram: string;
|
||||
check: boolean;
|
||||
}
|
||||
|
||||
const initialValues = {
|
||||
@ -19,33 +18,55 @@ const initialValues = {
|
||||
birthDate: "",
|
||||
phone: "",
|
||||
instagram: "",
|
||||
check: false
|
||||
}
|
||||
|
||||
const ContactForm = () => {
|
||||
const handleFormikSubmit = (values: IFormikValues) => {
|
||||
const handleFormikSubmit = (values: IFormikValues, { resetForm }: any) => {
|
||||
let successMessage:any = document.querySelector('.success-message')
|
||||
|
||||
let intervalo = window.setInterval(function () {
|
||||
successMessage.innerText = "*Formulário enviado com sucesso!"
|
||||
}, 800)
|
||||
|
||||
window.setTimeout(function () {
|
||||
clearInterval(intervalo)
|
||||
successMessage.innerText = ""
|
||||
}, 30000)
|
||||
|
||||
console.log(values);
|
||||
resetForm({values: ''})
|
||||
}
|
||||
|
||||
return <Formik onSubmit={handleFormikSubmit} initialValues={initialValues}>
|
||||
<Form>
|
||||
return <Formik
|
||||
onSubmit={handleFormikSubmit}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
<Form className='form'>
|
||||
<div className='form-input-box'>
|
||||
<label htmlFor="name">Nome</label>
|
||||
<Field id="name" name="name" placeholder="Seu nome completo" className="form-input"/>
|
||||
<ErrorMessage component='span' name="name" className='form-invalid-feedback'/>
|
||||
<Field id="name" name="name" placeholder="Seu nome completo" className="form-input" />
|
||||
</div>
|
||||
<div className='form-input-box'>
|
||||
<label htmlFor="email">E-mail</label>
|
||||
<ErrorMessage component='span' name="email" className='form-invalid-feedback'/>
|
||||
<Field id="email" name="email" placeholder="Seu e-mail" className="form-input"/>
|
||||
</div>
|
||||
<div className='form-input-box'>
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<ErrorMessage component='span' name="cpf" className='form-invalid-feedback'/>
|
||||
<Field id="cpf" name="cpf" placeholder="000.000.000-00" className="form-input"/>
|
||||
</div>
|
||||
<div className='form-input-box'>
|
||||
<label htmlFor="birthDate">Data de Nascimento:</label>
|
||||
<ErrorMessage component='span' name="birthDate" className='form-invalid-feedback'/>
|
||||
<Field id="birthDate" name="birthDate" placeholder="00.00.0000" className="form-input"/>
|
||||
</div>
|
||||
<div className='form-input-box'>
|
||||
<label htmlFor="phone">Telefone:</label>
|
||||
<ErrorMessage component='span' name="phone" className='form-invalid-feedback'/>
|
||||
<Field id="phone" name="phone" placeholder="(00) 00000-0000" className="form-input"/>
|
||||
</div>
|
||||
<div className='form-input-box'>
|
||||
@ -54,11 +75,14 @@ const ContactForm = () => {
|
||||
</div>
|
||||
|
||||
<div className='check-input-box'>
|
||||
<label htmlFor="check"> <span>*</span> Declaro que li e aceito</label>
|
||||
<ErrorMessage component='span' name="check" className='form-invalid-feedback-check' />
|
||||
<span>*</span>
|
||||
<label htmlFor="check">Declaro que li e aceito</label>
|
||||
<Field type="checkbox" id="check" name="check"/>
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" className='form-submit-btn'>Cadastre-se</button>
|
||||
<div className='success-message'></div>
|
||||
</Form>
|
||||
</Formik>
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@import "../../styles/utils/variaveis";
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -17,6 +15,11 @@ form {
|
||||
line-height: 16px;
|
||||
color: $color-black-200;
|
||||
padding-left: 15px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@ -28,18 +31,43 @@ form {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-450;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.form-invalid-feedback {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding-right: 120px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
padding-top: 15px;
|
||||
color: $color-red;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check-input-box {
|
||||
@ -47,26 +75,38 @@ form {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4.28px;
|
||||
padding-left: 15px;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
text-decoration: underline;
|
||||
line-height: 16px;
|
||||
color: $color-black-200;
|
||||
padding-left: 15px;
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
span {
|
||||
text-decoration: none;
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
.form-invalid-feedback-check {
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-submit-btn {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
background-color: $color-black;
|
||||
padding: 16.72px 0;
|
||||
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@ -74,5 +114,19 @@ form {
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
padding: 16.5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.success-message {
|
||||
color: $color-green;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,44 +1,56 @@
|
||||
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 logoM3Academy from '../../assets/imgs/logo-m3-academy.png';
|
||||
import { useState } from 'react'
|
||||
import iconCart from './assets/icon-cart.svg';
|
||||
import iconLupa from './assets/icon-lupa.svg';
|
||||
import iconMenu from './assets/icon-menu.svg';
|
||||
import iconClose from './assets/icon-close.svg';
|
||||
import logoM3Academy from './assets//logo-m3-academy.png';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<img className='menu-mobile' src={iconMenu} alt="Menu" />
|
||||
<img className='logo-m3-academy' src={logoM3Academy} alt="Logo M3 Academy" />
|
||||
<div className="search-bar">
|
||||
<input className='search-input' type="search" name="" id="" placeholder='Buscar..'/>
|
||||
<img className='icon-lupa' src={iconLupa} alt="Icone de lupa" />
|
||||
</div>
|
||||
<div className="right">
|
||||
<a className='btn btn-entrar' href="/entrar">Entrar</a>
|
||||
<a href="/cart">
|
||||
<img className='icon-cart' src={iconCart} alt="Icone de carrinho de compras" />
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
const [active, setMode] = useState(false);
|
||||
const ToggleMode = () => {
|
||||
setMode(!active)
|
||||
}
|
||||
|
||||
<nav className='navbar'>
|
||||
<div className="menu">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/cursos">Cursos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/saiba-mais">Saiba mais</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/institucionais">Institucionais</a>
|
||||
</li>
|
||||
</ul>
|
||||
return (
|
||||
<header className={active ? "active" : ""}>
|
||||
<div className='header-wrapper'>
|
||||
<button className='btn menu-mobile' onClick={ToggleMode}>
|
||||
<img src={iconMenu} alt="Menu" />
|
||||
</button>
|
||||
<a href='/'>
|
||||
<img className='logo-m3-academy' src={logoM3Academy} alt="Logo M3 Academy" />
|
||||
</a>
|
||||
<div className="search-bar">
|
||||
<input className='search-input' type="search" name="" id="" placeholder='Buscar..'/>
|
||||
<img className='icon-lupa' src={iconLupa} alt="Icone de lupa" />
|
||||
</div>
|
||||
<div className="right">
|
||||
<button className='btn btn-entrar'>Entrar</button>
|
||||
<button className='btn icon-cart'>
|
||||
<img src={iconCart} alt="Icone de carrinho de compras" />
|
||||
</button>
|
||||
<button className='btn btn-close' onClick={ToggleMode}>
|
||||
<img src={iconClose} alt="Icone de fechar" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
<nav className='navbar'>
|
||||
<div className="menu">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/cursos">Cursos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/saiba-mais">Saiba mais</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/institucionais">Institucionais</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
export { Header }
|
||||
@ -1,216 +1,246 @@
|
||||
@import "../../styles/utils/variaveis";
|
||||
|
||||
header,
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: $color-black;
|
||||
padding: 22px 100px;
|
||||
border-bottom: solid 1px $color-gray-600;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 25px 16px;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"menu logo cart"
|
||||
"input input input";
|
||||
.header-wrapper,
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-mobile {
|
||||
display: none;
|
||||
.header-wrapper {
|
||||
background-color: $color-black;
|
||||
padding: 22px 100px;
|
||||
border-bottom: solid 1px $color-gray-600;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
grid-area: menu;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-m3-academy {
|
||||
cursor: pointer;
|
||||
width: 136px;
|
||||
height: 25.86px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: logo;
|
||||
margin: 0 auto;
|
||||
padding: 25px 16px;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"menu logo cart"
|
||||
"input input input";
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 265.62px;
|
||||
height: 50.5px;
|
||||
}
|
||||
}
|
||||
.menu-mobile {
|
||||
display: none;
|
||||
|
||||
.search-bar {
|
||||
width: 24.815%;
|
||||
height: 36px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: input;
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
grid-area: menu;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 57px;
|
||||
width: 22.3914%;
|
||||
.logo-m3-academy {
|
||||
cursor: pointer;
|
||||
width: 136px;
|
||||
height: 25.86px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: logo;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 265.62px;
|
||||
height: 50.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
.search-bar {
|
||||
width: 24.815%;
|
||||
height: 36px;
|
||||
|
||||
&::placeholder {
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: input;
|
||||
width: 100%;
|
||||
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;
|
||||
font-size: 14px;
|
||||
line-height: 16.41px;
|
||||
line-height: 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray-500;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16.41px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@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 {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: -27px;
|
||||
float: right;
|
||||
margin-right: 18px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 35.15px;
|
||||
width: 35.15px;
|
||||
top: -46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 55px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: cart;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-entrar {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-cart {
|
||||
@media (min-width: 2500px) {
|
||||
height: 54.68px;
|
||||
width: 54.68px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.navbar {
|
||||
background-color: $color-black;
|
||||
padding: 14px 100px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
gap: 55px;
|
||||
|
||||
li a {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@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 {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: -27px;
|
||||
float: right;
|
||||
margin-right: 18px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 35.15px;
|
||||
width: 35.15px;
|
||||
top: -46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 55px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: cart;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-entrar {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.navbar {
|
||||
background-color: $color-black;
|
||||
padding: 14px 100px;
|
||||
|
||||
// @media (max-width: 1024px) {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
//Menu sidebar
|
||||
&.active {
|
||||
display: block;
|
||||
nav.navbar {
|
||||
display: block;
|
||||
width: 0;
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $color-white;
|
||||
.menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $blur-gray;
|
||||
|
||||
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 {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
background: $color-white;
|
||||
padding: 31px 0 404px 16px;
|
||||
margin: 78px 36px 0 0;
|
||||
|
||||
li a {
|
||||
color: $color-gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
gap: 55px;
|
||||
.right {
|
||||
.btn-entrar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
position: fixed;
|
||||
margin-right: 36px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: -webkit-fill-available;
|
||||
background: black;
|
||||
padding: 31px 16px 31px 16px;
|
||||
}
|
||||
|
||||
li a {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
.btn-close {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
right: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import './global.scss'
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './pages/App';
|
||||
|
||||
import './styles/main.scss'
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user