Skip to content

Improved footer section #167

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Improved footer section #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dea7caa
Refactor footer structure and add quick links
GowsiSM Nov 2, 2025
50529aa
Enhance footer styles and responsiveness
GowsiSM Nov 2, 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
67 changes: 32 additions & 35 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,42 +242,39 @@ <h2 class="section-title" style="font-size: 3rem; text-align: center; margin-bot
</main>


<footer class="footer fade-in">
<div class="footer-content">
<h2 class="footer-logo">CodeCanvas</h2>
<p class="footer-tagline">
Showcasing amazing front-end projects from developers around the world.
Join our community and share your creativity!
</p>

<!-- Social Media Icons -->
<ul class="socials">
<li><a href="https://github.com/Varshitha713/CodeCanvas" target="_blank"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/varshitha-macha/" target="_blank"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://discord.com/users/1179807221329182780" target="_blank"><i class="fa-brands fa-discord"></i></a></li>
<li><a href="mailto:codecanvas.community@gmail.com"><i class="fa-solid fa-envelope"></i></a></li>
</ul>

<!-- Quick Links Row -->
<ul class="footer-links">
<li><a href="#">Home</a></li>
<li><a href="#browse">Browse</a></li>
<li><a href="#submit">Submit</a></li>
<li><a href="#about">About</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>

<div class="footer-bottom">
<p>&copy; 2025 <strong>CodeCanvas</strong>. Open source project for the developer community.</p>
<p>Built with ❤️ for showcasing amazing front-end projects</p>
</div>
</footer>

<footer class="footer fade-in">
<div class="footer-flex-container">
<div class="footer-1">
<div class="footer-logo">CodeCanvas</div>
<ul class="socials">
<li><a href="https://github.com/Varshitha713/CodeCanvas" target="_blank"><i
class="fa-brands fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/varshitha-macha/" target="_blank"><i
class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://discord.com/users/1179807221329182780" target="_blank"><i
class="fa-brands fa-discord"></i></a></li>
<li><a href="#"><i class="fa-solid fa-envelope"></i></a></li>
</ul>
</div>
<div class="quick-links">
<ul>
<div class="p-1">
<li><a href="#">Home</a></li>
<li><a href="#browse">Browse</a></li>
<li><a href="#submit">Submit</a></li>
</div>
<div class="p-2">
<li><a href="#about">About</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#contact">Contact Us</a></li>
</div>
</ul>
</div>
</div>
<div class="container">
<p>&copy; 2025 CodeCanvas. Open source project for the developer community.</p>
<p>Built with ❤️ for showcasing amazing front-end projects</p>
</div>
</footer>
<button id="scrollToTopBtn" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>


Expand All @@ -294,4 +291,4 @@ <h2 class="section-title" style="font-size: 3rem; text-align: center; margin-bot
<script src="script.js"></script>
</body>

</html>
</html>
258 changes: 248 additions & 10 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1114,16 +1114,249 @@ body.dark-theme .tag-badge {
margin-right: 0.5rem;
}
}
/* Footer Styles */
.footer {
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: white;
text-align: center;
padding: 50px 20px 20px;
font-family: 'Inter', sans-serif;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer */
.footer {
background: rgba(0, 0, 0, 0.8);
color: white;
text-align: center;
padding: 2rem 0;
margin-top: 3rem;
}
/* Light theme footer: use white background with dark text to match navbar */
body:not(.dark-theme) .footer {
background: #ffffff; /* white background in light mode */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: #111; /* darker text for contrast */
border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Dark theme footer */
body.dark-theme .footer {
background: rgba(26, 20, 69, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: #e4e4f0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
max-width: 1200px;
margin: 0 auto;
}

.footer-logo {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}

.footer-tagline {
max-width: 600px;
margin: 0 auto 2rem;
font-size: 1.1rem;
line-height: 1.6;
opacity: 0.9;
}

/* Light theme tagline */
body:not(.dark-theme) .footer-tagline {
color: #555;
}

/* Social Links */
.socials {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 2.5rem;
list-style: none;
padding: 0;
}

.socials li a {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: white;
font-size: 1.3rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

/* Light theme social icons */
body:not(.dark-theme) .socials li a {
background: rgba(102, 126, 234, 0.08);
color: #667eea;
border: 1px solid rgba(102, 126, 234, 0.18);
}

/* Social hover effects */
.socials li a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea, #764ba2);
transition: left 0.3s ease;
z-index: -1;
}

.socials li a:hover::before {
left: 0;
}

.socials li a:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
color: white;
}

/* Light theme social hover */
body:not(.dark-theme) .socials li a:hover {
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

/* Horizontal Quick Links */
.footer-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2.5rem;
list-style: none;
margin: 0 auto 2.5rem;
padding: 0;
}

.footer-links li a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
padding: 0.5rem 0;
position: relative;
transition: color 0.3s ease;
white-space: nowrap;
}

/* Light theme links */
body:not(.dark-theme) .footer-links li a {
color: #333; /* stronger contrast on white background */
}

/* Footer brand styling for light mode: gradient text fill (text shows gradient only) */
body:not(.dark-theme) .footer-logo {
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
background-clip: text; /* standard property for compatibility */
-webkit-text-fill-color: transparent; /* show background through text */
color: transparent; /* fallback */
}

/* Underline animation */
.footer-links li a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: linear-gradient(135deg, #667eea, #764ba2);
transition: width 0.3s ease;
}

.footer-links li a:hover {
color: white;
}

/* Light theme link hover */
body:not(.dark-theme) .footer-links li a:hover {
color: #333;
}

.footer-links li a:hover::after {
width: 100%;
}

/* Footer bottom */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 1.5rem;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}

/* Light theme footer bottom */
body:not(.dark-theme) .footer-bottom {
border-top: 1px solid rgba(102, 126, 234, 0.2);
color: #666;
}

.footer-bottom strong {
color: white;
font-weight: 600;
}

/* Light theme strong text */
body:not(.dark-theme) .footer-bottom strong {
color: #333;
}

/* Responsive Design */
@media (max-width: 768px) {
.footer {
padding: 3rem 1rem 1rem;
}

.footer-logo {
font-size: 2rem;
}

.footer-tagline {
font-size: 1rem;
padding: 0 1rem;
}

.footer-links {
gap: 1.5rem;
}

.socials {
gap: 1rem;
}

.socials li a {
width: 40px;
height: 40px;
font-size: 1.1rem;
}
}

@media (max-width: 480px) {
.footer-links {
flex-direction: column;
gap: 1rem;
}

.footer {
padding: 2rem 1rem 1rem;
}
}
/* Responsive design */
@media (max-width: 768px) {
.hero h1 {
Expand Down Expand Up @@ -1555,13 +1788,18 @@ body.dark-theme button:hover {
color: white;
padding: 10px;
font-size: larger;
text-decoration: none;
}

.footer-logo {
font-size: 2rem;
font-weight: 700;
background: white;
/* Gradient text fill for both light and dark themes */
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /* fallback */
margin: 10px;
}

Expand All @@ -1584,4 +1822,4 @@ body.dark-theme button:hover {
flex-wrap: wrap;
font-size: 14px;
gap: 50px;
}
}