AdilsonFernandoNevesOrnellas/m3-academy-template-checkout-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: css 4 parte

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2022-12-18 22:20:58 -03:00
parent 8cef3f3598
commit 1afd6f74d1
2 changed files with 57 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
checkout/src/arquivos/js/components/Footer.js
View File

@ -98,6 +98,7 @@ export default class Footer {
}); });
} }
footer() { footer() {
if (window.innerWidth > 1024) {
this.divFooter.innerHTML = ` this.divFooter.innerHTML = `
<hr></hr> <hr></hr>
<div class="conteiner_footer"> <div class="conteiner_footer">
@ -143,5 +144,54 @@ export default class Footer {
</ul> </ul>
</div> </div>
`; `;
} else {
this.divFooter.innerHTML = `
<hr></hr>
<div class="conteiner_footer">
<ul class="footerCheckout__stamps">
<li>
<span class="footerCheckout__payments" style="display: flex; align-items: center;
justify-content: center;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="mastercard" style="width: 35px; margin-right: 13px; margin-left: 137px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="visa" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="american" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="elo" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="hipercard" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="paypal" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="boleto" style="width: 35px; margin-right: 13px;">
</span>
</li>
<li>
<span class="footerCheckout__stamps__divider"></span>
</li>
<li>
<span class="footerCheckout__payments">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="logoCertificado" style="width: 53px; margin-right: 90px;">
</span>
</li>
</ul>
<div class="footerCheckout__address">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<ul class="footerCheckout__developedBy">
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="logoVTEX" style="width: 45px;">
</a>
</li>
<li style="width: 217px; >
<a href="https://agenciam3.com/">
<span>Developed By</span>
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="logoM3" style="width: 29px; margin-left: 10px;">
</a>
</li>
</ul>
</div>
`;
}
} }
} }

6
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -10,6 +10,12 @@ hr{
display: flex; display: flex;
align-items: center; align-items: center;
padding: 22px 22px 22px 32px; padding: 22px 22px 22px 32px;
@media (max-width: 1024px) {
flex-direction: column;
align-items: center;
justify-content: center;
justify-items: center;
}
.footerCheckout { .footerCheckout {
border-top: none; border-top: none;
color: $color-gray2; color: $color-gray2;