From 78c818bff4984088d43983d37932fcc758863042 Mon Sep 17 00:00:00 2001 From: Riya-Kharade Date: Tue, 30 Sep 2025 18:15:09 +0530 Subject: [PATCH 1/2] Fix: Restructure Footer on about.html with Proper Columns and Responsive Design --- footer.html | 277 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 277 insertions(+) create mode 100644 footer.html diff --git a/footer.html b/footer.html new file mode 100644 index 0000000..f2eb908 --- /dev/null +++ b/footer.html @@ -0,0 +1,277 @@ + + + + + + GrowCraft Footer + + + + + + + + + + + + + + + + From 55db8cc1e8728c95ad9255e3b18fb582b6c06d36 Mon Sep 17 00:00:00 2001 From: Riya-Kharade Date: Tue, 30 Sep 2025 18:20:27 +0530 Subject: [PATCH 2/2] Fix: Restructure Footer on about.html with Proper Columns and Responsive Design --- about.html | 256 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 248 insertions(+), 8 deletions(-) diff --git a/about.html b/about.html index 3287161..79685b2 100644 --- a/about.html +++ b/about.html @@ -653,6 +653,205 @@ } } + + /* ===== 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 */ + } +} @@ -856,15 +1055,56 @@

Services + Student Experience

+ +
+
+ +
+

GrowCraft

+

Boost your career with skill-focused training and internship opportunities.

+
- - + +
+

Important Links

+ Home + About Us + Services + Our Works + FAQ +
+ + +
+

Contact

+

+91 98765 43210

+

support@GrowCraft.com

+
+ + +
+

Follow Us

+ +
+
+ + +
+
+ © 2025 GrowCraft. All rights reserved. +
+
+ Privacy + Terms + Sitemap +
+
+