forked from M3-Academy/desafio-react-e-typescript
feature/challenge #1
@ -11,11 +11,11 @@
|
||||
padding-right: 16px;
|
||||
|
||||
@media #{$mq-tablet} {
|
||||
bottom: 22px;
|
||||
bottom: 51px;
|
||||
}
|
||||
|
||||
@media #{$mq-mobile} {
|
||||
bottom: 16px;
|
||||
bottom: 29px;
|
||||
}
|
||||
|
||||
&__list {
|
||||
|
@ -57,7 +57,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__card {
|
||||
li{
|
||||
margin-right: 12px;
|
||||
|
||||
width: 70px;
|
||||
@ -87,11 +87,20 @@
|
||||
|
||||
@media #{$mq-mobile} {
|
||||
width: 30px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
@media (max-width: 310px) {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
&.vtex-security {
|
||||
width: 45px;
|
||||
|
||||
@media (max-width: 310px) {
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -10,6 +10,7 @@ import visa from "../../../../assets/imgs/visa.png";
|
||||
import vtex from "../../../../assets/imgs/vtex-pci-200.png";
|
||||
import vtexLogo from "../../../../assets/imgs/vtex-logo.png";
|
||||
import m3Logo from "../../../../assets/imgs/m3-logo-footer.png";
|
||||
import { Icone } from "../../../Atoms/Icones/Icone";
|
||||
|
||||
const FooterBottom = () => {
|
||||
return (
|
||||
@ -20,33 +21,23 @@ const FooterBottom = () => {
|
||||
</p>
|
||||
<div className={styles["footer__bottom__payments"]}>
|
||||
<ul className={styles["footer__bottom__payments__cards"]}>
|
||||
<li className={styles["footer__bottom__payments__cards__card"]}>
|
||||
<img src={master} alt="Cartão Mastercard" />
|
||||
</li>
|
||||
<li className={styles["footer__bottom__payments__cards__card"]}>
|
||||
<img src={visa} alt="Cartão Visa" />
|
||||
</li>
|
||||
<li className={styles["footer__bottom__payments__cards__card"]}>
|
||||
<img src={diners} alt="Cartão American Express" />
|
||||
</li>
|
||||
<li className={styles["footer__bottom__payments__cards__card"]}>
|
||||
<img src={elo} alt="Cartão Elo" />
|
||||
</li>
|
||||
<li className={styles["footer__bottom__payments__cards__card"]}>
|
||||
<img src={hiper} alt="Cartão Hipercard" />
|
||||
</li>
|
||||
<li className={styles["footer__bottom__payments__cards__card"]}>
|
||||
<img src={pagseguro} alt="PagSeguro" />
|
||||
</li>
|
||||
<li className={styles["footer__bottom__payments__cards__card"]}>
|
||||
<img src={boleto} alt="Boleto" />
|
||||
</li>
|
||||
<Icone src={master} alt="Cartão Mastercard" />
|
||||
|
||||
<Icone src={visa} alt="Cartão Visa" />
|
||||
|
||||
<Icone src={diners} alt="Cartão American Express" />
|
||||
|
||||
<Icone src={elo} alt="Cartão Elo" />
|
||||
|
||||
<Icone src={hiper} alt="Cartão Hipercard" />
|
||||
|
||||
<Icone src={pagseguro} alt="PagSeguro" />
|
||||
|
||||
<Icone src={boleto} alt="Boleto" />
|
||||
</ul>
|
||||
<div className={styles["footer__bottom__payments__divider"]}></div>
|
||||
<ul className={styles["footer__bottom__payments__security"]}>
|
||||
<li className={styles["footer__bottom__payments-cards__card"]}>
|
||||
<img src={vtex} alt="Vtex PCI - SECURITY" />
|
||||
</li>
|
||||
<Icone src={vtex} alt="Vtex PCI - SECURITY" />
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles["footer__bottom__development"]}>
|
||||
|
@ -143,14 +143,10 @@
|
||||
line-height: 33px;
|
||||
color: $color-black-500;
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user