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 0436abc..0f3587c 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss +++ b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss @@ -165,3 +165,159 @@ } } } + +.footer-bottom { + background: #000000; + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 100px; + height: 64px; + + @media screen and (min-width: 2500px) { + height: 96px; + } + + @media screen and (max-width: 1024px) { + flex-direction: column; + align-items: flex-start; + padding: 15px 16px; + height: 134px; + } + + p { + font-family: "Roboto", sans-serif; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #ffffff; + margin: 0; + + @media screen and (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } + } + + .first-text { + width: 22%; + min-width: 234px; + + @media screen and (max-width: 1024px) { + display: flex; + order: 1; + margin: 15px 0; + width: 22%; + min-width: 234px; + } + } + + .cards { + display: flex; + align-items: center; + + .icons { + width: 36px; + height: 20px; + margin-right: 12px; + + @media screen and (min-width: 2500px) { + width: 70px; + height: 40px; + } + + @media screen and (max-width: 428px) { + width: 30px; + height: 17px; + } + } + + .divisor { + border: 1px solid #c4c4c4; + height: 24px; + width: 1px; + } + + .icon-vtex { + width: 55px; + height: 34px; + margin-left: 12px; + + @media screen and (min-width: 2500px) { + width: 106px; + height: 66px; + } + + @media screen and (max-width: 428px) { + max-width: 45px; + height: 28px; + } + } + } + + .powered { + display: flex; + align-items: center; + + @media screen and (min-width: 2500px) { + width: 100%; + max-width: 404px; + } + + @media screen and (max-width: 1024px) { + order: 2; + } + + .vtexP { + width: 45px; + height: 16px; + margin: 0 13px; + + @media screen and (min-width: 2500px) { + width: 84px; + height: 30px; + } + } + + .m3 { + width: 28.66px; + height: 15.65px; + margin-left: 13px; + + @media screen and (min-width: 2500px) { + width: 54.95px; + height: 30px; + } + } + } + + .wrapper { + display: flex; + flex-direction: column; + } + + .whatsapp-container { + display: flex; + flex-direction: column; + position: fixed; + height: 73px; + padding-top: 40px; + top: 85%; + right: 1%; + + @media screen and (min-width: 2500px) { + display: none; + } + + button { + background: transparent; + border: none; + } + + img { + width: 100%; + max-width: 34px; + height: 34px; + } + } +}