diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss index e69de29..0436abc 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss +++ b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss @@ -0,0 +1,167 @@ +.footer-container-top { + width: 100%; + height: 240px; + border-top: 1px solid black; + display: flex; + justify-content: center; + padding: 50px 16px 50px 16px; + + @media screen and (min-width: 2500px) { + height: 297px; + } + + @media screen and (max-width: 1024px) { + display: none; + } + + .footer-container-institucional, + .footer-container-duvidas, + .footer-container-fale-conosco { + width: 100%; + max-width: 155px; + height: 125px; + margin-right: 122px; + + a { + text-decoration: none; + } + + @media screen and (min-width: 2500px) { + max-width: 315px; + height: 197px; + margin-right: 293px; + } + + h4 { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: #303030; + margin: 12px 0px; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + .footer-fale-conosco-atendimento, + .footer-fale-conosco-atendimento-on { + font-weight: 500; + } + } + + h3 { + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: #303030; + margin: 0px 0px 12px 0px; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + .footer-institucional-revendedor, + .footer-duvidas-duvidasfreq, + .footer-fale-conosco-num1, + .footer-fale-conosco-num2 { + text-decoration: underline; + } + + .footer-socials-container { + width: 100%; + max-width: 215px; + height: 63px; + margin-right: 50px; + + @media screen and (min-width: 2500px) { + max-width: 390px; + height: 116px; + } + + button { + width: 35px; + height: 35px; + background-color: transparent; + border: none; + padding: unset; + margin-right: 10px; + cursor: pointer; + + @media screen and (min-width: 2500px) { + width: 70px; + height: 70px; + } + + img { + @media screen and (min-width: 2500px) { + width: 70px; + height: 70px; + } + } + + @media screen and (max-width: 1024px) { + border: none; + } + } + + button:last-of-type { + margin: unset; + } + + a { + text-decoration: none; + + h4 { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #303030; + text-transform: lowercase; + margin-bottom: 0; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + } + } + + .whatsapp-container { + display: flex; + flex-direction: column; + position: fixed; + height: 73px; + padding-top: 40px; + top: 85%; + right: 1%; + + @media screen and (min-width: 2500px) { + height: 137px; + } + + button { + background: transparent; + border: none; + } + + img { + width: 100%; + max-width: 34px; + height: 34px; + + @media screen and (min-width: 2500px) { + max-width: 66px; + height: 66px; + } + } + } +}