From 11634268873cd3d048bbfd96c0b9279d5a5970e1 Mon Sep 17 00:00:00 2001 From: Prableen Singh Matharu <130837233+Prabhsingh0401@users.noreply.github.com> Date: Tue, 24 Oct 2023 19:51:46 +0530 Subject: [PATCH] Responsive Footer A great responsive footer for any website or webapp. --- Responsive Footer/Footer.css | 158 +++++++++++++++++++++++++++++++++++ Responsive Footer/index.html | 51 +++++++++++ 2 files changed, 209 insertions(+) create mode 100644 Responsive Footer/Footer.css create mode 100644 Responsive Footer/index.html diff --git a/Responsive Footer/Footer.css b/Responsive Footer/Footer.css new file mode 100644 index 0000000..bf0d5da --- /dev/null +++ b/Responsive Footer/Footer.css @@ -0,0 +1,158 @@ +body { + margin: 0; + background: #7e7e7e; + font-family: "Euclid Circular A", "Poppins"; + color: #f7f7f7; +} + +html, +body { + height: 100%; +} + +section { + position: fixed; + left: 0; + bottom: 12px; + width: 100%; + background: #000000; + padding-top: 60px; +} + +footer.top > img { + height: 50px; + margin: 0 auto 50px; +} + +footer { + position: relative; + margin: 0 30px; + color: rgb(255 255 255 / 50%); +} + +footer.top { + display: grid; + border-bottom: 2px solid rgb(255 255 255 / 20%); + padding-bottom: 20px; +} + +footer.bottom { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column-reverse; + gap: 8px; + padding: 20px 0; + text-align: center; +} + +footer.top .links { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 30px; + margin-bottom: 30px; +} + +.links-column { + display: grid; + gap: 10px; + text-align: center; +} + +footer h2 { + margin: 0 0 10px; + font-size: 12px; + font-weight: 400; + text-transform: uppercase; + letter-spacing: 1px; + color: rgb(255 255 255 / 96%); +} + +footer p { + margin: 0; +} + +.legal > a { + margin: 0 0 0 4px; +} + +.legal, +.copyright { + font-size: 12px; +} + +.legal > span { + margin-right: 10px; +} + +footer.top .socials { + position: absolute; + left: 50%; + bottom: 10px; + translate: -50% 0; + display: flex; + align-items: center; + gap: 18px; + height: 56px; +} + +footer.top .socials > a { + font-size: 24px; +} + +.socials-column :is(h2, p) { + display: none; +} + +@media (width > 400px) { + .links-column { + text-align: left; + } + + footer.top .links { + grid-template-columns: repeat(2, 1fr); + margin-right: 50px; + } + + footer.bottom { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + gap: 20px; + text-align: left; + } + + footer.top .socials { + left: 0; + translate: 0; + } + + footer.top > img { + margin: 0 0 50px; + } +} + +@media (width >= 640px) { + footer { + margin: 0 auto; + max-width: 580px; + padding: 0; + } + + footer.top .links { + grid-template-columns: repeat(3, 1fr); + } + + footer.top .socials { + position: static; + } + + footer.bottom { + justify-content: flex-start; + } + + .socials-column :is(h2, p) { + display: block; + } +} diff --git a/Responsive Footer/index.html b/Responsive Footer/index.html new file mode 100644 index 0000000..dbf0803 --- /dev/null +++ b/Responsive Footer/index.html @@ -0,0 +1,51 @@ + + + + + + + Responsive Footer + + + +
+ + +
+ +