GuilhermeDeCamargoBarbosa/desafio-react-e-typescript-guilherme-de-camargo-barbosa
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: criacao do footer e estilizacao de quase tudo

Browse Source
This commit is contained in:
Guilherme de Camargo Barbosa 2023-01-02 23:55:43 -03:00
parent 42def1265e
commit d25de35bec
1 changed files with 109 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/Footer/index.tsx
View File

@ -18,6 +18,114 @@ import style from "./style.module.css";
export function Footer() {
return (
<h1>Footer</h1>
<footer>
<div className={style.containerNewsLetter}>
<div className={style.contentNewsLetter}>
<h3>Assine nossa Newsletter</h3>
<form action="/">
<input type="text" />
<button type="submit">ENVIAR</button>
</form>
</div>
</div>
<div className={style.containerFooter}>
<div className={style.contentFooter}>
<div className={style.contentListInstitucional}>
<h4>INSTITUCIONAL</h4>
<ul>
<a href="/">
<li>Quem Somos</li>
</a>
<a href="/">
<li>Política de Privacidade</li>
</a>
<a href="/">
<li>Segurança</li>
</a>
<a href="/">
<li>Seja um Revendedor</li>
</a>
</ul>
</div>
<div className={style.contentListDoubt}>
<h4>DÚVIDAS</h4>
<ul>
<a href="/">
<li>Entrega</li>
</a>
<a href="/">
<li>Pagamento</li>
</a>
<a href="/">
<li>Trocas e Devoluções</li>
</a>
<a href="/">
<li>Dúvidas Frequentes</li>
</a>
</ul>
</div>
<div className={style.contentListContact}>
<h4>FALE CONOSCO</h4>
<ul>
<a href="/">
<li>
<span>Atendimento ao Consumidor</span>
<span>(11) 4159 9504</span>
</li>
</a>
<a href="/">
<li>
<span>Atendimento Online</span>
<span className={style.line}>(11) 99433-8825</span>
</li>
</a>
</ul>
</div>
<div className={style.contentListIcons}>
<div className={style.contentListIconsWrapper}>
<div className={style.listIcons}>
<img src={iconFace} alt="icone do facebook" />
<img src={iconInsta} alt="icone do Instagram" />
<img src={iconTwitter} alt="icone do Twitter" />
<img src={iconYoutube} alt="icone do Youtube" />
<img src={iconIN} alt="icone do LinkedIn" />
</div>
<span>www.loremipsum.com</span>
</div>
</div>
</div>
</div>
<div className={style.containerFooterInfo}>
<div className={style.containerInfoWrapper}>
<div className={style.contentInfoFooter}>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor
</span>
</div>
<div className={style.contentIconsPay}>
<img src={iconMaster} alt="icone Master Card" />
<img src={iconVisa} alt="icone Visa" />
<img src={iconDiners} alt="icone Diners" />
<img src={iconElo} alt="icone Elo" />
<img src={iconHiper} alt="icone Hiper Card" />
<img src={iconPagSeguro} alt="icone PayPal" />
<img src={iconBoleto} alt="icone Boleto" />
<span></span>
<img src={iconVtexPCI} alt="icone Vtex PCI 200" />
</div>
<div className={style.iconsVtexAndM3}>
<div className={style.contentVtexIcon}>
<span>Powered by</span>
<img src={iconVtex} alt="icone Vtex" />
</div>
<div className={style.contentM3Icon}>
<span>Developed by</span>
<img src={iconM3} alt="icone M3" />
</div>
</div>
</div>
</div>
</footer>
);
}