From 9524fba138e625763f8bd39a05cb4097035f8c90 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Thu, 8 Dec 2022 14:50:06 -0300 Subject: [PATCH] Adicionando area de links no footer --- src/arquivos/sass/components/_newsletter.scss | 6 +- src/arquivos/sass/partials/_footer.scss | 389 +++--------------- src/arquivos/sprite/facebook-logo.png | Bin 0 -> 381 bytes src/arquivos/sprite/instagram-logo.png | Bin 0 -> 927 bytes src/arquivos/sprite/youtube-logo.png | Bin 0 -> 496 bytes .../sub-templates/bernardo-footer-links.html | 145 ++++--- 6 files changed, 137 insertions(+), 403 deletions(-) create mode 100644 src/arquivos/sprite/facebook-logo.png create mode 100644 src/arquivos/sprite/instagram-logo.png create mode 100644 src/arquivos/sprite/youtube-logo.png diff --git a/src/arquivos/sass/components/_newsletter.scss b/src/arquivos/sass/components/_newsletter.scss index 759292e..c84c443 100644 --- a/src/arquivos/sass/components/_newsletter.scss +++ b/src/arquivos/sass/components/_newsletter.scss @@ -3,8 +3,10 @@ background: linear-gradient(180deg, $blue 0%, $blue-100 100%); &__wrapper { - max-width: 698px; - margin: 0 auto; + @include mq(lg, min) { + max-width: 698px; + margin: 0 auto; + } } &__title { diff --git a/src/arquivos/sass/partials/_footer.scss b/src/arquivos/sass/partials/_footer.scss index 363aeb8..4bc1d14 100644 --- a/src/arquivos/sass/partials/_footer.scss +++ b/src/arquivos/sass/partials/_footer.scss @@ -1,360 +1,69 @@ -/***************************************************************/ -/**-- Footer ------------------------------********************/ -/*-------------------------------------------------------------*/ +.footer-links{ -.footer { - background-color: #142032; - - .institucional-info { - color: $white; - 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: $white; - } - - .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); - } - } - } + @include mq(md, min) { + padding: 29px 0 25px; + border: 1px solid $gray-100; } - .selos { - border-top: 1px solid #19273d; - padding: 5px 0; - text-align: center; - - @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: $white; - 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; + &__wrapper { + display: grid; + grid-template-columns: repeat(3, max-content); + gap: 148px; 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-bottom: 10px; margin: 0; - } + font-size: 12px; + line-height: 15px; - li { - display: inline-block; - width: 33%; - } - - .option { - 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; + @include mq(md, max) { + margin-bottom: 13px; } } - .show-search { - .option:before { - @extend .sprite; - @extend .sprite-lupa; + &__items-list{ + margin: 0; + + &--social { + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + gap: 16px; + align-items: center; } } - .show-carrinho { - li:not(.amount-items), - strong, - .title { - display: none; - } + &__item { + padding: 4px 0; + font-size: 10px; + line-height: 12px; + } - .AmountItemsInCart { - line-height: 0; - text-align: center; - } + &__link { + color: $black; + transition: color 0.2s linear; - .portal-totalizers-ref { - display: inline-block; - vertical-align: top; - position: relative; + @include mq(lg, min) { - .cartInfoWrapper { - @extend .sprite; - @extend .sprite-sacola; - - @include mq(md, max) { - margin-right: 5px; - } - } - - .amount-items { - background-color: #142032; - border-radius: 50%; - bottom: 2px; - color: $white; - 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; - } + &:hover { + color: $blue; } } - } - .show-menu { - margin-top: -2px; - - .option:before { - @extend .sprite; - @extend .sprite-menu-bottom; - } } } diff --git a/src/arquivos/sprite/facebook-logo.png b/src/arquivos/sprite/facebook-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..da39568c61a2162ae6841f8fd8f98c381fc8dca7 GIT binary patch literal 381 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?2=RS;(M3{v?36l5$8 za(7}_cTVOdki(Mh=_>sHUHT2cb9pW9OB=2 z_<7s?RzHca29xfd2;e+xE^*%`cEN!y&sH)?E;IKRU9lmdQN-$OH_NpP%FTR!L3 zAJefI&DiswZxq*YAJxz7p3%#>!I05R?Z7b>h{j~59G`~XWe$>o!s{lRic~UOY}}?G T8kf5m7+MUTu6{1-oD!M<&kKzT literal 0 HcmV?d00001 diff --git a/src/arquivos/sprite/instagram-logo.png b/src/arquivos/sprite/instagram-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..097942067cc2bd3bfbce804042d98499c1215feb GIT binary patch literal 927 zcmV;Q17Q4#P)FV00009a7bBm000&x z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yPC#KRt`|u?SKGah!k)GNXTmkI9S-Lp}xh1zcMBoro^? zv}6hwS2!k9t?U~^`4XE=kgq|02C3)=x0PGsZc_&NY!wvPRiiC zItpEqN9;NAO0NfO<%fc0M7duzY*xT9&E=lo2M=;4j>LJDSF ze)LD!lXao$X-}D5g`csi^o{c~j@Ch44rkMH4)Iwu?8$;(pLH2W&4qs;<4_wjUWz=U+g zwM=M_*Uw**kNEmLQYJpWq|Td!n{DUTsy+|$n|f|!k@E%|w%f=YD2S&Y#ewG>$MJOJ zLNnvJ747mSM{`xRVt#K1IP3|TlJt!tMtBkpxFVgYaqm6N*nSA9`_Z_6M+T{*pnZ5o zK69FL;Sin^-+-*HPTl)LK67;~u608KsRmenz9b(jg?L8-sRlT8U2z&4qm85;V9q2S z6sZR2NaHwt&+OE7MFOb?SUx)@A8*`C3CGC>R7M9A@|hUzKa)Vt9MEC2Any>?(aiUk zWN`9wPWwD)ht#!_I!AinS;^c2+X&a<*;pRbW<~dOWProoKFX*T#1$_NJm)y00fKd& zw4c++2a$)ZJaKrx+%}2xbZCH398jvQ6tu_Fu>reA*Q6`HCa3qvqsgsr@czSEUs zsex23I6odc>3g+$>kr)}_Q91<@$bO4q8}Xf`XPfETj=B?cX^-VNxZ zj~x#Cv(LF@MhE{JDyVm1Yx-AM`jGvDjQG)n?=L=w1?J6fLF51c002ovPDHLkV1k(H BtgQe5 literal 0 HcmV?d00001 diff --git a/src/arquivos/sprite/youtube-logo.png b/src/arquivos/sprite/youtube-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..299e529e0d010fd7439de914407695870624b6f8 GIT binary patch literal 496 zcmVh zgD@C`uTckRCWt#hI|8H73EB-xCuur~*`VD3cY@FfQvbz`5aA_p7?b#uE|EZjJ8XVG z03wk{Br<`Uo^#3xwf{PIP7F$?u4Be&5M`yU4pzqi^^W$3c`_fW@w&w0V_SeCK(k#c zn$jrJ+62hf3=ZIc$`QiY_F9I#Hd8+5!7DchQ*7yiiID{D6mamuIUN@b--QFwz2F;Eg^-_g$tdAV73JE@ze{9Y?vj#LDD%ujs{?J-BcNIF26MKXiL_F!H`LQ23x;|zo ma4-YM4g7DKMIw>NHSi1loAPszl{eS`0000 -
-
-
-
-

Dúvidas

- -
-
-

Fale Conosco

- -
-
-

Fique Ligado

- -
-
+
+
+
+

DÚVIDAS

+ + +
+ +
+

FALE CONOSCO

+ + +
+ +
+

FIQUE LIGADO

+ +