feat: css 4 parte

checkout/src/arquivos/js/components/Footer.js

@@ -98,7 +98,8 @@ export default class Footer {
         });
     }
     footer() {
-        this.divFooter.innerHTML = `
+        if (window.innerWidth > 1024) {
+            this.divFooter.innerHTML = `
         <hr></hr>
         <div class="conteiner_footer">
             <div class="footerCheckout__address">
@@ -143,5 +144,54 @@ export default class Footer {
                 </ul>
                 </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>
+            `;
+        }
     }
 }

checkout/src/arquivos/sass/partials/_footer.scss

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