Skip to content

Commit 632dd08

Browse files
ShrirangopShrirangop
authored
Merge pull request #468 from Kc23mj/kunalRepo
footer updated
2 parents 98839ff + d4f01d4 commit 632dd08

File tree

1 file changed

+220
-151
lines changed

1 file changed

+220
-151
lines changed

‎footer.php‎

Lines changed: 220 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -3,174 +3,243 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title><b>Students' Alumni Cell, IIT Kharagpur</b></title>
6+
<title>Students' Alumni Cell, IIT Kharagpur</title>
77
8-
<!-- Bootstrap Scripts CSS -->
8+
<!-- Google Fonts -->
9+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
10+
11+
<!-- Bootstrap CSS -->
912
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
1013
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
1114
12-
<!-- Bootstrap scripts Jquery -->
13-
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
14-
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
15-
</script>
16-
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
17-
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
18-
</script>-->
19-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
20-
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
21-
</script>
22-
2315
<!-- Font Awesome -->
2416
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
2517
2618
<style>
27-
* {
28-
margin: 0;
29-
padding: 0;
30-
31-
}
32-
33-
html {
34-
scroll-behavior: smooth;
35-
}
36-
37-
body {
38-
width: 100%;
39-
}
40-
41-
#footer {
42-
margin-top:0px;
43-
background-color: #23232b;
44-
height: 24rem;
45-
position:absolute;
46-
width:100%;
47-
}
48-
49-
50-
51-
/*
52-
.footer-top-left {
53-
height: 12rem;
54-
background-image: linear-gradient(to bottom right,pink,pink);
55-
color: white;
56-
padding-top: 1.8rem;
57-
} */
58-
59-
.footer-top-right {
60-
padding: 1.8rem;
61-
color: #eef0ef;
62-
font-size:1.8vw;
63-
position:relative;
64-
left:2rem;
65-
}
66-
67-
/* .dots {
68-
font-size: 2em;
69-
position: relative;
70-
bottom: 2.5rem;
71-
} */
72-
73-
/* .bar {
74-
font-size: 3em;
75-
color: white;
76-
position: absolute;
77-
top: -2.8rem;
78-
left: 2rem;
79-
}
80-
*/
81-
82-
83-
@media(max-width:768px){
84-
.icon{
85-
font-size:1em;
86-
padding:0;}}
87-
88-
89-
.icon {
90-
font-size: 2em;
91-
color: white;
92-
position: relative;
93-
top:-1em;
94-
left:2vw;
95-
96-
}
97-
98-
#copyright {
99-
background-color: black;
100-
text-align: center;
101-
color: grey;
102-
width:100%;
103-
position:absolute;
104-
top:24rem;
105-
height:2em;
106-
font-size:1rem;
107-
}
108-
109-
.c {
110-
display:flex;
111-
justify-content : center;
112-
margin:0px;
113-
}
114-
115-
.r{
116-
display: flex;
117-
width:100%;
118-
119-
}
120-
121-
19+
* {
20+
margin: 0;
21+
padding: 0;
22+
}
23+
24+
html {
25+
scroll-behavior: smooth;
26+
}
27+
28+
body {
29+
width: 100%;
30+
font-family: 'Poppins', sans-serif;
31+
}
32+
33+
#footer {
34+
background: #222;
35+
padding: 3rem 0;
36+
color: #bbb;
37+
font-size: 1rem;
38+
position: relative;
39+
}
40+
41+
#footer h5 {
42+
font-size: 1.6rem;
43+
margin-top: 3rem;
44+
margin-bottom: 1rem;
45+
font-weight: 700;
46+
color: #fff;
47+
text-transform: uppercase;
48+
}
49+
50+
#footer a {
51+
color: #ffdf00;
52+
transition: all 0.3s ease;
53+
}
54+
55+
#footer a:hover {
56+
color: #fff;
57+
}
58+
59+
#footer p,
60+
#footer a {
61+
font-size: 1.3rem;
62+
}
63+
64+
/* Social Media Icons */
65+
.social-icons a {
66+
font-size: 5.6rem;
67+
margin: 0 10px;
68+
color: #bbb;
69+
transition: transform 0.3s ease, color 0.3s ease;
70+
}
71+
72+
.social-icons a:hover {
73+
transform: scale(1.2);
74+
}
75+
76+
/* Contact Details */
77+
.contact-details i {
78+
margin-right: 10px;
79+
color: #ffdf00;
80+
}
81+
82+
/* Embedded Map */
83+
#map {
84+
height: 300px;
85+
width: 100%;
86+
margin-top: 20px;
87+
border: 0;
88+
}
89+
90+
/* .divider {
91+
height: 1px;
92+
background-color: #444;
93+
margin: 1.5rem 0;
94+
} */
95+
96+
/* Center Footer Quote */
97+
/* #footer-quote {
98+
text-align: center;
99+
font-size: 1.2rem;
100+
color: #fff;
101+
margin-bottom: 2rem;
102+
} */
103+
104+
/* Copyright at Bottom */
105+
.copyright {
106+
text-align: center;
107+
margin:0;
108+
color: #bbb;
109+
background-color: #222222;
110+
position: relative;
111+
margin: 0 0 0;
112+
}
113+
114+
/* Back to Top Button */
115+
#back-to-top {
116+
position: fixed;
117+
bottom: 20px;
118+
right: 20px;
119+
background-color: #ffdf00;
120+
color: #222;
121+
font-size: 20px;
122+
padding: 10px 15px;
123+
border-radius: 50px;
124+
cursor: pointer;
125+
transition: background-color 0.3s ease, transform 0.3s ease;
126+
z-index: 999;
127+
display: none;
128+
}
129+
130+
#back-to-top:hover {
131+
background-color: #fff;
132+
transform: scale(1.1);
133+
}
134+
.content{
135+
font-size: 18px;
136+
padding-left: 5px;
137+
margin-left:5px;
138+
}
139+
140+
/* Adjust the layout for small screens */
141+
@media (min-width: 768px) {
142+
.footer-content {
143+
display: flex;
144+
justify-content: space-between;
145+
align-items: flex-start;
146+
}
147+
148+
#map {
149+
width: 48%;
150+
}
151+
152+
.social-contact {
153+
width: 48%;
154+
}
155+
}
122156
</style>
123-
124157
</head>
125158
126159
<body>
127-
<div id='footer'>
128-
<div class='container-fluid'>
129-
<div class='row'>
130-
<div class='col-4 ' style=" padding-top: 1.8rem; color: white; height: 12rem;">
131-
<h2> Get Social <br>With Us</h2>
132-
</div>
133-
134-
<div class='col-6 footer-top-right'>
135-
<h5>Students' Alumni Cell, IIT Kharagpur</h5>
136-
<p>Office of Alumni Affairs<br>
137-
Indian Institute of Technology, Kharagpur<br>
138-
Pin-721302, West Bengal, India<br>
139-
<em>Ph: 03222-281860</em> <br>
140-
<em>Email: [email protected]</em>
141-
<hr>
142-
</div>
143160
144-
<div class='r row'>
145-
<div class="c col-2">
146-
<a href="https://www.facebook.com/iitkgp.alumnicell" target="_blank"><i class="icon fab fa-facebook"></i></a>
147-
</div>
148-
<div class='c col-2'>
149-
<a href="https://www.instagram.com/sac.iitkgp/?hl=en" target="_blank"><i class="icon fab fa-instagram"></i></a>
150-
</div>
151-
<div class='c col-2'>
152-
<a href="https://twitter.com/IITKgpAlumni" target="_blank"><i class="icon fab fa-twitter-square"></i></a>
153-
</div>
154-
<div class='c col-2'>
155-
<a href="https://studentsalumnicell-iitkgp.medium.com/" target="_blank"><i class="icon fab fa-medium"></i></a>
156-
</div>
157-
<div class='c col-2'>
158-
<a href="https://www.linkedin.com/company/sac-iitkgp/mycompany/" target="_blank"><i class="icon fab fa-linkedin"></i></a>
161+
<!-- Footer -->
162+
<div id="footer">
163+
<div class="container">
164+
<div class="footer-content">
165+
<!-- Social Media Section -->
166+
<div class="social-contact">
167+
<h5>Get Social With Us</h5>
168+
<div class="social-icons">
169+
<a href="https://www.facebook.com/iitkgp.alumnicell" target="_blank"><i
170+
class="fab fa-facebook"></i></a>
171+
<a href="https://www.instagram.com/sac.iitkgp/?hl=en" target="_blank"><i
172+
class="fab fa-instagram"></i></a>
173+
<a href="https://x.com/IITKgpAlumni" target="_blank"><i class="fab fa-twitter"></i></a>
174+
<a href="https://studentsalumnicell-iitkgp.medium.com/" target="_blank"><i
175+
class="fab fa-medium"></i></a>
176+
<a href="https://www.linkedin.com/company/sac-iitkgp/mycompany/" target="_blank"><i
177+
class="fab fa-linkedin"></i></a>
178+
<a href="https://www.youtube.com/c/StudentsAlumniCellIITKharagpur" target="_blank"><i
179+
class="fab fa-youtube"></i></a>
180+
</div>
181+
182+
<!-- Contact Section -->
183+
<h5>Contact Us</h5>
184+
<p class="contact-details">
185+
<i class="fas fa-map-marker-alt"></i><span class="content">Office of Alumni Affairs, IIT Kharagpur,
186+
Pin-721302,
187+
West Bengal, India</span><br>
188+
<i class="fas fa-phone"></i> <span class="content"> Ph: 03222-281860<br></span>
189+
<i class="fas fa-envelope"></i> <span class="content"> Email: <a href="mailto:[email protected]">[email protected]</a><span>
190+
</p>
159191
</div>
160-
<div class='c col-2'>
161-
<a href="https://www.youtube.com/c/StudentsAlumniCellIITKharagpur" target="_blank"><i class="icon fab fa-youtube"></i></a>
162-
</div>
163-
164-
</div>
165192
193+
<!-- Embedded Google Map using iFrame -->
194+
<iframe id="map"
195+
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1775.2760083536493!2d87.30775674853604!3d22.314068267200664!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a1d4522a211b131%3A0xa841704d3326681b!2sAlumni%20Affairs%20%26%20International%20Relations!5e0!3m2!1sen!2sin!4v1729339099517!5m2!1sen!2sin"
196+
height = "500" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
197+
</div>
198+
199+
<!-- Divider and Footer Quote -->
200+
<div class="divider"></div>
201+
<!-- <div id="footer-quote">
202+
"The best way to predict the future is to create it."
203+
</div> -->
166204
167-
<p id='copyright'>&copy; 2024 Students' Alumni Cell</p>
168-
</div>
205+
<!-- <div class="divider"></div> -->
206+
<!-- Copyright positioned at the bottom -->
169207
</div>
170-
208+
</div>
209+
<p class="copyright">&copy; 2024 Students' Alumni Cell</p>
210+
211+
212+
<!-- Back to Top Button -->
213+
<div id="back-to-top" onclick="scrollToTop()">&#8679;</div>
214+
215+
<!-- Scripts -->
216+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
217+
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
218+
</script>
219+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
220+
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9yZV+mxhr9I2D9XsIUQekYT3RZ5fnG8/A8p5U" crossorigin="anonymous">
221+
</script>
222+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
223+
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
224+
</script>
225+
226+
<script>
227+
// Show/Hide Back to Top Button
228+
window.onscroll = function () {
229+
var topButton = document.getElementById("back-to-top");
230+
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
231+
topButton.style.display = "block";
232+
} else {
233+
topButton.style.display = "none";
234+
}
235+
};
236+
237+
// Scroll to Top Functionality
238+
function scrollToTop() {
239+
window.scrollTo({ top: 0, behavior: 'smooth' });
240+
}
241+
</script>
171242
243+
</body>
172244
173-
</div>
174-
175-
</body>
176245
</html>

0 commit comments

Comments
 (0)