diff --git a/src/components/footer/footer.jsx b/src/components/footer/footer.jsx index 016ef88..ae80d99 100644 --- a/src/components/footer/footer.jsx +++ b/src/components/footer/footer.jsx @@ -15,29 +15,31 @@ import line from "./assets/Line.png"; export function Footer() { return (
-
-
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor - -
-
- - - - - - - - - -
-
- Powered By - - Developed By - +
+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor + +
+
+ + + + + + + + + +
+
+ Powered By + + Developed By + +
diff --git a/src/components/footer/footer.module.scss b/src/components/footer/footer.module.scss index fdcf30b..ebcad54 100644 --- a/src/components/footer/footer.module.scss +++ b/src/components/footer/footer.module.scss @@ -5,42 +5,110 @@ width: 100%; height: 64px; background: #000000; -} -.footerContainer { - display: flex; - align-items: center; - justify-content: space-between; - width: 1077px; - height: 24px; -} + @media (max-width: 375px) { + height: 128px; + } -.footerSpanContainer { - display: flex; - width: 234px; - height: 24px; - align-items: center; - font-family: "Roboto"; - font-style: normal; - font-weight: 400; - font-size: 10px; - color: #ffffff; -} + @media (min-width: 376px) and (max-width: 1150px) { + height: 134px; + } -.footerCardIconsContainer { - display: flex; - gap: 12px; - justify-content: center; - align-items: center; -} + @media (min-width: 2500px) { + height: 96px; + } + .footerMainContainer { + width: 100%; + max-width: 100%; -.PdDbContainer { - display: flex; - gap: 13px; - font-family: "Roboto"; - font-style: normal; - font-weight: 400; - font-size: 10px; - color: #ffffff; - align-items: center; + .footerContainer { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 100px 0 100px; + + @media (min-width: 280px) and (max-width: 1150px) { + flex-direction: column; + margin: 0; + align-items: flex-start; + margin-left: 16px; + margin-right: 16px; + gap: 12px; + } + + .footerSpanContainer { + display: flex; + width: 234px; + height: 24px; + align-items: center; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 10px; + color: #ffffff; + + @media (min-width: 280px) and (max-width: 1150px) { + order: 1; + } + + @media (min-width: 2500px) { + font-size: 20px; + width: 467px; + height: 47px; + } + } + + .footerCardIconsContainer { + display: flex; + gap: 12px; + justify-content: center; + align-items: center; + + .Pci { + @media (min-width: 280px) and (max-width: 1150px) { + height: 28px; + } + + @media (min-width: 2500px) { + height: 66px; + } + } + & img { + @media (min-width: 280px) and (max-width: 1150px) { + height: 17px; + } + + @media (min-width: 2500px) { + height: 40px; + } + } + } + .PdDbContainer { + display: flex; + gap: 13px; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 10px; + color: #ffffff; + align-items: center; + + @media (min-width: 280px) and (max-width: 1150px) { + order: 2; + } + + & span { + @media (min-width: 2500px) { + font-size: 20px; + } + } + + & img { + @media (min-width: 2500px) { + height: 30px; + } + } + } + } + } }