From edece24eaacf8712a6d444059bf0f633a226c915 Mon Sep 17 00:00:00 2001 From: Riya-Kharade Date: Tue, 30 Sep 2025 18:32:12 +0530 Subject: [PATCH] Fix: Restructure Footer on bloglisting.html with Proper Columns and Responsive Design --- blogListing.html | 698 ++++++++++++++++------------------------------- 1 file changed, 242 insertions(+), 456 deletions(-) diff --git a/blogListing.html b/blogListing.html index afd056e..f798232 100644 --- a/blogListing.html +++ b/blogListing.html @@ -642,7 +642,204 @@ width: 40px; } } + /* ===== FOOTER STYLES ===== */ + footer { + background: #111827; + color: #fff; + padding: 3rem 2rem 2rem 2rem; + } + + .footer-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; + margin-bottom: 2rem; + text-align: left; + } + + .footer-col h3 { + margin-bottom: 1rem; + color: #28a745; + font-size: 1.2rem; + display: flex; + align-items: center; + gap: 0.5rem; + justify-content: flex-start; + } + + .footer-col a { + display: flex; + align-items: center; + gap: 0.5rem; + color: #d1d5db; + text-decoration: none; + margin-bottom: 0.5rem; + transition: color 0.3s ease, transform 0.3s ease; + } + + .footer-col a:hover { + color: #28a745; + transform: translateX(5px); + } + + .footer-col p { + display: flex; + align-items: center; + gap: 0.5rem; + justify-content: flex-start; + } + + .social-icons { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + + .social-icons a { + display: flex; + align-items: center; + gap: 0.5rem; + color: #fff; + text-decoration: none; + transition: color 0.3s ease, transform 0.3s ease; + } + + .social-icons a:hover { + color: #28a745; + transform: scale(1.05); + } + + /* ===== FOOTER BOTTOM ROW ===== */ + .footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + border-top: 1px solid #374151; + padding-top: 1rem; + margin-top: 1rem; + } + + .footer-left { + color: #9ca3af; + font-size: 0.9rem; + } + + .footer-right a { + color: #9ca3af; + margin-left: 1rem; + text-decoration: none; + font-size: 0.9rem; + position: relative; + padding-bottom: 2px; + transition: all 0.3s ease; + } + + .footer-right a:hover { + color: #28a745; + } + + .footer-right a::after { + content: ''; + position: absolute; + width: 0%; + height: 2px; + left: 0; + bottom: 0; + background-color: #28a745; + transition: width 0.3s ease; + } + + .footer-right a:hover::after { + width: 100%; + } + /* ===== MEDIA QUERIES ===== */ + /* Tablets */ + @media (max-width: 1024px) { + .footer-container { + grid-template-columns: repeat(2, 1fr); + text-align: center; + gap: 1.5rem; + } + .footer-col h3 { + justify-content: center; + } + .footer-col p, + .footer-col a { + justify-content: center; + } + .social-icons { + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + } + + /* Mobile */ + @media (max-width: 768px) { + .footer-container { + grid-template-columns: 1fr; + text-align: center; + } + .footer-col { + align-items: center; + margin-bottom: 1.5rem; + } + .footer-col h3 { + justify-content: center; + } + .footer-col p, + .footer-col a { + justify-content: center; + } + .social-icons { + flex-direction: column; + align-items: center; + gap: 0.5rem; + } + .footer-bottom { + flex-direction: column; + align-items: center; + gap: 0.5rem; + } + .footer-right a { + margin: 0.3rem 0.5rem; + } + } + + /* Very small screens */ + @media (max-width: 480px) { + .footer-col h3 { + font-size: 1rem; + } + .footer-col a, + .footer-right a { + font-size: 0.85rem; + } + .footer-left { + font-size: 0.85rem; + } + } + /* Important Links margin for large screens */ +.footer-col.important-links { + margin-left: 70px; /* margin only on large screens */ +} + +/* Tablets and smaller laptops */ +@media (max-width: 1024px) { + .footer-col.important-links { + margin-left: 0; /* remove margin on smaller screens */ + } +} + +/* Mobile devices */ +@media (max-width: 768px) { + .footer-col.important-links { + margin-left: 0; /* remove margin on mobile too */ + } +} @@ -704,467 +901,56 @@

Our Blog

- -