🦶 Footer Design Guide
The Footer is the safety net of your website. It's where users go when they can't find what they're looking for, or to find trust signals like contact info, legal policies, and social proof. For a mushroom education hub, the footer should organize deep content hierarchies (Species, Cultivation, Safety), provide quick access to legal disclaimers, and encourage community connection via social links. This guide covers a responsive multi-column layout, social media icon placement, copyright formatting, and a "Back to Top" utility.
🎨 Visual Demo
Scroll simulation area
↑
💻 CSS Implementation
1. Grid Layout (Responsive):
.site-footer {
background: #2d3748;
color: #e2e8f0;
padding: 60px 20px 20px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr; /* Brand takes 2x space */
gap: 40px;
max-width: 1200px;
margin: 0 auto 40px;
}
/* Tablet Breakpoint */
@media (max-width: 900px) {
.footer-grid {
grid-template-columns: 1fr 1fr; /* 2 columns */
}
.footer-brand {
grid-column: 1 / -1; /* Brand spans full width */
margin-bottom: 20px;
}
}
/* Mobile Breakpoint */
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr; /* Stack vertically */
text-align: center;
}
.social-icons {
justify-content: center;
}
}2. Social Media Icons:
.social-icons {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.social-icon:hover {
background: #fda085; /* Brand color */
transform: translateY(-3px);
}3. Back to Top Button:
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: #fda085;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s;
z-index: 900;
/* Hidden initially */
opacity: 0;
visibility: hidden;
transform: translateY(20px);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: #f6d365;
transform: translateY(-5px);
}⚙️ JavaScript (Back to Top)
const backToTopBtn = document.querySelector('.back-to-top');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopBtn.classList.add('visible');
} else {
backToTopBtn.classList.remove('visible');
}
});
backToTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});✅ Footer Checklist
Implementation Checklist:
- ☐ Responsive Grid: 4 cols (desktop) → 2 cols (tablet) → 1 col (mobile).
- ☐ Links: Grouped logically (Discover, Community, Legal).
- ☐ Social Icons: Accessible
aria-labeltags present. - ☐ Copyright: Auto-updating year script or static current year.
- ☐ Back to Top: Appears only after scrolling down.
- ☐ Contrast: Text vs Background meets WCAG AA (4.5:1).
- ☐ Padding: Sufficient spacing to prevent accidental clicks on mobile.