Skip to content

Commit c4d95ad

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

File tree

1 file changed

+248
-0
lines changed

1 file changed

+248
-0
lines changed

‎about.html‎

Lines changed: 248 additions & 0 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

@@ -832,7 +1031,56 @@ <h3 id="whoCardTitle">Services + Student Experience</h3>
8321031
</div>
8331032
</section>
8341033

1034+
<!-- ===== FOOTER ===== -->
1035+
<footer>
1036+
<div class="footer-container ">
1037+
<!-- About GrowCraft -->
1038+
<div class="footer-col">
1039+
<h3><i class="fa-solid fa-briefcase"></i> GrowCraft</h3>
1040+
<p>Boost your career with skill-focused training and internship opportunities.</p>
1041+
</div>
1042+
1043+
<!-- Important Links -->
1044+
<div class="footer-col important-links">
1045+
<h3>Important Links</h3>
1046+
<a href="index.html"><i class="fa-solid fa-house"></i> Home</a>
1047+
<a href="about.html"><i class="fa-solid fa-building"></i> About Us</a>
1048+
<a href="#services"><i class="fa-solid fa-laptop-code"></i> Services</a>
1049+
<a href="work.html"><i class="fa-solid fa-graduation-cap"></i> Our Works</a>
1050+
<a href="src/faq.html"><i class="fa-solid fa-clock"></i> FAQ</a>
1051+
</div>
1052+
1053+
<!-- Contact -->
1054+
<div class="footer-col">
1055+
<h3>Contact</h3>
1056+
<p><i class="fa-solid fa-phone"></i> +91 98765 43210</p>
1057+
<p><i class="fa-solid fa-envelope"></i> support@GrowCraft.com</p>
1058+
</div>
1059+
1060+
<!-- Social -->
1061+
<div class="footer-col">
1062+
<h3>Follow Us</h3>
1063+
<div class="social-icons">
1064+
<a href="#"><i class="fa-brands fa-facebook"></i> Facebook</a>
1065+
<a href="#"><i class="fa-brands fa-twitter"></i> Twitter</a>
1066+
<a href="#"><i class="fa-brands fa-linkedin"></i> LinkedIn</a>
1067+
<a href="#"><i class="fa-brands fa-instagram"></i> Instagram</a>
1068+
</div>
1069+
</div>
1070+
</div>
8351071

1072+
<!-- Footer Bottom Row: Credit + Legal -->
1073+
<div class="footer-bottom">
1074+
<div class="footer-left">
1075+
&copy; 2025 GrowCraft. All rights reserved.
1076+
</div>
1077+
<div class="footer-right">
1078+
<a href="privacy.html"><i class="fa-solid fa-lock"></i> Privacy</a>
1079+
<a href="terms.html"><i class="fa-solid fa-file-lines"></i> Terms</a>
1080+
<a href="sitemap.html"><i class="fa-solid fa-map"></i> Sitemap</a>
1081+
</div>
1082+
</div>
1083+
</footer>
8361084
<div class="chatbot-container">
8371085
<div class="chatbot-window" id="chatWindow">
8381086
<div class="chatbot-header">

0 commit comments

Comments
 (0)