forked from M3-Academy/desafio-react-e-typescript
Feat(Footer): Cria Footer Midle(Links) e Bottom(Cards...) #2
186
desafio/src/components/Footer.tsx
Normal file
186
desafio/src/components/Footer.tsx
Normal file
@ -0,0 +1,186 @@
|
||||
import React from "react";
|
||||
|
||||
import styles from "../scss/partials/footer.module.scss"
|
||||
|
||||
import CardMaster from "../assets/imgs/CardMaster.png"
|
||||
import CardAmex from "../assets/imgs/CardAmex.png"
|
||||
import CardElo from "../assets/imgs/CardElo.png"
|
||||
import CardVisa from "../assets/imgs/CardVisa.png"
|
||||
import CardHiper from "../assets/imgs/CardHiper.png"
|
||||
import Paypal from "../assets/imgs/Paypal.png"
|
||||
import Boleto from "../assets/imgs/Boleto.png"
|
||||
import VtexPci from "../assets/imgs/vtex-pci-200.png"
|
||||
|
||||
import LogoM3 from "../assets/imgs/LogoM3.png"
|
||||
import LogoVtex from "../assets/imgs/LogoVtex.png"
|
||||
|
||||
import facebookIcon from "../assets/svgs/facebookIcon.svg"
|
||||
import instagramIcon from "../assets/svgs/instagramIcon.svg"
|
||||
import twitterIcon from "../assets/svgs/twitterIcon.svg"
|
||||
import youtubeIcon from "../assets/svgs/youtubeIcon.svg"
|
||||
import linkedinIcon from "../assets/svgs/linkedinIcon.svg"
|
||||
|
||||
|
||||
const Footer = () => {
|
||||
return <footer className={styles["page-footer"]}>
|
||||
<FooterMidle/>
|
||||
<FooterBottom/>
|
||||
|
||||
</footer>
|
||||
}
|
||||
|
||||
const FooterMidle = () => {
|
||||
return <section className={styles["page-footer__fM-wrapper"]}>
|
||||
<div className={styles["page-footer__fM-colum-wrapper"]}>
|
||||
<div className={styles["page-footer__fM-colum-wrapper__colum"]}>
|
||||
<h4 className={styles["page-footer__fM-colum-wrapper__Title"]}>Institucional</h4>
|
||||
|
||||
<ul className={styles["page-footer__fM-colum-wrapper__links"]}>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Quem Somos</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Política de Privacidade</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Segurança</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Seja um Revendedor</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles["page-footer__fM-colum-wrapper__colum"]}>
|
||||
<h4 className={styles["page-footer__fM-colum-wrapper__Title"]}>dÚVIDAS</h4>
|
||||
|
||||
<ul className={styles["page-footer__fM-colum-wrapper__links"]}>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Quem Somos</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Política de Privacidade</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Segurança</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Seja um Revendedor</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles["page-footer__fM-colum-wrapper__colum"]}>
|
||||
<h4 className={styles["page-footer__fM-colum-wrapper__Title"]}>Institucional</h4>
|
||||
|
||||
<ul className={styles["page-footer__fM-colum-wrapper__links"]}>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<h5>Atendimento ao Consumidor</h5>
|
||||
<a href="">(11) 4159 9504</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<h5>Atendimento online</h5>
|
||||
<a href="">(11) 4159 9504</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles["page-footer__fM-colum-wrapper__colum-social"]}>
|
||||
|
||||
<ul className={styles["page-footer__fM-colum-wrapper__links-social"]}>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
|
||||
<a href=""><img src= { facebookIcon } alt="" /></a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
|
||||
<a href=""><img src= { instagramIcon } alt="" /></a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
|
||||
<a href=""><img src= { twitterIcon } alt="" /></a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
|
||||
<a href=""><img src= { youtubeIcon } alt="" /></a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
|
||||
<a href=""><img src= { linkedinIcon } alt="" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="">www.loremipsum.com</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
const FooterBottom = () => {
|
||||
return <section className={styles["page-footer__fB-wrapper"]}>
|
||||
<div className={styles["page-footer__wrapper-content"]}>
|
||||
<div className={styles["page-footer__fB-wrapper__text-wrapper"]}><p className={styles["page-footer__fB-wrapper__text-wrapper__text"]}> Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor</p></div>
|
||||
|
||||
<div className={styles["page-footer__fB-wrapper__cards-total-wrapper"]}>
|
||||
<ul className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper"]}>
|
||||
<li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
|
||||
<figure><img src= { CardMaster } alt="" /></figure>
|
||||
</li>
|
||||
<li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
|
||||
<figure><img src= { CardVisa } alt="" /></figure>
|
||||
</li>
|
||||
<li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
|
||||
<figure><img src= { CardAmex } alt="" /></figure>
|
||||
</li>
|
||||
<li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
|
||||
<figure><img src= { CardElo } alt="" /></figure>
|
||||
</li>
|
||||
<li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
|
||||
<figure><img src= { CardHiper } alt="" /></figure>
|
||||
</li>
|
||||
<li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
|
||||
<figure><img src= { Paypal } alt="" /></figure>
|
||||
</li>
|
||||
<li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
|
||||
<figure><img src= { Boleto } alt="" /></figure>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__divider"]}><span></span></li>
|
||||
|
||||
<li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
|
||||
<figure><img src= { VtexPci } alt="" /></figure>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper"]}>
|
||||
<ul className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper"]}>
|
||||
<li className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies"]}>
|
||||
<span className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies__text"]}>Powered by</span>
|
||||
<a className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies__image"]} href=""><img src= { LogoVtex } alt="" /></a>
|
||||
</li>
|
||||
<li className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies"]}>
|
||||
<span className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies__text"]}>Developed by</span>
|
||||
<a className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies__image"]} href=""><img src= { LogoM3 } alt="" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
|
||||
export { Footer };
|
||||
@ -1,10 +1,12 @@
|
||||
import React from "react";
|
||||
|
||||
import { Header } from "../components/Header"
|
||||
import { Footer } from "../components/Footer"
|
||||
|
||||
const Home = () => {
|
||||
return <>
|
||||
<Header/>
|
||||
<Footer/>
|
||||
</>;
|
||||
};
|
||||
|
||||
|
||||
197
desafio/src/scss/partials/footer.module.scss
Normal file
197
desafio/src/scss/partials/footer.module.scss
Normal file
@ -0,0 +1,197 @@
|
||||
.page-footer {
|
||||
width: 100%;
|
||||
|
||||
figure{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__wrapper-content{
|
||||
width: 84.38%;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
&__fM-wrapper{
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
&__fM-colum-wrapper{
|
||||
width: 84.38%;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 121px;
|
||||
justify-content: center;
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
font-family: var(--font-roboto);
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: var(--black2);
|
||||
}
|
||||
|
||||
&__colum{
|
||||
|
||||
max-width: 155px;
|
||||
|
||||
a{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
h5{
|
||||
margin: 0;
|
||||
font-family: var(--font-roboto);
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: var(--black2);
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__Title{
|
||||
margin: 0;
|
||||
font-family: var(--font-roboto);
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: var(--black2);
|
||||
padding-bottom: 12px;
|
||||
|
||||
}
|
||||
|
||||
&__links,
|
||||
&__links-social{
|
||||
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__links{
|
||||
outline: 0;
|
||||
|
||||
&__link{
|
||||
display: grid;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__links-social{
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
|
||||
a{
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
&__link{
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__fB-wrapper{
|
||||
background-color: var(--black1);
|
||||
width: 100%;
|
||||
|
||||
&__text-wrapper{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
|
||||
&__text{
|
||||
color: var(--white1);
|
||||
margin: 0;
|
||||
font-family: var(--font-roboto);
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
width: 69.64%;
|
||||
}
|
||||
}
|
||||
|
||||
&__cards-total-wrapper{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
|
||||
&__cards-wrapper{
|
||||
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
|
||||
&__cards{
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&__divider{
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background-color: var(--grey2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__developmentTechnologies-wrapper{
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
|
||||
&__wrapper{
|
||||
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
margin: 0;
|
||||
justify-items: end;
|
||||
gap: 13px;
|
||||
|
||||
&__tecnologies{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
|
||||
&__text{
|
||||
color: var(--white1);
|
||||
font-family: var(--font-roboto);
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&__image{
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user