Skip to content

Commit 132cd3c

Browse files
AtharvOpsjagdish-15
AtharvOps
and
jagdish-15
authored
feat: add structured responsive footer with improved layout and styling (#12)
* feat: add structured responsive footer with improved layout and styling * fix: align logo and text properly in footer brand section * Update frontend/js/footer.js Co-authored-by: Jagdish Prajapati <jagadishdrp@gmail.com> * style: fix footer alignment * style: fix footer layout, remove duplicate styles and improve alignment * Add contact us section Added a footer description and contact information. * Stylistic changes * Modify footer section --------- Co-authored-by: Jagdish Prajapati <jagadishdrp@gmail.com>
1 parent a1edc54 commit 132cd3c

5 files changed

Lines changed: 241 additions & 2 deletions

File tree

‎frontend/about.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ <h3 class="feature-title">WhatsApp</h3>
133133
</div>
134134
</div>
135135
</main>
136-
136+
<script src="js/footer.js"></script>
137137

138138
</body>
139139
</html>

‎frontend/js/footer.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
document.addEventListener("DOMContentLoaded", () => {
2+
3+
if (window.location.pathname.includes("index.html") || window.location.pathname === "/") {
4+
return;
5+
}
6+
7+
const footer = document.createElement("footer");
8+
footer.className = "footer";
9+
10+
footer.innerHTML = `
11+
<div class="footer-container">
12+
13+
<div class="footer-section brand">
14+
<div class="brand-row">
15+
<img src="assets/logo.png" alt="CodePVG Logo" class="footer-logo" />
16+
<h2>CodePVG</h2>
17+
</div>
18+
19+
<p class="footer-desc">
20+
Fostering a competitive yet collaborative programming environment among PVG students.<br>Track progress, climb ranks, and improve together.
21+
</p>
22+
23+
<p class="affiliation">
24+
Affiliated with
25+
<a href="https://www.pvgcoet.ac.in/" target="_blank">PVG COET</a>
26+
</p>
27+
</div>
28+
29+
<div class="footer-section">
30+
<h3>Navigation</h3>
31+
<ul>
32+
<li><a href="/leaderboard">Leaderboard</a></li>
33+
<li><a href="/registration">Register</a></li>
34+
<li><a href="/about">About</a></li>
35+
</ul>
36+
</div>
37+
38+
<div class="footer-section">
39+
<h3>Community & Socials</h3>
40+
<ul>
41+
<li><a href="https://github.com/codepvg/" target="_blank">GitHub</a></li>
42+
<li><a href="https://www.linkedin.com/company/codepvg/" target="_blank">LinkedIn</a></li>
43+
<li><a href="https://www.youtube.com/@codepvg529" target="_blank">YouTube</a></li>
44+
<li><a href="https://chat.whatsapp.com/E5INVk1UJX6KL5oZK0wPAQ?mode=gi_t" target="_blank">WhatsApp Community</a></li>
45+
</ul>
46+
</div>
47+
48+
<div class="footer-section">
49+
<h3>Contact Us</h3>
50+
<ul>
51+
<li><a href="mailto:codepvg@gmail.com" target="_blank">codepvg@gmail.com</a></li>
52+
<li><a href="https://api.whatsapp.com/send/?phone=%2B919284205842&text&type=phone_number&app_absent=0" target="_blank">Quick Chat (WhatsApp)</a></li>
53+
</ul>
54+
</div>
55+
56+
</div>
57+
58+
<div class="footer-bottom" style="display: flex; flex-direction: column; gap: 8px;">
59+
<p>
60+
© 2026 CodePVG Programming Club
61+
</p>
62+
<p>
63+
Project Developed & Maintained by <a href="https://github.com/jagdish-15" target="_blank" class="footer-link">Jagdish</a>
64+
</p>
65+
</div>
66+
`;
67+
68+
document.body.appendChild(footer);
69+
});

‎frontend/leaderboard.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,5 +152,6 @@ <h1 class="page-title">Leaderboard</h1>
152152
}
153153

154154
</script>
155+
<script src="js/footer.js"></script>
155156
</body>
156157
</html>

‎frontend/registration.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,5 +205,6 @@ <h2 class="success-title">Registration Successful!</h2>
205205
});
206206
});
207207
</script>
208+
<script src="js/footer.js"></script>
208209
</body>
209210
</html>

‎frontend/styles/main.css‎

Lines changed: 169 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -813,4 +813,172 @@ html, body {
813813
html::-webkit-scrollbar,
814814
body::-webkit-scrollbar {
815815
display: none; /* Chrome, Safari, Opera */
816-
}
816+
}
817+
818+
/* footer styles */
819+
.footer {
820+
width: 100%;
821+
padding: 50px 20px 20px;
822+
background: #0f172a;
823+
border-top: 1px solid rgba(255,255,255,0.08);
824+
font-family: 'Poppins', sans-serif;
825+
position: relative;
826+
}
827+
828+
.footer-container {
829+
max-width: 1200px;
830+
margin: auto;
831+
display: grid;
832+
grid-template-columns: 3fr 1fr 1fr 1.5fr;
833+
gap: 40px;
834+
}
835+
836+
.footer-section.brand {
837+
justify-self: start;
838+
padding-right: 40px;
839+
margin-right: 40px;
840+
}
841+
842+
.footer-section:nth-child(2),
843+
.footer-section:nth-child(3),
844+
.footer-section:nth-child(4) {
845+
justify-self: start;
846+
}
847+
848+
.brand-row {
849+
display: flex;
850+
align-items: center;
851+
gap: 10px;
852+
}
853+
854+
.footer-logo {
855+
width: 38px;
856+
height: 38px;
857+
}
858+
859+
.brand-row h2 {
860+
margin: 0;
861+
color: #e5e7eb;
862+
}
863+
864+
.footer-desc {
865+
margin-top: 10px;
866+
font-size: 14px;
867+
color: #9ca3af;
868+
line-height: 1.5;
869+
}
870+
871+
.affiliation {
872+
margin-top: 8px;
873+
font-size: 13px;
874+
color: #6b7280;
875+
}
876+
877+
.affiliation a {
878+
color: #60a5fa;
879+
text-decoration: none;
880+
}
881+
882+
.footer-section h3 {
883+
color: #e5e7eb;
884+
margin-bottom: 10px;
885+
font-size: 15px;
886+
}
887+
888+
.footer-section ul {
889+
list-style: none;
890+
padding: 0;
891+
}
892+
893+
.footer-section ul li {
894+
margin: 7px 0;
895+
}
896+
897+
.footer-section a:hover {
898+
color: #ffffff;
899+
}
900+
901+
.footer-bottom {
902+
border-top: 1px solid rgba(255,255,255,0.08);
903+
margin-top: 30px;
904+
padding-top: 15px;
905+
text-align: center;
906+
color: #6b7280;
907+
font-size: 13px;
908+
}
909+
910+
.footer-credit {
911+
margin-top: 5px;
912+
}
913+
914+
.footer-link {
915+
color: #9ca3af;
916+
text-decoration: underline;
917+
transition: color 0.3s ease;
918+
}
919+
920+
.footer-link:hover {
921+
color: #ffffff;
922+
}
923+
924+
.footer::before {
925+
content: "";
926+
position: absolute;
927+
top: 0;
928+
left: 0;
929+
height: 2px;
930+
width: 100%;
931+
background: linear-gradient(90deg, #22c55e, #38bdf8, #a78bfa);
932+
opacity: 0.85;
933+
}
934+
935+
.footer-section a {
936+
color: #9ca3af;
937+
text-decoration: none;
938+
font-size: 14px;
939+
position: relative;
940+
transition: all 0.3s ease;
941+
}
942+
943+
.footer-section a:hover {
944+
color: #ffffff;
945+
}
946+
947+
.footer-section a::after {
948+
content: "";
949+
position: absolute;
950+
left: 0;
951+
bottom: -3px;
952+
width: 0%;
953+
height: 2px;
954+
background: linear-gradient(90deg, #22c55e, #38bdf8);
955+
transition: width 0.3s ease;
956+
}
957+
958+
.footer-section a:hover::after {
959+
width: 100%;
960+
}
961+
962+
/* Mobile Responsiveness */
963+
@media (max-width: 900px) {
964+
.footer-container {
965+
grid-template-columns: 1fr;
966+
gap: 40px;
967+
text-align: center;
968+
}
969+
.footer-section.brand {
970+
grid-column: 1 / -1;
971+
padding-right: 0;
972+
margin-right: 0;
973+
justify-self: center;
974+
}
975+
.brand-row {
976+
justify-content: center;
977+
}
978+
.footer-section:nth-child(2),
979+
.footer-section:nth-child(3),
980+
.footer-section:nth-child(4) {
981+
grid-column: 1 / -1;
982+
justify-self: center;
983+
}
984+
}

0 commit comments

Comments
 (0)