From de0c5f430fbe20891fd94a4b9281b8db50f2dd91 Mon Sep 17 00:00:00 2001 From: MateusLopes Date: Sun, 8 Jan 2023 12:07:36 -0300 Subject: [PATCH] feat: adicionando responsividade para todas as telas --- src/components/footer/footer.scss | 406 ++++++++++++++++++++++++++++++ 1 file changed, 406 insertions(+) create mode 100644 src/components/footer/footer.scss diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss new file mode 100644 index 0000000..711910f --- /dev/null +++ b/src/components/footer/footer.scss @@ -0,0 +1,406 @@ +@import "../../styles/utils/variaveis"; + +footer { + .newsletter-wrapper { + display: flex; + justify-content: center; + border-top: 1px solid $color-black; + border-bottom: 1px solid $color-black; + padding: 16px 0; + + @media (max-width: 1024px) { + padding: 16px; + } + + .newsletter { + @media (max-width: 1024px) { + width: 100%; + } + + &-title { + color: $color-gray-200; + font-family: $font-family-Roboto; + font-weight: 500; + font-size: 18px; + line-height: 21px; + letter-spacing: 0.05em; + text-transform: uppercase; + margin-bottom: 8px; + + @media (min-width: 2500px) { + font-size: 36px; + line-height: 42px; + } + + @media (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } + } + + .second-wrapper { + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + gap: 16px; + } + + .newsletter-input { + padding: 12px 15px; + width: 340px; + border-radius: 4px; + border: 1px solid $color-gray-650; + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 14px; + color: $color-gray-600; + + @media (min-width: 2500px) { + width: 669px; + height: 59px; + font-size: 28px; + line-height: 33px; + } + + @media (max-width: 1024px) { + width: 100%; + border-radius: 0; + } + + @media (max-width: 375px) { + padding: 16px 15px; + } + + &::placeholder { + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 14px; + color: $color-gray-600; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + &:focus { + outline: none; + border-color: $color-gray-400; + } + } + + .newsletter-btn { + padding: 14px 0; + width: 126px; + background-color: $color-black; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 4px; + border: none; + color: $color-white; + text-transform: uppercase; + font-family: $font-family-Roboto; + font-weight: 700; + font-size: 12px; + line-height: 14px; + text-align: center; + letter-spacing: 0.05em; + margin-left: 8px; + + @media (min-width: 2500px) { + width: 246px; + height: 59px; + font-size: 28px; + line-height: 28.13px; + } + + @media (max-width: 1024px) { + width: 100%; + margin-left: 0; + border-radius: 0; + font-size: 12px; + line-height: 16px; + box-shadow: none; + } + + @media (max-width: 375px) { + padding: 17px 0; + } + } + } + } + } + + .footer-top { + padding: 50px 100px; + display: flex; + justify-content: space-between; + + @media (max-width: 1024px) { + padding: 24px 16px; + flex-direction: column; + } + + .menu-footer-mobile { + display: none; + + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 12px; + + .footer-menu-item { + display: flex; + flex-direction: column; + gap: 12px; + + .footer-menu-title { + display: flex; + justify-content: space-between; + font-family: $font-family-Roboto; + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: $color-gray-200; + + .close-open-menu { + font-size: 17px; + } + } + + li { + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: $color-gray-200; + } + } + } + } + + .menu-footer { + display: flex; + flex-direction: column; + gap: 12px; + width: 155px; + + @media (min-width: 2500px) { + width: 315px; + } + + @media (max-width: 1024px) { + display: none; + } + + &-title { + font-family: $font-family-Roboto; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: $color-gray-200; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + + @media (max-width: 1024px) { + display: flex; + align-items: center; + justify-content: space-between; + text-transform: capitalize; + } + } + + li a { + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-gray-200; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + + &.bold { + font-weight: 500; + } + } + + li:last-child { + text-decoration: underline; + } + } + + .social { + margin-left: 37px; + + @media (max-width: 1024px) { + margin-left: 0; + } + + &-links { + display: flex; + gap: 10px; + margin-bottom: 12px; + + @media (max-width: 1024px) { + margin-bottom: 6px; + } + + a { + width: 35px; + height: 35px; + + img { + width: 100%; + height: 100%; + } + + @media (min-width: 2500px) { + width: 70px; + height: 70px; + } + } + } + + a.link { + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-gray-200; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + + @media (max-width: 1024px) { + display: none; + } + } + } + } + + .footer-bottom { + display: flex; + justify-content: space-between; + padding: 15px 100px; + background-color: $color-black; + + @media (max-width: 1024px) { + flex-direction: column; + gap: 15px; + padding: 15px 16px; + } + + .social-reason { + display: flex; + align-items: center; + width: 234px; + color: $color-white; + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + + @media (min-width: 2500px) { + width: 467px; + font-size: 20px; + line-height: 23px; + } + + @media (max-width: 1024px) { + order: 2; + } + } + + .payment-metods { + display: flex; + align-items: center; + gap: 12px; + + @media (max-width: 1024px) { + order: 1; + } + + @media (max-width: 375px) { + gap: 11px; + } + + .line { + height: 24px; + width: 1px; + background-color: $color-gray-600; + } + + img { + @media (min-width: 2500px) { + width: 70px; + + &:last-child { + width: 106px; + height: 66px; + } + } + + @media (max-width: 375px) { + width: 30px; + height: 17px; + + &:last-child { + width: 45px; + height: 28px; + } + } + } + } + + .authors { + display: flex; + align-items: center; + gap: 13px; + color: $color-white; + font-family: $font-family-Roboto; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + + @media (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } + + @media (max-width: 1024px) { + order: 3; + } + + .m3, + .vtex { + display: flex; + align-items: center; + gap: 13px; + } + + .m3 img { + @media (min-width: 2500px) { + width: 54.95px; + } + } + + .vtex img { + @media (min-width: 2500px) { + width: 84.22px; + } + } + } + } +}