forked from M3-Academy/desafio-react-e-typescript
feat: adiciona funcionalidades nas listas em telas mobile e desktop
This commit is contained in:
Thiago Bronisio
parent
5778e65ac0
commit
5d2b9ea815
@ -1,7 +1,7 @@
|
||||
import React from "react"
|
||||
import LinksFooter from "./LinksFooter/LinksFooter"
|
||||
import FooterSelosDev from "./FooterSelosDev/FooterSelosDev"
|
||||
import Newsletter from "./Newsletter/Newsletter"
|
||||
import { LinksFooter } from "./LinksFooter/LinksFooter"
|
||||
import { FooterSelosDev } from "./FooterSelosDev/FooterSelosDev"
|
||||
import { Newsletter } from "./Newsletter/Newsletter"
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
background-color: var(--black);
|
||||
color: var(--white);
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
display: grid;
|
||||
padding: 15px 16px;
|
||||
}
|
||||
@ -16,12 +16,12 @@
|
||||
width: 21.667%;
|
||||
min-height: 24px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
margin: 15px 0;
|
||||
width: 234px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 467px;
|
||||
height: 47px;
|
||||
}
|
||||
@ -34,7 +34,7 @@
|
||||
text-transform: capitalize;
|
||||
color: var(--white);
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 467px;
|
||||
height: 47px;
|
||||
font-size: 20px;
|
||||
@ -47,12 +47,12 @@
|
||||
display: flex;
|
||||
width: 398.61px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
order: -1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 692px;
|
||||
height: 66px;
|
||||
}
|
||||
@ -63,14 +63,14 @@
|
||||
height: 34px;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-right: 12px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
margin-right: 11px;
|
||||
}
|
||||
|
||||
@ -83,12 +83,12 @@
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 70px;
|
||||
height: 39.27px;
|
||||
}
|
||||
@ -98,12 +98,12 @@
|
||||
width: 54.61px;
|
||||
height: 34px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
width: 45px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 106px;
|
||||
height: 66px;
|
||||
}
|
||||
@ -120,7 +120,7 @@
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
margin-right: 11px;
|
||||
height: 20px;
|
||||
}
|
||||
@ -131,7 +131,7 @@
|
||||
&__devs {
|
||||
display: flex;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
text-transform: capitalize;
|
||||
color: var(--white);
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
@ -165,7 +165,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 84.22px;
|
||||
height: 30px;
|
||||
}
|
||||
@ -177,7 +177,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 54.95px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@ import vtexCertifiedCard from "../../../assets/img/vtex.svg"
|
||||
import vtexDev from "../../../assets/img/vtex-dev.svg"
|
||||
import m3 from "../../../assets/img/m3.svg"
|
||||
|
||||
export default function FooterSelosDev() {
|
||||
export const FooterSelosDev = () => {
|
||||
|
||||
return (
|
||||
<section className={styleSelosDev["container"]}>
|
||||
@ -94,4 +94,6 @@ export default function FooterSelosDev() {
|
||||
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default FooterSelosDev;
|
||||
@ -2,7 +2,7 @@
|
||||
padding: 50px 100px;
|
||||
display: flex;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 16px;
|
||||
display: block;
|
||||
}
|
||||
@ -12,7 +12,7 @@
|
||||
justify-content: space-between;
|
||||
width: 65.463%;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
@ -27,7 +27,7 @@
|
||||
margin-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media screen and (max-width: 1025px) {
|
||||
@media (max-width: 1025px) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -38,7 +38,7 @@
|
||||
width: 7.8px;
|
||||
height: 8.28px;
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
@media (min-width: 1025px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@ -58,17 +58,21 @@
|
||||
width: 155px;
|
||||
list-style: none;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 315px;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
margin-bottom: 0;
|
||||
text-decoration: underline;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
@ -80,11 +84,7 @@
|
||||
font-family: var(--font-roboto);
|
||||
color: var(--black-100);
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@ -99,18 +99,22 @@
|
||||
&__duvidas {
|
||||
list-style: none;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
margin: 12px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 315px;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
margin-bottom: 0;
|
||||
text-decoration: underline;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
@ -122,11 +126,7 @@
|
||||
font-family: var(--font-roboto);
|
||||
color: var(--black-100);
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@ -142,11 +142,11 @@
|
||||
width: 155px;
|
||||
list-style: none;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 315px;
|
||||
}
|
||||
|
||||
@ -167,7 +167,7 @@
|
||||
width: 7.8px;
|
||||
height: 8.28px;
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
@media (min-width: 1025px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -177,7 +177,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@ -186,6 +186,10 @@
|
||||
li:last-child {
|
||||
margin-bottom: 0;
|
||||
text-decoration: underline;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-child(2) {
|
||||
@ -205,11 +209,7 @@
|
||||
font-family: var(--font-roboto);
|
||||
color: var(--black-100);
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@ -226,7 +226,7 @@
|
||||
&__social-networks {
|
||||
width: 34.537%;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
@ -249,7 +249,7 @@
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
@ -261,7 +261,7 @@
|
||||
left: 9px;
|
||||
top: 4px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 20.33px;
|
||||
height: 39.23px;
|
||||
left: 22px;
|
||||
@ -276,7 +276,7 @@
|
||||
left: 5px;
|
||||
top: 4px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 39.29px;
|
||||
height: 39.29px;
|
||||
left: 13px;
|
||||
@ -291,7 +291,7 @@
|
||||
left: 3px;
|
||||
top: 5px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 48.23px;
|
||||
height: 39.18px;
|
||||
left: 10px;
|
||||
@ -306,7 +306,7 @@
|
||||
left: 3.5px;
|
||||
top: 6.3px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 44.77px;
|
||||
height: 31.35px;
|
||||
left: 11px;
|
||||
@ -321,7 +321,7 @@
|
||||
left: 7px;
|
||||
top: 5px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 31.35px;
|
||||
height: 31.28px;
|
||||
left: 17px;
|
||||
@ -337,7 +337,7 @@
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
p {
|
||||
@ -347,7 +347,7 @@
|
||||
font-family: var(--font-roboto);
|
||||
color: var(--black-100);
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from "react"
|
||||
import React, { useState, useEffect } from "react"
|
||||
import styleLink from "./LinksFooter.module.scss"
|
||||
|
||||
import facebook from "../../../assets/img/facebook.svg"
|
||||
@ -9,62 +9,111 @@ import linkedlin from "../../../assets/img/linkedlin.svg"
|
||||
|
||||
import titleLinks from "../../../assets/img/titleLinks.svg"
|
||||
|
||||
export default function LinksFooter() {
|
||||
export const LinksFooter = () => {
|
||||
|
||||
const titleLink = document.querySelector(".container__links__rodape__title") as HTMLHeadingElement;
|
||||
console.log(titleLink)
|
||||
const [openInstitucional, setOpenInstitucional] = useState<boolean>(false);
|
||||
const [openDuvidas, setOpenDuvidas] = useState<boolean>(false);
|
||||
const [openFaleConosco, setOpenFaleConosco] = useState<boolean>(false);
|
||||
|
||||
|
||||
const handleListInstitucional = (state: boolean) => {
|
||||
if (window.innerWidth < 1024) {
|
||||
setOpenInstitucional(!state);
|
||||
}
|
||||
};
|
||||
|
||||
const handleListDuvidas = (state: boolean) => {
|
||||
if (window.innerWidth < 1024) {
|
||||
setOpenDuvidas(!state)
|
||||
}
|
||||
}
|
||||
|
||||
const handleFaleConosco = (state: boolean) => {
|
||||
if (window.innerWidth < 1024) {
|
||||
setOpenFaleConosco(!state)
|
||||
}
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth > 1024) {
|
||||
setOpenInstitucional(true)
|
||||
setOpenDuvidas(true)
|
||||
setOpenFaleConosco(true)
|
||||
} else {
|
||||
setOpenInstitucional(false)
|
||||
setOpenDuvidas(false)
|
||||
setOpenFaleConosco(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("resize", handleResize)
|
||||
},)
|
||||
|
||||
return (
|
||||
<section className={styleLink["container"]}>
|
||||
<div className={styleLink["container__links"]}>
|
||||
|
||||
<div className={styleLink["container__links__rodape"]}>
|
||||
<h2 className={styleLink["container__links__rodape__title"]}>Institucional
|
||||
<h2
|
||||
onClick={() => handleListInstitucional(openInstitucional)}
|
||||
className={styleLink["container__links__rodape__title"]}>
|
||||
Institucional
|
||||
|
||||
<button>
|
||||
<img src={titleLinks} alt="Imagem para expandir lista" />
|
||||
</button>
|
||||
</h2>
|
||||
<ul className={styleLink["container__links__rodape__institucional"]}>
|
||||
<li><a href="/teste">Quem Somos</a></li>
|
||||
<li><a href="/teste">Política de Privacidade</a></li>
|
||||
<li><a href="/teste">Segurança</a></li>
|
||||
<li><a href="/teste">Seja um Revendedor</a></li>
|
||||
</ul>
|
||||
{openInstitucional &&
|
||||
<ul className={styleLink["container__links__rodape__institucional"]}>
|
||||
<li><a href="/teste">Quem Somos</a></li>
|
||||
<li><a href="/teste">Política de Privacidade</a></li>
|
||||
<li><a href="/teste">Segurança</a></li>
|
||||
<li><a href="/teste">Seja um Revendedor</a></li>
|
||||
</ul>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<div className={styleLink["container__links__rodape"]}>
|
||||
<h2 className={styleLink["container__links__rodape__title"]}>Dúvidas
|
||||
<h2 onClick={() => handleListDuvidas(openDuvidas)} className={styleLink["container__links__rodape__title"]}>Dúvidas
|
||||
<button>
|
||||
<img src={titleLinks} alt="Imagem para expandir lista" />
|
||||
</button>
|
||||
</h2>
|
||||
<ul className={styleLink["container__links__rodape__duvidas"]}>
|
||||
<li><a href="/teste">Entrega</a></li>
|
||||
<li><a href="/teste">Pagamento</a></li>
|
||||
<li><a href="/teste">Trocas e Devoluções</a></li>
|
||||
<li><a href="/teste">Dúvidas Frequentes</a></li>
|
||||
</ul>
|
||||
|
||||
{openDuvidas &&
|
||||
<ul className={styleLink["container__links__rodape__duvidas"]}>
|
||||
<li><a href="/teste">Entrega</a></li>
|
||||
<li><a href="/teste">Pagamento</a></li>
|
||||
<li><a href="/teste">Trocas e Devoluções</a></li>
|
||||
<li><a href="/teste">Dúvidas Frequentes</a></li>
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className={styleLink["container__links__rodape"]}>
|
||||
<h2 className={styleLink["container__links__rodape__title"]}>Fale Conosco
|
||||
<h2 onClick={() => handleFaleConosco(openFaleConosco)} className={styleLink["container__links__rodape__title"]}>Fale Conosco
|
||||
<button className={styleLink["button"]}>
|
||||
<img src={titleLinks} alt="Imagem para expandir lista" />
|
||||
</button>
|
||||
</h2>
|
||||
<ul className={styleLink["container__links__rodape__fale-conosco"]}>
|
||||
<li><a href="/teste">Atendimento ao Consumidor</a></li>
|
||||
<li><a href="/teste">{"(11) 4159 9504"}</a></li>
|
||||
<li><a href="/teste">Atendimento Online</a></li>
|
||||
<li><a href="/teste">{"(11) 99433-8825"}</a></li>
|
||||
</ul>
|
||||
{openFaleConosco &&
|
||||
<ul className={styleLink["container__links__rodape__fale-conosco"]}>
|
||||
<li><a href="/teste">Atendimento ao Consumidor</a></li>
|
||||
<li><a href="/teste">{"(11) 4159 9504"}</a></li>
|
||||
<li><a href="/teste">Atendimento Online</a></li>
|
||||
<li><a href="/teste">{"(11) 99433-8825"}</a></li>
|
||||
</ul>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styleLink["container__social-networks"]}>
|
||||
<ul className={styleLink["container__social-networks__circles"]}>
|
||||
<li>
|
||||
<a href="/teste">
|
||||
<a href="/">
|
||||
<figure>
|
||||
<img className={styleLink["facebook"]} src={facebook} alt="Imagem Facebook" />
|
||||
</figure>
|
||||
@ -72,7 +121,7 @@ export default function LinksFooter() {
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/teste">
|
||||
<a href="/">
|
||||
<figure>
|
||||
<img className={styleLink["instagram"]} src={instagram} alt="Imagem Instagram" />
|
||||
</figure>
|
||||
@ -80,7 +129,7 @@ export default function LinksFooter() {
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/teste">
|
||||
<a href="/">
|
||||
<figure>
|
||||
<img className={styleLink["twitter"]} src={twitter} alt="Imagem Twitter" />
|
||||
</figure>
|
||||
@ -88,7 +137,7 @@ export default function LinksFooter() {
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/teste">
|
||||
<a href="/">
|
||||
<figure>
|
||||
<img className={styleLink["youtube"]} src={youtube} alt="Imagem Youtube" />
|
||||
</figure>
|
||||
@ -96,7 +145,7 @@ export default function LinksFooter() {
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/teste">
|
||||
<a href="/">
|
||||
<figure>
|
||||
<img className={styleLink["linkedlin"]} src={linkedlin} alt="Imagem Linkedlin" />
|
||||
</figure>
|
||||
@ -110,4 +159,6 @@ export default function LinksFooter() {
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default LinksFooter;
|
||||
@ -9,12 +9,12 @@
|
||||
padding: 16px 0;
|
||||
width: 474px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 922px;
|
||||
}
|
||||
|
||||
@ -26,13 +26,13 @@
|
||||
letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
@ -43,7 +43,7 @@
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
}
|
||||
input {
|
||||
@ -59,13 +59,13 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 668px;
|
||||
height: 59px;
|
||||
font-size: 28px;
|
||||
@ -93,14 +93,14 @@
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--white);
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media (min-width: 2500px) {
|
||||
width: 246px;
|
||||
height: 59px;
|
||||
font-size: 24px;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react"
|
||||
import styleNewsletter from "./Newsletter.module.scss"
|
||||
|
||||
export default function Newsletter() {
|
||||
export const Newsletter = () => {
|
||||
return (
|
||||
<section className={styleNewsletter["container"]}>
|
||||
|
||||
@ -9,11 +9,13 @@ export default function Newsletter() {
|
||||
<p>ASSINE NOSSA NEWSLETTER</p>
|
||||
<div className={styleNewsletter["container__wrapper__input-button"]}>
|
||||
<input type="email" placeholder="E-mail" />
|
||||
<button>
|
||||
<button type="submit">
|
||||
ENVIAR
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section >
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Newsletter
|
||||
Loading…
Reference in New Issue
Block a user