forked from M3-Academy/desafio-react-e-typescript
feat(home): adicionando footer top ao desktop
home
This commit is contained in:
parent
87ee812346
commit
d40a6ae747
@ -5,6 +5,7 @@ $font-family: 'Roboto', sans-serif;
|
||||
/* Colors */
|
||||
$color-black: #000;
|
||||
$color-black-transparent: rgba(69, 69, 69, 0.7);
|
||||
$color-black-500: #303030;
|
||||
|
||||
$color-white: #fff;
|
||||
$color-primary-700: #F2F2F2;
|
||||
|
||||
BIN
src/assets/imgs/logo-facebook.png
Normal file
BIN
src/assets/imgs/logo-facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 818 B |
BIN
src/assets/imgs/logo-instagram.png
Normal file
BIN
src/assets/imgs/logo-instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1014 B |
BIN
src/assets/imgs/logo-linkedin.png
Normal file
BIN
src/assets/imgs/logo-linkedin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 847 B |
BIN
src/assets/imgs/logo-twitter.png
Normal file
BIN
src/assets/imgs/logo-twitter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 988 B |
BIN
src/assets/imgs/logo-youtube.png
Normal file
BIN
src/assets/imgs/logo-youtube.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 897 B |
@ -1,9 +1,11 @@
|
||||
import { FooterBottom } from './FooterBottom/FooterBottom';
|
||||
import styles from './Footer.module.scss';
|
||||
import { FooterTop } from './FooterTop/FooterTop';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className={styles['footer']}>
|
||||
<FooterTop />
|
||||
<FooterBottom />
|
||||
</footer>
|
||||
)
|
||||
|
||||
@ -13,7 +13,7 @@ import m3Logo from '../../../assets/imgs/m3-logo-footer.png';
|
||||
|
||||
const FooterBottom = () => {
|
||||
return (
|
||||
<div className={styles['footer__bottom']}>
|
||||
<section className={styles['footer__bottom']}>
|
||||
<p className={styles['footer__bottom__paragrafo']}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing <br/>
|
||||
elit, sed do eiusmod tempor
|
||||
@ -59,7 +59,7 @@ const FooterBottom = () => {
|
||||
<img src={m3Logo} alt='Logo M3'/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
94
src/components/Footer/FooterTop/FooterTop.module.scss
Normal file
94
src/components/Footer/FooterTop/FooterTop.module.scss
Normal file
@ -0,0 +1,94 @@
|
||||
@import '../../../variaveis';
|
||||
|
||||
.footer__top {
|
||||
width: calc(100% - 200px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 50px 100px;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-right: 121px;
|
||||
|
||||
&__title {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $color-black-500;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
&__item-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
gap: 12px;
|
||||
|
||||
}
|
||||
&__item:last-child {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&__link {
|
||||
text-decoration: none;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: $color-black-500;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__block-social {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
margin-left: 37px;
|
||||
|
||||
&__social-medias {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px;
|
||||
list-style: none;
|
||||
|
||||
&__logo {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__site {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-black-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
129
src/components/Footer/FooterTop/FooterTop.tsx
Normal file
129
src/components/Footer/FooterTop/FooterTop.tsx
Normal file
@ -0,0 +1,129 @@
|
||||
import styles from './FooterTop.module.scss'
|
||||
|
||||
import facebook from '../../../assets/imgs/logo-facebook.png';
|
||||
import instagram from '../../../assets/imgs/logo-instagram.png';
|
||||
import twitter from '../../../assets/imgs/logo-twitter.png';
|
||||
import youtube from '../../../assets/imgs/logo-youtube.png';
|
||||
import linkedin from '../../../assets/imgs/logo-linkedin.png';
|
||||
|
||||
const FooterTop = () => {
|
||||
return (
|
||||
<section className={styles['footer__top']}>
|
||||
<div className={styles['footer__top__wrapper']}>
|
||||
<div className={styles['footer__top__block']}>
|
||||
<h4 className={styles['footer__top__block__title']}> INSTITUCIONAL </h4>
|
||||
|
||||
<ul className={styles['footer__top__block__item-list']}>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Quem Somos
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Política de Privacidade
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Segurança
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Seja um Revendedor
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles['footer__top__block']}>
|
||||
<h4 className={styles['footer__top__block__title']}> DÚVIDAS </h4>
|
||||
|
||||
<ul className={styles['footer__top__block__item-list']}>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Entrega
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Pagamento
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Entrega
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Dúvidas Frequentes
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles['footer__top__block']}>
|
||||
<h4 className={styles['footer__top__block__title']}> INSTITUCIONAL </h4>
|
||||
|
||||
<ul className={styles['footer__top__block__item-list']}>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Atendimento Ao <br/> Consumidor
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Política de Privacidade
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Segurança
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block__item']}>
|
||||
<a href="/" className={styles['footer__top__block__link']}>
|
||||
Seja um Revendedor
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles['footer__top__block-social']}>
|
||||
<ul className={styles['footer__top__block-social__social-medias']}>
|
||||
<li className={styles['footer__top__block-social__social-medias__logo']}>
|
||||
<a href="/" target='_blank' rel='noreferrer' >
|
||||
<img src={facebook} alt="Logo Facebook" />
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block-social__social-medias__logo']}>
|
||||
<a href="/" target='_blank' rel='noreferrer' >
|
||||
<img src={instagram} alt="Logo instagram" />
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block-social__social-medias__logo']}>
|
||||
<a href="/" target='_blank' rel='noreferrer' >
|
||||
<img src={twitter} alt="Logo twitter" />
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block-social__social-medias__logo']}>
|
||||
<a href="/" target='_blank' rel='noreferrer' >
|
||||
<img src={youtube} alt="Logo youtube" />
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles['footer__top__block-social__social-medias__logo']}>
|
||||
<a href="/" target='_blank' rel='noreferrer' >
|
||||
<img src={linkedin} alt="Logo linkedin" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span className={styles['footer__top__block-social__social-medias__site']}>www.loremipsum.com</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export { FooterTop }
|
||||
Loading…
Reference in New Issue
Block a user