Skip to content

Commit 0c8f0ad

Browse files
MrJay07MrJay07
committed
footer updated
1 parent cc202e0 commit 0c8f0ad

File tree

3 files changed

+309
-5
lines changed

3 files changed

+309
-5
lines changed

‎css/styles.css

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,4 +118,258 @@ a {
118118
transform: translateY(-8px) rotate(-45deg);
119119
}
120120
}
121+
/* Main content */
122+
.main-content {
123+
width: 100%;
124+
display: inline-block;
125+
background: #333;
126+
height: 50vh;
127+
text-align: center;
128+
font-size: 22px;
129+
font-weight: 700;
130+
text-decoration: underline;
131+
}
121132

133+
/* footer */
134+
135+
.footer {
136+
background: #e8e8e8;
137+
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
138+
box-sizing: border-box;
139+
width: 100%;
140+
text-align: left;
141+
font: bold 16px sans-serif;
142+
padding: 55px 50px;
143+
}
144+
145+
.footer .footer-left,
146+
.footer .footer-center,
147+
.footer .footer-right {
148+
display: inline-block;
149+
vertical-align: top;
150+
}
151+
152+
/* Footer left */
153+
154+
.footer .footer-left {
155+
width: 40%;
156+
}
157+
158+
/* The company logo */
159+
160+
/* Footer links */
161+
162+
.footer .footer-links {
163+
color: #ffbb00;
164+
margin: 20px 0 12px;
165+
padding: 0;
166+
}
167+
168+
.footer .footer-links a {
169+
display: inline-block;
170+
line-height: 1.8;
171+
font-weight: 400;
172+
text-decoration: none;
173+
color: inherit;
174+
}
175+
176+
/* Footer Center */
177+
178+
.footer .footer-center {
179+
width: 35%;
180+
}
181+
182+
.footer .footer-center i {
183+
background-color: #000000;
184+
color: #ffffff;
185+
font-size: 25px;
186+
width: 38px;
187+
height: 38px;
188+
border-radius: 50%;
189+
text-align: center;
190+
line-height: 42px;
191+
margin: 10px 15px;
192+
vertical-align: middle;
193+
}
194+
195+
.footer .footer-center i.fa-envelope {
196+
font-size: 17px;
197+
line-height: 38px;
198+
}
199+
200+
.footer .footer-center p {
201+
display: inline-block;
202+
color: blue;
203+
font-weight: 400;
204+
vertical-align: middle;
205+
margin: 0;
206+
}
207+
208+
.footer .footer-center p span {
209+
display: block;
210+
font-weight: normal;
211+
font-size: 14px;
212+
line-height: 2;
213+
}
214+
215+
.footer .footer-links a:before {
216+
content: "|";
217+
font-weight: 300;
218+
font-size: 20px;
219+
left: 0;
220+
color: #000000;
221+
display: inline-block;
222+
padding-right: 5px;
223+
}
224+
225+
.footer .footer-links .link-1:before {
226+
content: none;
227+
}
228+
229+
/* Footer Right */
230+
231+
.footer .footer-right {
232+
width: 20%;
233+
}
234+
235+
.footer .footer-company-about {
236+
line-height: 20px;
237+
color: #040404;
238+
font-size: 13px;
239+
font-weight: normal;
240+
margin: 0;
241+
}
242+
243+
.footer .footer-company-about span {
244+
display: block;
245+
color: #ffffff;
246+
font-size: 14px;
247+
font-weight: bold;
248+
margin-bottom: 20px;
249+
}
250+
251+
.footer .social-button {
252+
margin-top: 25px;
253+
}
254+
255+
/* If you don't want the footer to be responsive, remove these media queries */
256+
257+
@media (max-width: 880px) {
258+
.footer {
259+
font: bold 14px sans-serif;
260+
}
261+
262+
.footer .footer-left,
263+
.footer .footer-center,
264+
.footer .footer-right {
265+
display: block;
266+
width: 100%;
267+
margin-bottom: 40px;
268+
text-align: center;
269+
}
270+
271+
.footer .footer-center i {
272+
margin-left: 0;
273+
}
274+
}
275+
276+
.social-buttons {
277+
display: flex;
278+
flex-wrap: wrap;
279+
justify-content: center;
280+
gap: 8px;
281+
}
282+
283+
.social-button {
284+
position: relative;
285+
display: flex;
286+
justify-content: center;
287+
align-items: center;
288+
outline: none;
289+
width: 35px;
290+
height: 35px;
291+
text-decoration: none;
292+
border-radius: 100%;
293+
background: #fff;
294+
text-align: center;
295+
}
296+
.social-button::after {
297+
content: "";
298+
position: absolute;
299+
top: -1px;
300+
left: 50%;
301+
display: block;
302+
width: 0;
303+
height: 0;
304+
border-radius: 100%;
305+
transition: 0.3s;
306+
}
307+
.social-button:focus, .social-button:hover {
308+
color: #fff;
309+
}
310+
.social-button:focus::after, .social-button:hover::after {
311+
width: calc(100% + 2px);
312+
height: calc(100% + 2px);
313+
margin-left: calc(-50% - 1px);
314+
}
315+
.social-button i,
316+
.social-button svg {
317+
position: relative;
318+
z-index: 1;
319+
transition: 0.3s;
320+
}
321+
.social-button i {
322+
font-size: 25.6px;
323+
}
324+
.social-button svg {
325+
height: 40%;
326+
width: 40%;
327+
}
328+
.social-button--mail {
329+
color: #0072c6;
330+
}
331+
.social-button--mail::after {
332+
background: #0072c6;
333+
}
334+
.social-button--facebook {
335+
color: #3b5999;
336+
}
337+
.social-button--facebook::after {
338+
background: #3b5999;
339+
}
340+
.social-button--linkedin {
341+
color: #0077b5;
342+
}
343+
.social-button--linkedin::after {
344+
background: #0077b5;
345+
}
346+
.social-button--youtube {
347+
color: #e4402f;
348+
}
349+
.social-button--youtube::after {
350+
background: #e4402f;
351+
}
352+
.social-button--github {
353+
color: #6e5494;
354+
}
355+
.social-button--github::after {
356+
background: #6e5494;
357+
}
358+
.social-button--snapchat {
359+
color: #eec900;
360+
}
361+
.social-button--snapchat::after {
362+
background: #eec900;
363+
}
364+
.social-button--twitter {
365+
color: #55acee;
366+
}
367+
.social-button--twitter::after {
368+
background: #55acee;
369+
}
370+
.social-button--instagram {
371+
color: #e4405f;
372+
}
373+
.social-button--instagram::after {
374+
background: #e4405f;
375+
}

‎images/SuvidhaLogo.png

-2.77 KB
Loading

‎index.html

Lines changed: 55 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>Suvidha Website</title>
99
<link rel="stylesheet" href="css/styles.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
1011

1112
</head>
1213

@@ -54,11 +55,60 @@
5455

5556

5657
<!-- mention the required sections -->
57-
58-
59-
60-
61-
<footer id="footer">
58+
<section class="main-content">Main content</section>
59+
60+
61+
62+
63+
<footer class="footer">
64+
<div class="footer-left">
65+
<img class="nav-logo" src="images/SuvidhaLogo.png" alt="logo">
66+
<p class="footer-links"><a href="index.html" class="link-1">Home</a>
67+
<a href="#">About</a>
68+
<a href="#">FAQ</a>
69+
<a href="#">Contact</a>
70+
</p>
71+
<p class="copyright"><a href="index.html">Suvidha Foundation</a> &copy; 2023. All rights reserverd.</p>
72+
</div>
73+
<div class="footer-center">
74+
<div>
75+
<i class="fa fa-map-marker"></i>
76+
<p><span>H.No. 1951, W.N.4, Khaperkheda,</span> Saoner, Nagpur</p>
77+
</div>
78+
79+
<div>
80+
<i class="fa fa-phone"></i>
81+
<p>+91 7020044091</p>
82+
</div>
83+
<div>
84+
<i class="fa fa-envelope"></i>
85+
<p><a href="mailto:info@suvidhafoundationedutech.org">info@suvidhafoundationedutech.org</a></p>
86+
</div>
87+
</div>
88+
<div class="footer-right">
89+
<img class="nav-logo" src="images/SuvidhaLogo.png" alt="logo">
90+
<div class="footer-company-about">
91+
<p>Suvidha Mahila Mandal is a non-profit organization working to impart education among the financially challenged sections to help them realize parity in education and strength of little minds in building a promising future. The organization has provisions of student internships, student mentorship and the scope to volunteer .Through these programmes, the organization aims to achieve the vision of imparting innovative education that stays with the students forever and equip them for the unforeseen future.</p>
92+
</div>
93+
94+
<div class="social-buttons">
95+
<a href="#" class="social-button social-button--facebook" aria-label="Facebook">
96+
<i class="fa fa-facebook-f"></i>
97+
</a>
98+
<a href="#" class="social-button social-button--linkedin" aria-label="LinkedIn">
99+
<i class="fa fa-linkedin"></i>
100+
</a>
101+
<a href="#" class="social-button social-button--youtube" aria-label="youtube">
102+
<i class="fa fa-youtube"></i>
103+
</a>
104+
<a href="#" class="social-button social-button--github" aria-label="GitHub">
105+
<i class="fa fa-github"></i>
106+
</a>
107+
<a href="#" class="social-button social-button--instagram" aria-label="instagram">
108+
<i class="fa fa-instagram"></i>
109+
</a>
110+
</div>
111+
</div>
62112

63113
<!-- section for the footer -->
64114

0 commit comments

Comments
 (0)