diff --git a/src/components/footer/FooterBottom.module.scss b/src/components/footer/FooterBottom.module.scss index e1a18d2..0d76103 100644 --- a/src/components/footer/FooterBottom.module.scss +++ b/src/components/footer/FooterBottom.module.scss @@ -6,6 +6,10 @@ align-items: center; justify-content: space-between; + @media (min-width: 2500px) { + padding: 24.5px 100px; + } + @media (max-width: 1024px) { display: grid; padding: 20px 16px; @@ -22,6 +26,11 @@ font-weight: 400; line-height: 12px; + @media (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } + @media (max-width: 1024px) { margin: 20px 0 15px 0; } @@ -37,9 +46,16 @@ @media (max-width: 375px) { margin-right: 11px; - img { + } + + img { + @media (max-width: 375px) { width: 30px; } + + @media (min-width: 2500px) { + width: 70px; + } } @media (max-width: 374px) { @@ -48,6 +64,10 @@ &:last-child { img { + @media (min-width: 2500px) { + width: 106px; + } + @media (max-width: 375px) { margin-left: 11px; width: 45px; @@ -56,7 +76,7 @@ @media (max-width: 374px) { margin-left: 4px; } - + margin-left: 12px; } } @@ -67,7 +87,7 @@ } span { - border-left: 2px solid #c4c4c4; + border-left: 1px solid #c4c4c4; height: 25px; margin-bottom: 5px; } @@ -82,17 +102,34 @@ font-weight: 400; line-height: 12px; margin-right: 12px; + + @media (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } } .footerBottom-credits-powered { display: flex; align-items: center; margin-right: 13px; + + img { + @media (min-width: 2500px) { + width: 84px; + } + } } .footerBottom-credits-developed { display: flex; align-items: center; + + img { + @media (min-width: 2500px) { + width: 56px; + } + } } } } diff --git a/src/components/footer/FooterTop.module.scss b/src/components/footer/FooterTop.module.scss index 1d15b38..8cda4db 100644 --- a/src/components/footer/FooterTop.module.scss +++ b/src/components/footer/FooterTop.module.scss @@ -15,6 +15,11 @@ line-height: 16px; text-transform: uppercase; + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + @media (max-width: 1024px) { text-transform: capitalize; } @@ -30,6 +35,11 @@ line-height: 14px; text-decoration: none; color: #303030; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } &:last-child { @@ -38,24 +48,34 @@ } .footerTop-fale-conosco { - p:nth-child(2), - p:nth-child(4) { + p { font-size: 12px; - font-weight: 500; - line-height: 14px; - max-width: 20ch; - } - - p:nth-child(3), - p:nth-child(5) { - font-weight: 400; - margin: 12px 0; - font-size: 12px; - font-weight: 400; line-height: 14px; - &:last-child { - text-decoration: underline; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + + &:nth-child(2), + &:nth-child(4) { + font-weight: 500; + line-height: 14px; + max-width: 20ch; + + @media (min-width: 2500px) { + max-width: 100%; + } + } + + &:nth-child(3), + &:nth-child(5) { + font-weight: 400; + margin: 12px 0; + + &:last-child { + text-decoration: underline; + } } } } @@ -70,9 +90,20 @@ } } } + + img { + @media (min-width: 2500px) { + width: 70px; + } + } p { margin-top: 12px; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } } } diff --git a/src/components/footer/Newsletter.module.scss b/src/components/footer/Newsletter.module.scss index 5b560dd..2cc8a7f 100644 --- a/src/components/footer/Newsletter.module.scss +++ b/src/components/footer/Newsletter.module.scss @@ -25,6 +25,11 @@ text-transform: uppercase; margin-bottom: 7px; + @media (min-width: 2500px) { + font-size: 36px; + line-height: 42px; + } + @media (max-width: 1024px) { font-size: 14px; line-height: 16px; @@ -33,14 +38,22 @@ .newsletter-form { input { - height: 42px; width: 340px; + height: 42px; border-radius: 4px; padding: 13px 16px 13px 16px; outline: none; border: 1px solid #e5e5e5; margin-right: 8px; + @media (min-width: 2500px) { + width: 668px; + height: 59px; + font-size: 28px; + font-weight: 400; + line-height: 33px; + } + @media (max-width: 1024px) { margin: 0 0 16px 0; border-radius: 0; @@ -67,6 +80,13 @@ outline: none; border: none; + @media (min-width: 2500px) { + width: 246px; + height: 59px; + font-size: 24px; + line-height: 28px; + } + @media (max-width: 1024px) { width: 100%; height: 50px; diff --git a/src/components/global/ButtonsGlobal.module.scss b/src/components/global/ButtonsGlobal.module.scss index aae3330..a589af6 100644 --- a/src/components/global/ButtonsGlobal.module.scss +++ b/src/components/global/ButtonsGlobal.module.scss @@ -1,10 +1,19 @@ -.buttons { +.buttonsGlobal { display: flex; flex-direction: column; position: fixed; right: 16px; bottom: 16px; + a { + img { + @media (min-width: 2500px) { + width: 66px; + height: 66px; + } + } + } + div { display: flex; justify-content: center; @@ -14,5 +23,17 @@ border-radius: 50%; background-color: #c4c4c4; cursor: pointer; + + @media (min-width: 2500px) { + width: 66px; + height: 66px; + } + + img { + @media (min-width: 2500px) { + width: 25px; + height: 60px; + } + } } } diff --git a/src/components/global/ButtonsGlobal.tsx b/src/components/global/ButtonsGlobal.tsx index 36cd654..b03da31 100644 --- a/src/components/global/ButtonsGlobal.tsx +++ b/src/components/global/ButtonsGlobal.tsx @@ -14,7 +14,7 @@ const ButtonsGlobal = () => { } return ( -