Skip to content

Consistent professional footer with dark mode support #897

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Khushi5155 wants to merge 3 commits into from
Closed

Consistent professional footer with dark mode support #897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8e6b6cf
update all pages with consistent footer
Khushi5155 Oct 4, 2025
3f86b32
Merge branch 'master' into feature/footer-consistent
Khushi5155 Oct 4, 2025
29ba1da
Merge branch 'master' into feature/footer-consistent
Khushi5155 Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
574 changes: 331 additions & 243 deletions about.html
View file
Open in desktop

Large diffs are not rendered by default.

868 changes: 504 additions & 364 deletions blogListing.html
View file
Open in desktop

Large diffs are not rendered by default.

329 changes: 289 additions & 40 deletions blogView.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,240 @@
color: #ffffff !important;
}

/* ==================== Base Footer ==================== */
.professional-footer {
background: linear-gradient(135deg, #f8f9fa 0%, #edf6f3 50%, #f8f9fa 100%);
color: #333;
padding: 50px 0 0;
margin-top: 50px;
overflow: hidden;
transition: all 0.3s ease;
}

/* Brand */
.footer-logo {
max-width: 160px;
margin-bottom: 1.5rem;
transition: transform 0.3s ease;
}
.footer-logo:hover {
transform: scale(1.05);
}
@media (min-width: 768px) {
.footer-logo { max-width: 180px; }
}
.brand-name {
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(45deg, #28a745, #20c997);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand-description {
font-size: 0.95rem;
color: #666;
line-height: 1.6;
}

/* Quick Stats - smaller and consistent */
.quick-stats {
display: flex;
justify-content: flex-start; /* aligns left with brand description */
gap: 20px; /* smaller space between stats */
margin-top: 1rem;
flex-wrap: wrap;
text-align: center;
}

.stat-item {
flex: 1;
min-width: 60px; /* reduced width for smaller layout */
display: flex;
flex-direction: column;
align-items: flex-start; /* left align, can use center if preferred */
}

.stat-number {
font-size: 1.2rem; /* smaller than before */
font-weight: 700;
color: #28a745;
margin-bottom: 0.2rem;
}

.stat-label {
font-size: 0.75rem; /* smaller and more consistent */
color: #555;
text-transform: uppercase;
letter-spacing: 0.5px;
}


/* Section Titles */
.footer-title {
font-size: 1.1rem;
font-weight: 600;
color: #222;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
position: relative;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 30px; height: 2px;
background: linear-gradient(45deg, #28a745, #20c997);
border-radius: 2px;
}

/* Links */
.footer-links a {
color: #666;
text-decoration: none;
font-size: 0.9rem;
padding-left: 15px;
position: relative;
transition: all 0.3s ease;
}
.footer-links a:hover {
color: #28a745;
transform: translateX(5px);
}
.footer-links a::before {
content: '▸';
position: absolute;
left: 0;
color: #28a745;
opacity: 0;
transition: all 0.3s ease;
}
.footer-links a:hover::before { opacity: 1; }

/* Contact */
.contact-item i { color: #28a745; }
.contact-item a { color: inherit; transition: color 0.3s ease; }
.contact-item a:hover { color: #20c997; }

/* Social Icons */
.social-icons {
display: flex;
gap: 15px;
margin-top: 1rem;
}
.social-icons a {
font-size: 1.2rem;
color: #666;
transition: all 0.3s ease;
}
.social-icons a:hover {
color: #28a745;
transform: scale(1.2);
}

/* Footer Bottom */
.footer-bottom {
background: rgba(40, 167, 69, 0.05);
margin-top: 50px;
padding: 25px 0;
border-top: 1px solid rgba(0,0,0,0.1);
}
.footer-nav a {
color: #666;
margin-left: 15px;
transition: color 0.3s ease;
}
.footer-nav a:hover { color: #28a745; }

/* ==================== Dark Mode ==================== */
[data-bs-theme="dark"] .professional-footer {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
color: #f1f5f9;
}
[data-bs-theme="dark"] .brand-name {
background: linear-gradient(45deg, #20c997, #00ff95);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
[data-bs-theme="dark"] .brand-description,
[data-bs-theme="dark"] .stat-label,
[data-bs-theme="dark"] .contact-item span,
[data-bs-theme="dark"] .footer-links a,
[data-bs-theme="dark"] .footer-nav a,
[data-bs-theme="dark"] .copyright {
color: #94a3b8;
}
[data-bs-theme="dark"] .stat-number,
[data-bs-theme="dark"] .footer-links a:hover,
[data-bs-theme="dark"] .footer-links a::before,
[data-bs-theme="dark"] .contact-item i,
[data-bs-theme="dark"] .social-icons a:hover,
[data-bs-theme="dark"] .footer-nav a:hover {
color: #00ff95;
}
[data-bs-theme="dark"] .footer-title {
color: #f8fafc;
}
[data-bs-theme="dark"] .footer-title::after {
background: linear-gradient(45deg, #20c997, #00ff95);
}
[data-bs-theme="dark"] .footer-bottom {
background: rgba(255, 255, 255, 0.05);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .social-icons a {
color: #94a3b8;
}

/* ==================== Animations ==================== */
.fade-in {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Footer Links - smaller and aligned */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}

.footer-links li {
margin-bottom: 0.5rem; /* reduced spacing between items */
}

.footer-links a {
font-size: 0.85rem; /* slightly smaller */
color: #555;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
position: relative;
padding-left: 12px; /* small padding for arrow */
}

.footer-links a::before {
content: '▸';
position: absolute;
left: 0;
color: #28a745;
opacity: 0;
transition: all 0.3s ease;
}

.footer-links a:hover::before {
opacity: 1;
}

.footer-links a:hover {
color: #28a745;
transform: translateX(3px);
}

</style>
</head>
Expand Down Expand Up @@ -310,65 +544,64 @@
</div>
</div>

<footer class="professional-footer" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
<!-- ===== Enhanced GrowCraft Footer ===== -->
<footer class="professional-footer fade-in" data-aos="fade-up">
<div class="container">
<div class="row g-4 py-4">
<div class="col-lg-4 col-md-12">
<div class="footer-brand">
<img src="images/Logo.png" alt="GrowCraft Logo" class="footer-logo">
<div class="row g-4 py-4 fade-in">

<!-- Brand -->
<div class="col-lg-4 col-md-6 fade-in">
<div class="footer-brand fade-in">
<h4 class="brand-name">GrowCraft</h4>
<p class="brand-description">Empowering businesses with innovative digital solutions and creative excellence.</p>
<div class="quick-stats">
<p class="brand-description" >
Empowering businesses with innovative digital solutions and creative excellence.
</p>
<div class="quick-stats fade-in">
<div class="stat-item">
<span class="stat-number">500+</span>
<span class="stat-label">PROJECTS</span>
<span class="stat-number">50+</span>
<span class="stat-label">Projects</span>
</div>
<div class="stat-item">
<span class="stat-number">150+</span>
<span class="stat-label">CLIENTS</span>
<span class="stat-number">20+</span>
<span class="stat-label">Clients</span>
</div>
<div class="stat-item">
<span class="stat-number">5+</span>
<span class="stat-label">YEARS</span>
<span class="stat-number">1+</span>
<span class="stat-label">Years</span>
</div>
</div>
</div>
</div>

<div class="col-lg-2 col-md-4 col-6">
<h5 class="footer-title">
<i class="fas fa-tools" style="margin-right: 8px;"></i>Services
</h5>
<ul class="footer-links">
<li><a href="learn/webdev.html"><i class="fas fa-code"></i> Web Development</a></li>
<li><a href="learn/graphic.html"><i class="fas fa-paint-brush"></i> Graphic Design</a></li>
<li><a href="learn/marketing.html"><i class="fas fa-bullhorn"></i> Digital Marketing</a></li>
<li><a href="learn/contentwriting.html"><i class="fas fa-pen-nib"></i> Content Writing</a></li>
<li><a href="learn/socialmedia.html"><i class="fas fa-hashtag"></i> Social Media</a></li>
<li><a href="learn/cyberanalyst.html"><i class="fas fa-shield-alt"></i> Cyber Analyst</a></li>
<!-- Services -->
<div class="col-lg-2 col-md-3 col-6 fade-in" >
<h5 class="footer-title">Services</h5>
<ul class="footer-links" >
<li><a href="learn/webdev.html">Web Development</a></li>
<li><a href="learn/graphic.html">Graphic Design</a></li>
<li><a href="learn/marketing.html">Digital Marketing</a></li>
<li><a href="learn/contentwriting.html">Content Writing</a></li>
<li><a href="learn/socialmedia.html">Social Media</a></li>
<li><a href="learn/cyberanalyst.html">Cyber Analyst</a></li>
</ul>
</div>

<div class="col-lg-2 col-md-4 col-6">
<h5 class="footer-title">
<i class="fas fa-link" style="margin-right: 8px;"></i>Quick Links
</h5>
<!-- Quick Links -->
<div class="col-lg-2 col-md-3 col-6 fade-in">
<h5 class="footer-title">Quick Links</h5>
<ul class="footer-links">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#about">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="index.html#work">Portfolio</a></li>
<li><a href="src/contact.html">Contact</a></li>
<li><a href="#careers">Careers</a></li>
<li><a href="blogListing.html">Blog</a></li>
</ul>
</div>

<div class="col-lg-4 col-md-4">
<h5 class="footer-title">
<i class="fas fa-envelope" style="margin-right: 8px;"></i>Get In Touch
</h5>
<div class="contact-info">
<!-- Contact -->
<div class="col-lg-4 col-md-6 fade-in" >
<h5 class="footer-title">Get In Touch</h5>
<div class="contact-info mb-3 fade-in">
<div class="contact-item">
<i class="fas fa-envelope"></i>
<a href="mailto:info@growcraft.com">info@growcraft.com</a>
Expand All @@ -382,18 +615,31 @@ <h5 class="footer-title">
<span>ABC Street, XYZ City, India</span>
</div>
</div>

<!-- Social -->
<div class="social-icons">
<a href="https://discord.gg/vk5zFm56" target="_blank"><i class="fa-brands fa-discord"></i></a>
<a href="https://github.com/gyanshankar1708/GrowCraft" target="_blank"><i class="fa-brands fa-github"></i></a>
<a href="https://www.instagram.com/GrowCraft" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
</div>

</div>

</div>
</div>

<div class="footer-bottom">
<!-- Bottom -->
<div class="footer-bottom fade-in">
<div class="container">
<div class="row align-items-center py-3">
<div class="row align-items-center py-3 fade-in">
<div class="col-md-6">
<p class="copyright">© 2024 <strong>GrowCraft</strong>. All rights reserved.</p>
<p class="copyright mb-0">
© <span id="year"></span> <strong>GrowCraft</strong>. All rights reserved.
</p>
</div>
<div class="col-md-6">
<div class="footer-nav">
<div class="footer-nav fade-in">
<a href="#privacy">Privacy</a>
<a href="#terms">Terms</a>
<a href="#sitemap">Sitemap</a>
Expand All @@ -403,7 +649,10 @@ <h5 class="footer-title">
</div>
</div>
</footer>
<div id="footer-placeholder"></div>

<script>
document.getElementById("year").textContent = new Date().getFullYear();
</script>
<script>
fetch('src/components/footer.html')
.then(response => response.text())
Expand Down
Loading