From 40464aa8ae4a89bcdf88aa5d898248795ceec02b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Tue, 10 Jan 2023 10:23:55 -0300 Subject: [PATCH] feat: Adiciona footer bottom 4k --- .../src/components/Footer/Developed.tsx | 4 +-- .../src/components/Footer/FooterBottom.tsx | 8 ++--- .../assets/modules/Developed.module.scss | 29 +++++++++++++++++++ .../assets/modules/FooterBottom.module.scss | 26 +++++++++++++++++ 4 files changed, 61 insertions(+), 6 deletions(-) diff --git a/react-project/src/components/Footer/Developed.tsx b/react-project/src/components/Footer/Developed.tsx index 4bbfcb8..96e26eb 100644 --- a/react-project/src/components/Footer/Developed.tsx +++ b/react-project/src/components/Footer/Developed.tsx @@ -9,14 +9,14 @@ const Developed = () => { Powered By
- Logo VTEX + Logo VTEX
Developed By
- Logo M3 + Logo M3
diff --git a/react-project/src/components/Footer/FooterBottom.tsx b/react-project/src/components/Footer/FooterBottom.tsx index e4caa2f..7d70bc3 100644 --- a/react-project/src/components/Footer/FooterBottom.tsx +++ b/react-project/src/components/Footer/FooterBottom.tsx @@ -10,7 +10,6 @@ import elo from "./assets/svgs/elo.svg"; import hiper from "./assets/svgs/hiper.svg"; import paypal from "./assets/svgs/paypal.svg"; import boleto from "./assets/svgs/boleto.svg"; -import divisor from "./assets/svgs/divisor.svg"; import vtexPci from "./assets/svgs/vtex-pci.svg"; const FooterBottom = () => { @@ -20,6 +19,7 @@ const FooterBottom = () => { Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

+
-
- Divisor de icones -
+ +
+
Vtex PCI
diff --git a/react-project/src/components/Footer/assets/modules/Developed.module.scss b/react-project/src/components/Footer/assets/modules/Developed.module.scss index 0333179..df1b6c0 100644 --- a/react-project/src/components/Footer/assets/modules/Developed.module.scss +++ b/react-project/src/components/Footer/assets/modules/Developed.module.scss @@ -3,11 +3,20 @@ align-items: center; gap: 13px; + @media screen and (min-width: 2500px) { + gap: 12px; + } + span { font-weight: 400; font-size: 10px; line-height: 12px; color: var(--white); + + @media screen and (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } } a { @@ -15,6 +24,26 @@ figure { display: contents; + + .vtex { + width: 44.92px; + height: 16px; + + @media screen and (min-width: 2500px) { + width: 84.22px; + height: 30px; + } + } + + .m3 { + width: 28.66px; + height: 15.65px; + + @media screen and (min-width: 2500px) { + width: 54.95px; + height: 30px; + } + } } } } diff --git a/react-project/src/components/Footer/assets/modules/FooterBottom.module.scss b/react-project/src/components/Footer/assets/modules/FooterBottom.module.scss index 6126d5b..1c5ee8f 100644 --- a/react-project/src/components/Footer/assets/modules/FooterBottom.module.scss +++ b/react-project/src/components/Footer/assets/modules/FooterBottom.module.scss @@ -12,6 +12,12 @@ line-height: 12px; color: var(--white); text-transform: capitalize; + + @media screen and (min-width: 2500px) { + width: 467px; + font-size: 20px; + line-height: 23px; + } } &__icons { @@ -30,12 +36,32 @@ figure { display: contents; + + img { + @media screen and (min-width: 2500px) { + width: 70px; + height: 40px; + } + } } } } + div { + background-color: var(--gray-100); + width: 1px; + height: 24px; + } + figure { display: contents; + + img { + @media screen and (min-width: 2500px) { + width: 106px; + height: 66px; + } + } } } }