feat: adiciona area de infos do footer desktop e mobile

This commit is contained in:
Cainã Milech 2022-12-07 22:43:01 -03:00
parent c0e6a5e225
commit bb7f174765
5 changed files with 155 additions and 68 deletions

View File

@ -58,3 +58,100 @@
} }
} }
} }
.footer-infos {
&__labels {
display: flex;
justify-content: center;
@include mq(md, max) {
flex-direction: column;
}
@include mq(md, min) {
align-items: center;
padding: 16px 0;
border-bottom: 1px solid $gray-100;
}
}
&__payment,
&__security {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: center;
margin: 0;
@include mq(md, max) {
justify-content: center;
padding: 24px 0;
}
}
&__payment {
gap: 8px;
@include mq(md, max) {
border-bottom: 1px solid $gray-100;
}
}
&__security {
gap: 16px;
}
&__divider {
width: 1px;
height: 51px;
margin: 0 24px;
background: $gray-100;
@include mq(md, max) {
display: none;
}
}
&__company {
display: flex;
align-items: center;
justify-content: center;
@include mq(md, max) {
flex-direction: column;
padding-bottom: 24px;
}
@include mq(md, min) {
padding: 12px 0;
}
}
&__copyright {
margin: 0 16px 0 0;
line-height: 12px;
font-size: 10px;
color: $gray-200;
@include mq(md, max) {
margin-right: 0;
text-align: center;
}
}
&__development {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: center;
gap: 16px;
}
&__developed-by {
margin-right: 7px;
line-height: 12px;
font-size: 10px;
color: $gray-200;
}
}

View File

@ -395,12 +395,6 @@ body {
font-size: 12px; font-size: 12px;
} }
body {
@include mq(md, max) {
padding-bottom: 67px;
}
}
html { html {
font-family: $font-family; font-family: $font-family;
line-height: $font-height; line-height: $font-height;

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -1,66 +1,62 @@
<section class="footer"> <section class="footer-infos">
<div class="selos"> <div class="footer-infos__labels">
<div class="container-fluid"> <ul class="footer-infos__payment">
<div class="row"> <li>
<div class="col-12"> <i class="sprite sprite-master"></i>
<ul class="pagamento"> </li>
<li><i class="sprite sprite-master"></i></li>
<li><i class="sprite sprite-visa"></i></li> <li>
<li><i class="sprite sprite-diners"></i></li> <i class="sprite sprite-visa"></i>
<li><i class="sprite sprite-elo"></i></li> </li>
<li><i class="sprite sprite-hiper"></i></li>
<li><i class="sprite sprite-pagseguro"></i></li> <li>
<li><i class="sprite sprite-boleto"></i></li> <i class="sprite sprite-diners"></i>
</ul> </li>
<ul class="certificados">
<li><i class="sprite sprite-vtex-pci"></i></li> <li>
<li><i class="sprite sprite-google-safe-browser"></i></li> <i class="sprite sprite-elo"></i>
</ul> </li>
</div>
</div> <li>
</div> <i class="sprite sprite-hiper"></i>
</li>
<li>
<i class="sprite sprite-pagseguro"></i>
</li>
<li>
<i class="sprite sprite-boleto"></i>
</li>
<div class="footer-infos__divider"></div>
</ul>
<ul class="footer-infos__security">
<li>
<i class="sprite sprite-vtex-pci"></i>
</li>
<li>
<i class="sprite sprite-google-safe-browser"></i>
</li>
</ul>
</div> </div>
<div class="container-fluid razao">
<div class="row"> <div class="footer-infos__company">
<div class="col-12 col-md-6 cnpj"> <p class="footer-infos__copyright">COPYRIGTH © 2020 - LOJA COMERCIO ELETRÔNICO | CNPJ: 000.000.000/0001-00
<p> </p>
Copyright &#9400; 2019 - Loja Sweeter Comércio Eletrônico |
<span>CNPJ: 000.000.000/0001-00</span> <div class="footer-infos__development">
</p> <a href="https://vtex.com/br-pt/" target="_blank" title="VTEX">
<p> <i class="sprite sprite-vtex-icon"></i>
Rua 7 de Setembro, 3795 Centro - São Paulo/SP </a>
</p>
</div> <a href="https://m3ecommerce.com/" target="_blank" title="M3">
<div class="col-12 col-md-6 desenvolvimento"> <span class="footer-infos__developed-by">Developed by</span>
<a href="#" target="_blank"> <i class="sprite sprite-m3-icon"></i>
<i class="sprite sprite-vtex"></i> </a>
</a>
<a href="https://digitalm3.com.br/" target="_blank">
<span>Developed by </span>
<i class="sprite sprite-m3"></i>
</a>
</div>
</div> </div>
</div> </div>
</section> </section>
<div class="scroll-to-top">
<i class="sprite sprite-top"></i>
</div>
<div class="mobile-bottom-options">
<ul>
<li class="show-menu">
<button class="option" aria-label="Abir menu"></button>
</li>
<li class="show-search">
<button class="option" aria-label="Abrir busca"></button>
</li>
<li class="show-carrinho">
<div class="AmountItemsInCart">
<i class="sprite sprite-shopping-bag"></i>
<vtex.cmc:AmountItemsInCart />
</div>
</li>
</ul>
</div>