Skip to content

Commit 78c818b

Browse files
Riya-KharadeRiya-Kharade
committed
Fix: Restructure Footer on about.html with Proper Columns and Responsive Design
1 parent 8ed0206 commit 78c818b

File tree

1 file changed

+277
-0
lines changed

1 file changed

+277
-0
lines changed

‎footer.html‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>GrowCraft Footer</title>
7+
8+
<!-- Font Awesome CDN -->
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
10+
11+
<!-- Google Fonts -->
12+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
13+
14+
<style>
15+
/* ===== BODY RESET ===== */
16+
body {
17+
margin: 0;
18+
padding: 0;
19+
font-family: 'Poppins', sans-serif;
20+
background: #f5f5f5;
21+
color: #111827;
22+
}
23+
/* ===== FOOTER STYLES ===== */
24+
footer {
25+
background: #111827;
26+
color: #fff;
27+
padding: 3rem 2rem 2rem 2rem;
28+
}
29+
30+
.footer-container {
31+
display: grid;
32+
grid-template-columns: repeat(4, 1fr);
33+
gap: 2rem;
34+
margin-bottom: 2rem;
35+
text-align: left;
36+
}
37+
38+
.footer-col h3 {
39+
margin-bottom: 1rem;
40+
color: #28a745;
41+
font-size: 1.2rem;
42+
display: flex;
43+
align-items: center;
44+
gap: 0.5rem;
45+
justify-content: flex-start;
46+
}
47+
48+
.footer-col a {
49+
display: flex;
50+
align-items: center;
51+
gap: 0.5rem;
52+
color: #d1d5db;
53+
text-decoration: none;
54+
margin-bottom: 0.5rem;
55+
transition: color 0.3s ease, transform 0.3s ease;
56+
}
57+
58+
.footer-col a:hover {
59+
color: #28a745;
60+
transform: translateX(5px);
61+
}
62+
63+
.footer-col p {
64+
display: flex;
65+
align-items: center;
66+
gap: 0.5rem;
67+
justify-content: flex-start;
68+
}
69+
70+
.social-icons {
71+
display: flex;
72+
flex-direction: column;
73+
gap: 0.5rem;
74+
}
75+
76+
.social-icons a {
77+
display: flex;
78+
align-items: center;
79+
gap: 0.5rem;
80+
color: #fff;
81+
text-decoration: none;
82+
transition: color 0.3s ease, transform 0.3s ease;
83+
}
84+
85+
.social-icons a:hover {
86+
color: #28a745;
87+
transform: scale(1.05);
88+
}
89+
90+
/* ===== FOOTER BOTTOM ROW ===== */
91+
.footer-bottom {
92+
display: flex;
93+
justify-content: space-between;
94+
align-items: center;
95+
flex-wrap: wrap;
96+
border-top: 1px solid #374151;
97+
padding-top: 1rem;
98+
margin-top: 1rem;
99+
}
100+
101+
.footer-left {
102+
color: #9ca3af;
103+
font-size: 0.9rem;
104+
}
105+
106+
.footer-right a {
107+
color: #9ca3af;
108+
margin-left: 1rem;
109+
text-decoration: none;
110+
font-size: 0.9rem;
111+
position: relative;
112+
padding-bottom: 2px;
113+
transition: all 0.3s ease;
114+
}
115+
116+
.footer-right a:hover {
117+
color: #28a745;
118+
}
119+
120+
.footer-right a::after {
121+
content: '';
122+
position: absolute;
123+
width: 0%;
124+
height: 2px;
125+
left: 0;
126+
bottom: 0;
127+
background-color: #28a745;
128+
transition: width 0.3s ease;
129+
}
130+
131+
.footer-right a:hover::after {
132+
width: 100%;
133+
}
134+
135+
/* ===== MEDIA QUERIES ===== */
136+
/* Tablets */
137+
@media (max-width: 1024px) {
138+
.footer-container {
139+
grid-template-columns: repeat(2, 1fr);
140+
text-align: center;
141+
gap: 1.5rem;
142+
}
143+
.footer-col h3 {
144+
justify-content: center;
145+
}
146+
.footer-col p,
147+
.footer-col a {
148+
justify-content: center;
149+
}
150+
.social-icons {
151+
flex-direction: row;
152+
justify-content: center;
153+
flex-wrap: wrap;
154+
gap: 1rem;
155+
}
156+
}
157+
158+
/* Mobile */
159+
@media (max-width: 768px) {
160+
.footer-container {
161+
grid-template-columns: 1fr;
162+
text-align: center;
163+
}
164+
.footer-col {
165+
align-items: center;
166+
margin-bottom: 1.5rem;
167+
}
168+
.footer-col h3 {
169+
justify-content: center;
170+
}
171+
.footer-col p,
172+
.footer-col a {
173+
justify-content: center;
174+
}
175+
.social-icons {
176+
flex-direction: column;
177+
align-items: center;
178+
gap: 0.5rem;
179+
}
180+
.footer-bottom {
181+
flex-direction: column;
182+
align-items: center;
183+
gap: 0.5rem;
184+
}
185+
.footer-right a {
186+
margin: 0.3rem 0.5rem;
187+
}
188+
}
189+
190+
/* Very small screens */
191+
@media (max-width: 480px) {
192+
.footer-col h3 {
193+
font-size: 1rem;
194+
}
195+
.footer-col a,
196+
.footer-right a {
197+
font-size: 0.85rem;
198+
}
199+
.footer-left {
200+
font-size: 0.85rem;
201+
}
202+
}
203+
/* Important Links margin for large screens */
204+
.footer-col.important-links {
205+
margin-left: 70px; /* margin only on large screens */
206+
}
207+
208+
/* Tablets and smaller laptops */
209+
@media (max-width: 1024px) {
210+
.footer-col.important-links {
211+
margin-left: 0; /* remove margin on smaller screens */
212+
}
213+
}
214+
215+
/* Mobile devices */
216+
@media (max-width: 768px) {
217+
.footer-col.important-links {
218+
margin-left: 0; /* remove margin on mobile too */
219+
}
220+
}
221+
</style>
222+
</head>
223+
<body>
224+
225+
<!-- ===== FOOTER ===== -->
226+
<!-- ===== FOOTER ===== -->
227+
<footer>
228+
<div class="footer-container ">
229+
<!-- About GrowCraft -->
230+
<div class="footer-col">
231+
<h3><i class="fa-solid fa-briefcase"></i> GrowCraft</h3>
232+
<p>Boost your career with skill-focused training and internship opportunities.</p>
233+
</div>
234+
235+
<!-- Important Links -->
236+
<div class="footer-col important-links">
237+
<h3>Important Links</h3>
238+
<a href="index.html"><i class="fa-solid fa-house"></i> Home</a>
239+
<a href="about.html"><i class="fa-solid fa-building"></i> About Us</a>
240+
<a href="#services"><i class="fa-solid fa-laptop-code"></i> Services</a>
241+
<a href="work.html"><i class="fa-solid fa-graduation-cap"></i> Our Works</a>
242+
<a href="src/faq.html"><i class="fa-solid fa-clock"></i> FAQ</a>
243+
</div>
244+
245+
<!-- Contact -->
246+
<div class="footer-col">
247+
<h3>Contact</h3>
248+
<p><i class="fa-solid fa-phone"></i> +91 98765 43210</p>
249+
<p><i class="fa-solid fa-envelope"></i> support@GrowCraft.com</p>
250+
</div>
251+
252+
<!-- Social -->
253+
<div class="footer-col">
254+
<h3>Follow Us</h3>
255+
<div class="social-icons">
256+
<a href="#"><i class="fa-brands fa-facebook"></i> Facebook</a>
257+
<a href="#"><i class="fa-brands fa-twitter"></i> Twitter</a>
258+
<a href="#"><i class="fa-brands fa-linkedin"></i> LinkedIn</a>
259+
<a href="#"><i class="fa-brands fa-instagram"></i> Instagram</a>
260+
</div>
261+
</div>
262+
</div>
263+
264+
<!-- Footer Bottom Row: Credit + Legal -->
265+
<div class="footer-bottom">
266+
<div class="footer-left">
267+
&copy; 2025 GrowCraft. All rights reserved.
268+
</div>
269+
<div class="footer-right">
270+
<a href="privacy.html"><i class="fa-solid fa-lock"></i> Privacy</a>
271+
<a href="terms.html"><i class="fa-solid fa-file-lines"></i> Terms</a>
272+
<a href="sitemap.html"><i class="fa-solid fa-map"></i> Sitemap</a>
273+
</div>
274+
</div>
275+
</footer>
276+
</body>
277+
</html>

0 commit comments

Comments
 (0)