feat: adiciona footer links mobile e desktop
This commit is contained in:
parent
91d9f2c58a
commit
c0e6a5e225
@ -3,8 +3,10 @@
|
|||||||
padding: 24px 15px;
|
padding: 24px 15px;
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
max-width: 698px;
|
@include mq(lg, min) {
|
||||||
margin: 0 auto;
|
max-width: 698px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
|
|||||||
@ -1,360 +1,60 @@
|
|||||||
/***************************************************************/
|
.footer-links {
|
||||||
/**-- Footer ------------------------------********************/
|
@include mq(md, min) {
|
||||||
/*-------------------------------------------------------------*/
|
padding: 29px 0 25px;
|
||||||
|
border: 1px solid $gray-100;
|
||||||
.footer {
|
|
||||||
background-color: #142032;
|
|
||||||
|
|
||||||
.institucional-info {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
margin: auto;
|
|
||||||
max-width: 950px;
|
|
||||||
padding: 0 15px 25px;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
font-size: 16px;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.titulo {
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 27px 0 17px;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
font-size: 22px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
max-width: 310px;
|
|
||||||
margin: auto;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover li a {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
li a {
|
|
||||||
transition: all 0.15s linear;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.institucional-links {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contato-sac {
|
|
||||||
font-size: 12px;
|
|
||||||
@include mq(md, max) {
|
|
||||||
border-bottom: 1px solid #19273d;
|
|
||||||
padding: 10px 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
|
|
||||||
&:last-child() {
|
|
||||||
font-size: 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
span {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.redes-sociais {
|
|
||||||
h3 {
|
|
||||||
@include mq(md, max) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
@include mq(md, max) {
|
|
||||||
margin-top: 25px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
@include mq(md, min) {
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.selos {
|
&__wrapper {
|
||||||
border-top: 1px solid #19273d;
|
display: grid;
|
||||||
padding: 5px 0;
|
grid-template-columns: repeat(3, max-content);
|
||||||
text-align: center;
|
gap: 148px;
|
||||||
|
|
||||||
@include mq(md, min) {
|
|
||||||
border-bottom: 1px solid #19273d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-12 {
|
|
||||||
@include mq(md, max) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
display: inline-block;
|
|
||||||
@include mq(md, max) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pagamento {
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
border-bottom: 1px solid #19273d;
|
|
||||||
padding-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mq(md, min) {
|
|
||||||
border-right: 1px solid hsla(0, 0%, 90%, 1);
|
|
||||||
margin-right: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
&:not(:last-child) {
|
|
||||||
@include mq(md, min) {
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.certificados {
|
|
||||||
li {
|
|
||||||
&:not(:last-child) {
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.razao {
|
|
||||||
font-size: 10px;
|
|
||||||
max-width: 1500px;
|
|
||||||
margin: auto;
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: hsla(220, 1%, 43%, 1);
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
@include mq(md, max) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: hsla(220, 1%, 43%, 1);
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cnpj {
|
|
||||||
@include mq(md, max) {
|
|
||||||
padding: 20px 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.desenvolvimento {
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:nth-child(2) {
|
|
||||||
@include mq(md, max) {
|
|
||||||
border-left: 1px solid hsla(0, 0%, 90%, 1);
|
|
||||||
border-right: 1px solid hsla(0, 0%, 90%, 1);
|
|
||||||
margin-right: 20px;
|
|
||||||
margin-left: 20px;
|
|
||||||
padding-right: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-bottom-options {
|
|
||||||
background-color: #fff;
|
|
||||||
border-top: 1px solid hsla(0, 0%, 90%, 1);
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
margin-bottom: -65px;
|
|
||||||
opacity: 0;
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
visibility: hidden;
|
|
||||||
z-index: 6;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
margin-bottom: 0;
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
@include mq(md, max) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__block {
|
||||||
|
@include mq(md, max) {
|
||||||
|
padding: 24px 15px;
|
||||||
|
border-bottom: 1px solid $gray-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
line-height: 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__items-list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
&--social-networks {
|
||||||
display: inline-block;
|
display: grid;
|
||||||
width: 33%;
|
grid-auto-flow: column;
|
||||||
}
|
grid-auto-columns: max-content;
|
||||||
|
gap: 16px;
|
||||||
.option {
|
align-items: center;
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
height: 66px;
|
|
||||||
outline: none;
|
|
||||||
padding: 10px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
@extend .sprite;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.show-search {
|
&__item {
|
||||||
.option:before {
|
padding: 4px 0;
|
||||||
@extend .sprite;
|
line-height: 12px;
|
||||||
@extend .sprite-lupa;
|
font-size: 10px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.show-carrinho {
|
&__link {
|
||||||
li:not(.amount-items),
|
color: $black-500;
|
||||||
strong,
|
transition: color 0.2s linear;
|
||||||
.title {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.AmountItemsInCart {
|
@include mq(lg, min) {
|
||||||
line-height: 0;
|
&:hover {
|
||||||
text-align: center;
|
color: $blue-500;
|
||||||
}
|
|
||||||
|
|
||||||
.portal-totalizers-ref {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.cartInfoWrapper {
|
|
||||||
@extend .sprite;
|
|
||||||
@extend .sprite-sacola;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.amount-items {
|
|
||||||
background-color: #142032;
|
|
||||||
border-radius: 50%;
|
|
||||||
bottom: 2px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 1.3;
|
|
||||||
min-width: 19px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 3px 4px;
|
|
||||||
position: absolute;
|
|
||||||
right: -8px;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
|
||||||
right: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-menu {
|
|
||||||
margin-top: -2px;
|
|
||||||
|
|
||||||
.option:before {
|
|
||||||
@extend .sprite;
|
|
||||||
@extend .sprite-menu-bottom;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
src/arquivos/sprite/facebook-icon.png
Normal file
BIN
src/arquivos/sprite/facebook-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 381 B |
BIN
src/arquivos/sprite/instagram-icon.png
Normal file
BIN
src/arquivos/sprite/instagram-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 928 B |
BIN
src/arquivos/sprite/youtube-icon.png
Normal file
BIN
src/arquivos/sprite/youtube-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 496 B |
@ -1,64 +1,83 @@
|
|||||||
<section class=" footer">
|
<section class="footer-links">
|
||||||
<div class="container-fluid">
|
<div class="footer-links__wrapper">
|
||||||
<div class="row">
|
<div class="footer-links__block">
|
||||||
<div class="institucional-info col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2 row">
|
<h4 class="footer-links__title">DÚVIDAS</h4>
|
||||||
<div class="institucional-links col-12 col-md-4 offset-md-0">
|
|
||||||
<h3 class="titulo">Dúvidas</h3>
|
<ul class="footer-links__items-list">
|
||||||
<ul>
|
<li class="footer-links__item">
|
||||||
<li><a href="/institucional/sobre" title="Sobre">Sobre</a></li>
|
<a class="footer-links__link" href="/institucional/sobre">SOBRE</a>
|
||||||
<li><a href="/institucional/pagamento" title="Formas de Pagamento">Formas de Pagamento</a></li>
|
</li>
|
||||||
<li><a href="/institucional/entrega" title="Entrega">Entrega</a></li>
|
|
||||||
<li><a href="/institucional/troca-devolucao" title="Troca e Devolução">Troca e Devolução</a></li>
|
<li class="footer-links__item">
|
||||||
<li><a href="/institucional/seguranca-privacidade" title="Segurança e Privacidade">Segurança e Privacidade</a></li>
|
<a class="footer-links__link" href="/institucional/formas-de-pagamento">FORMAS DE PAGAMENTO</a>
|
||||||
<li><a href="/institucional/contato" title="Contato">Contato</a></li>
|
</li>
|
||||||
</ul>
|
|
||||||
</div>
|
<li class="footer-links__item">
|
||||||
<div class="contato-sac col-12 col-md-4 offset-md-0">
|
<a class="footer-links__link" href="/institucional/entrega">ENTREGA</a>
|
||||||
<h3 class="titulo">Fale Conosco</h3>
|
</li>
|
||||||
<ul>
|
|
||||||
<li>
|
<li class="footer-links__item">
|
||||||
<span itemprop="faxNumber">
|
<a class="footer-links__link" href="/institucional/troca-e-devolucao">TROCA E DEVOLUÇÃO</a>
|
||||||
<a href="tel:+55 22 00000 00000"><strong>SAC:</strong> 22 00000 0000</a>
|
</li>
|
||||||
</span>
|
|
||||||
</li>
|
<li class="footer-links__item">
|
||||||
<li>
|
<a class="footer-links__link" href="/institucional/seguranca-e-privacidade">SEGURANÇA E PRIVACIDADE</a>
|
||||||
<span itemprop="email">
|
</li>
|
||||||
<a href="mail:contato@contato.com.br">contato@contato.com.br</a>
|
|
||||||
</span>
|
<li class="footer-links__item">
|
||||||
</li>
|
<a class="footer-links__link" href="/institucional/contato">CONTATO</a>
|
||||||
<li>
|
</li>
|
||||||
<p>
|
</ul>
|
||||||
<span>
|
</div>
|
||||||
Atendimento Online
|
|
||||||
</span>
|
<div class="footer-links__block">
|
||||||
</p>
|
<h4 class="footer-links__title">FALE CONOSCO</h4>
|
||||||
</li>
|
|
||||||
<li>
|
<ul class="footer-links__items-list">
|
||||||
<p>
|
<li class="footer-links__item">
|
||||||
<strong>
|
<a class="footer-links__link" href="tel:1199999999">SAC: 11 9999 9999</a>
|
||||||
Segunda a Sexta
|
</li>
|
||||||
</strong>
|
|
||||||
das 8h30 as 18h
|
<li class="footer-links__item">
|
||||||
</p>
|
<a class="footer-links__link" href="mailto:sac@m3.com">SAC@M3.COM</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
|
||||||
</div>
|
<li class="footer-links__item">
|
||||||
<div class="redes-sociais col-12 col-md-4 offset-md-0">
|
<u>ATENDIMENTO ONLINE</u>
|
||||||
<h3 class="titulo">Fique Ligado</h3>
|
</li>
|
||||||
<ul>
|
|
||||||
<li>
|
<li class="footer-links__item">
|
||||||
<a href="#" target="_blank" title="Instagram">
|
<span>SEGUNDA A SEXTA</span>
|
||||||
<i class="sprite sprite-instagram-white"></i>
|
</li>
|
||||||
</a>
|
|
||||||
</li>
|
<li class="footer-links__item">
|
||||||
<li>
|
<span>DAS 8H30 AS 18H</span>
|
||||||
<a href="#" target="_blank" title="Facebook">
|
</li>
|
||||||
<i class="sprite sprite-facebook-white"></i>
|
</ul>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
|
||||||
</ul>
|
<div class="footer-links__block">
|
||||||
</div>
|
<h4 class="footer-links__title">FIQUE LIGADO</h4>
|
||||||
</div>
|
|
||||||
|
<ul class="footer-links__items-list footer-links__items-list--social-networks">
|
||||||
|
<li>
|
||||||
|
<a href="#" target="_blank" title="Instagram">
|
||||||
|
<i class="sprite sprite-instagram-icon"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="#" target="_blank" title="Facebook">
|
||||||
|
<i class="sprite sprite-facebook-icon"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="#" target="_blank" title="Youtube">
|
||||||
|
<i class="sprite sprite-youtube-icon"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user