forked from M3-Academy/desafio-react-e-typescript
feat: menuFooter deskop adicionado
This commit is contained in:
parent
983b1529e7
commit
ea19fbf070
BIN
adilson-fernando/src/assets/logos/facebook.jpg
Normal file
BIN
adilson-fernando/src/assets/logos/facebook.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
adilson-fernando/src/assets/logos/insta.jpg
Normal file
BIN
adilson-fernando/src/assets/logos/insta.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
adilson-fernando/src/assets/logos/linkedin.jpg
Normal file
BIN
adilson-fernando/src/assets/logos/linkedin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
adilson-fernando/src/assets/logos/twitter.jpg
Normal file
BIN
adilson-fernando/src/assets/logos/twitter.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
adilson-fernando/src/assets/logos/youtube.jpg
Normal file
BIN
adilson-fernando/src/assets/logos/youtube.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
@ -2,13 +2,71 @@ import React from "react";
|
||||
|
||||
import "../../styles/Global.scss";
|
||||
import "../../styles/Variaveis.scss";
|
||||
|
||||
import facebook from "../../assets/logos/facebook.jpg"
|
||||
import insta from "../../assets/logos/insta.jpg"
|
||||
import twitter from "../../assets/logos/twitter.jpg"
|
||||
import youtube from "../../assets/logos/youtube.jpg"
|
||||
import linkedin from "../../assets/logos/linkedin.jpg"
|
||||
|
||||
import styles from "../../styles/MenuFooter.module.scss";
|
||||
|
||||
const MenuFooter = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className={styles["menuFooter"]}>
|
||||
|
||||
<div className={styles["menuFooter-mobile"]}>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={styles["menuFooter-desktop"]}>
|
||||
|
||||
<div className={styles["desktop-institucional"]}>
|
||||
|
||||
<h1 className={styles["text-h1"]} >INSTITUCIONAL</h1>
|
||||
<h2 className={styles["text-h2"]} >Quem Somos</h2>
|
||||
<h2 className={styles["text-h2"]} >Política de Privacidade</h2>
|
||||
<h2 className={styles["text-h2"]} >Segurança</h2>
|
||||
<a className={styles["text-link"]} href="/">Seja um Revendedor</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={styles["desktop-duvidas"]}>
|
||||
|
||||
<h1 className={styles["text-h1"]} >DÚVIDAS</h1>
|
||||
<h2 className={styles["text-h2"]} >Entrega</h2>
|
||||
<h2 className={styles["text-h2"]} >Pagamento</h2>
|
||||
<h2 className={styles["text-h2"]} >Trocas e Devoluções</h2>
|
||||
<a className={styles["text-link"]} href="/">Dúvidas Frequentes</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={styles["desktop-faleConosco"]}>
|
||||
|
||||
<h1 className={styles["text-h1"]} >FALE CONOSCO</h1>
|
||||
<h2 className={styles["text-negrito"]} >Atendimento Ao Consumidor</h2>
|
||||
<h2 className={styles["text-h2"]} >(11)4159 9504</h2>
|
||||
<h2 className={styles["text-negrito"]} >Atendimento Online</h2>
|
||||
<a className={styles["text-link"]} href="/">(11) 99433-8825</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={styles["desktop-icons"]}>
|
||||
|
||||
<div className={styles["conteiner-icons"]} >
|
||||
|
||||
<img className={styles["icons"]} src={facebook} alt="facebook" />
|
||||
<img className={styles["icons"]} src={insta} alt="instagran" />
|
||||
<img className={styles["icons"]} src={twitter} alt="twitter" />
|
||||
<img className={styles["icons"]} src={youtube} alt="youtube" />
|
||||
<img className={styles["icons"]} src={linkedin} alt="linkedin" />
|
||||
|
||||
</div>
|
||||
|
||||
<h2 className={styles["h2-icons"]} >www.loremipsum.com</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,7 +3,6 @@ import React from "react";
|
||||
import "../../styles/Global.scss";
|
||||
import "../../styles/Variaveis.scss";
|
||||
import Newsletter from "./Newsletter";
|
||||
import Whatsapp from "../Whatsapp";
|
||||
|
||||
import styles from "../../styles/Main.module.scss";
|
||||
|
||||
|
||||
@ -0,0 +1,204 @@
|
||||
.menuFooter{
|
||||
|
||||
.menuFooter-mobile{
|
||||
display: none;
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.menuFooter-desktop{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
margin-left: 7.813%;
|
||||
@media (min-width: 2500px){
|
||||
margin-left: 4%;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
.desktop-institucional{
|
||||
width: 23.389831%;
|
||||
@media (min-width: 2500px){
|
||||
width: 25.3333%;
|
||||
}
|
||||
.text-h1{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: #303030;
|
||||
margin-bottom: 12px;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
.text-h2{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #303030;
|
||||
margin-bottom: 12px;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.text-link{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-decoration-line: underline;
|
||||
color: #303030;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.desktop-duvidas{
|
||||
width: 23.389831%;
|
||||
@media (min-width: 2500px){
|
||||
width: 25.3333%;
|
||||
}
|
||||
.text-h1{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: #303030;
|
||||
margin-bottom: 12px;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
.text-h2{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #303030;
|
||||
margin-bottom: 12px;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.text-link{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-decoration-line: underline;
|
||||
color: #303030;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.desktop-faleConosco{
|
||||
width: 26.525424%;
|
||||
@media (min-width: 2500px){
|
||||
width: 28.916667%;
|
||||
}
|
||||
.text-h1{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: #303030;
|
||||
margin-bottom: 12px;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
.text-h2{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #303030;
|
||||
margin-bottom: 12px;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.text-negrito{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: #303030;
|
||||
margin-bottom: 12px;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.text-link{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-decoration-line: underline;
|
||||
text-transform: capitalize;
|
||||
color: #303030;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.desktop-icons{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.conteiner-icons{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
.icons{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.h2-icons{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #303030;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user