Styling the Footer

Styling the Footer

The footer is the closing section of the page. We'll style it with a dark background, a multi-column grid layout, interactive links, and a copyright bar.

Footer Background & Base

#main-footer {
    background: #2c3e50;
    color: #bbb;
    padding: 50px 0 0;
    font-size: 14px;
}

#main-footer h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #3498db;
    display: inline-block;
}

Footer Grid

.footer-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-col {
    flex: 1;
    min-width: 200px;
}

.footer-col p {
    line-height: 1.8;
    color: #999;
}

Footer Links

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #999;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-col ul li a:hover {
    color: #3498db;
    padding-left: 5px;
}

Contact List

.contact-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    color: #999;
    line-height: 1.6;
}

Social Links

.social-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social-links a {
    display: inline-block;
    padding: 8px 16px;
    background: #34495e;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    transition: background 0.3s ease;
}

.social-links a:hover {
    background: #3498db;
}

Copyright Bar

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid #34495e;
    color: #777;
    font-size: 13px;
}

Complete Static Page

At this point, our static HTML/CSS page is complete! We have:

• ✅ A sticky navigation header with logo
• ✅ A hero section with background image and CTA
• ✅ Blog post cards in a responsive grid
• ✅ A sidebar with widgets
• ✅ A professional footer with columns

The next phase is setting up WordPress and converting this static page into a dynamic WordPress theme.

Key Takeaways

• Dark backgrounds with muted text create a professional footer
• Flexbox with flex-wrap and min-width gives built-in responsive behavior
• Hover effects on links (color change + padding slide) add subtle interactivity
• A border-top on the copyright bar separates it visually from the columns
• The static HTML/CSS is now complete — ready for WordPress conversion