Skip to content

Commit 55db8cc

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

File tree

1 file changed

+248
-8
lines changed

1 file changed

+248
-8
lines changed

‎about.html‎

Lines changed: 248 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -653,6 +653,205 @@
653653
}
654654

655655
}
656+
657+
/* ===== FOOTER STYLES ===== */
658+
footer {
659+
background: #111827;
660+
color: #fff;
661+
padding: 3rem 2rem 2rem 2rem;
662+
}
663+
664+
.footer-container {
665+
display: grid;
666+
grid-template-columns: repeat(4, 1fr);
667+
gap: 2rem;
668+
margin-bottom: 2rem;
669+
text-align: left;
670+
}
671+
672+
.footer-col h3 {
673+
margin-bottom: 1rem;
674+
color: #28a745;
675+
font-size: 1.2rem;
676+
display: flex;
677+
align-items: center;
678+
gap: 0.5rem;
679+
justify-content: flex-start;
680+
}
681+
682+
.footer-col a {
683+
display: flex;
684+
align-items: center;
685+
gap: 0.5rem;
686+
color: #d1d5db;
687+
text-decoration: none;
688+
margin-bottom: 0.5rem;
689+
transition: color 0.3s ease, transform 0.3s ease;
690+
}
691+
692+
.footer-col a:hover {
693+
color: #28a745;
694+
transform: translateX(5px);
695+
}
696+
697+
.footer-col p {
698+
display: flex;
699+
align-items: center;
700+
gap: 0.5rem;
701+
justify-content: flex-start;
702+
}
703+
704+
.social-icons {
705+
display: flex;
706+
flex-direction: column;
707+
gap: 0.5rem;
708+
}
709+
710+
.social-icons a {
711+
display: flex;
712+
align-items: center;
713+
gap: 0.5rem;
714+
color: #fff;
715+
text-decoration: none;
716+
transition: color 0.3s ease, transform 0.3s ease;
717+
}
718+
719+
.social-icons a:hover {
720+
color: #28a745;
721+
transform: scale(1.05);
722+
}
723+
724+
/* ===== FOOTER BOTTOM ROW ===== */
725+
.footer-bottom {
726+
display: flex;
727+
justify-content: space-between;
728+
align-items: center;
729+
flex-wrap: wrap;
730+
border-top: 1px solid #374151;
731+
padding-top: 1rem;
732+
margin-top: 1rem;
733+
}
734+
735+
.footer-left {
736+
color: #9ca3af;
737+
font-size: 0.9rem;
738+
}
739+
740+
.footer-right a {
741+
color: #9ca3af;
742+
margin-left: 1rem;
743+
text-decoration: none;
744+
font-size: 0.9rem;
745+
position: relative;
746+
padding-bottom: 2px;
747+
transition: all 0.3s ease;
748+
}
749+
750+
.footer-right a:hover {
751+
color: #28a745;
752+
}
753+
754+
.footer-right a::after {
755+
content: '';
756+
position: absolute;
757+
width: 0%;
758+
height: 2px;
759+
left: 0;
760+
bottom: 0;
761+
background-color: #28a745;
762+
transition: width 0.3s ease;
763+
}
764+
765+
.footer-right a:hover::after {
766+
width: 100%;
767+
}
768+
769+
/* ===== MEDIA QUERIES ===== */
770+
/* Tablets */
771+
@media (max-width: 1024px) {
772+
.footer-container {
773+
grid-template-columns: repeat(2, 1fr);
774+
text-align: center;
775+
gap: 1.5rem;
776+
}
777+
.footer-col h3 {
778+
justify-content: center;
779+
}
780+
.footer-col p,
781+
.footer-col a {
782+
justify-content: center;
783+
}
784+
.social-icons {
785+
flex-direction: row;
786+
justify-content: center;
787+
flex-wrap: wrap;
788+
gap: 1rem;
789+
}
790+
}
791+
792+
/* Mobile */
793+
@media (max-width: 768px) {
794+
.footer-container {
795+
grid-template-columns: 1fr;
796+
text-align: center;
797+
}
798+
.footer-col {
799+
align-items: center;
800+
margin-bottom: 1.5rem;
801+
}
802+
.footer-col h3 {
803+
justify-content: center;
804+
}
805+
.footer-col p,
806+
.footer-col a {
807+
justify-content: center;
808+
}
809+
.social-icons {
810+
flex-direction: column;
811+
align-items: center;
812+
gap: 0.5rem;
813+
}
814+
.footer-bottom {
815+
flex-direction: column;
816+
align-items: center;
817+
gap: 0.5rem;
818+
}
819+
.footer-right a {
820+
margin: 0.3rem 0.5rem;
821+
}
822+
}
823+
824+
/* Very small screens */
825+
@media (max-width: 480px) {
826+
.footer-col h3 {
827+
font-size: 1rem;
828+
}
829+
.footer-col a,
830+
.footer-right a {
831+
font-size: 0.85rem;
832+
}
833+
.footer-left {
834+
font-size: 0.85rem;
835+
}
836+
}
837+
/* Important Links margin for large screens */
838+
.footer-col.important-links {
839+
margin-left: 70px; /* margin only on large screens */
840+
}
841+
842+
/* Tablets and smaller laptops */
843+
@media (max-width: 1024px) {
844+
.footer-col.important-links {
845+
margin-left: 0; /* remove margin on smaller screens */
846+
}
847+
}
848+
849+
/* Mobile devices */
850+
@media (max-width: 768px) {
851+
.footer-col.important-links {
852+
margin-left: 0; /* remove margin on mobile too */
853+
}
854+
}
656855
</style>
657856
</head>
658857

@@ -856,15 +1055,56 @@ <h3 id="whoCardTitle">Services + Student Experience</h3>
8561055
<button id="backToTop" title="Go to top" type="button">
8571056
<i class="fas fa-chevron-up"></i>
8581057
</button>
1058+
<!-- ===== FOOTER ===== -->
1059+
<footer>
1060+
<div class="footer-container ">
1061+
<!-- About GrowCraft -->
1062+
<div class="footer-col">
1063+
<h3><i class="fa-solid fa-briefcase"></i> GrowCraft</h3>
1064+
<p>Boost your career with skill-focused training and internship opportunities.</p>
1065+
</div>
8591066

860-
<div id="footer-placeholder"></div>
861-
<script>
862-
fetch('src/components/footer.html')
863-
.then(response => response.text())
864-
.then(data => {
865-
document.getElementById('footer-placeholder').innerHTML = data;
866-
});
867-
</script>
1067+
<!-- Important Links -->
1068+
<div class="footer-col important-links">
1069+
<h3>Important Links</h3>
1070+
<a href="index.html"><i class="fa-solid fa-house"></i> Home</a>
1071+
<a href="about.html"><i class="fa-solid fa-building"></i> About Us</a>
1072+
<a href="#services"><i class="fa-solid fa-laptop-code"></i> Services</a>
1073+
<a href="work.html"><i class="fa-solid fa-graduation-cap"></i> Our Works</a>
1074+
<a href="src/faq.html"><i class="fa-solid fa-clock"></i> FAQ</a>
1075+
</div>
1076+
1077+
<!-- Contact -->
1078+
<div class="footer-col">
1079+
<h3>Contact</h3>
1080+
<p><i class="fa-solid fa-phone"></i> +91 98765 43210</p>
1081+
<p><i class="fa-solid fa-envelope"></i> support@GrowCraft.com</p>
1082+
</div>
1083+
1084+
<!-- Social -->
1085+
<div class="footer-col">
1086+
<h3>Follow Us</h3>
1087+
<div class="social-icons">
1088+
<a href="#"><i class="fa-brands fa-facebook"></i> Facebook</a>
1089+
<a href="#"><i class="fa-brands fa-twitter"></i> Twitter</a>
1090+
<a href="#"><i class="fa-brands fa-linkedin"></i> LinkedIn</a>
1091+
<a href="#"><i class="fa-brands fa-instagram"></i> Instagram</a>
1092+
</div>
1093+
</div>
1094+
</div>
1095+
1096+
<!-- Footer Bottom Row: Credit + Legal -->
1097+
<div class="footer-bottom">
1098+
<div class="footer-left">
1099+
&copy; 2025 GrowCraft. All rights reserved.
1100+
</div>
1101+
<div class="footer-right">
1102+
<a href="privacy.html"><i class="fa-solid fa-lock"></i> Privacy</a>
1103+
<a href="terms.html"><i class="fa-solid fa-file-lines"></i> Terms</a>
1104+
<a href="sitemap.html"><i class="fa-solid fa-map"></i> Sitemap</a>
1105+
</div>
1106+
</div>
1107+
</footer>
8681108

8691109
<script src="src/script.js"></script>
8701110
<script src="src/utils.js"></script>

0 commit comments

Comments
 (0)