Section 5: Upgrading the Footer Code
The footer is the last thing a visitor sees on every page of your site. That makes it a surprisingly high-value piece of real estate. Users who scroll all the way to the bottom are often the most engaged — they have read your content and are now looking for a way to act: find your phone number, navigate to another section, check your privacy policy, or connect on social media.
In Part 1 and Section 1 of Part 2, we placed a simple single-line copyright footer as a placeholder. It works, but it communicates almost nothing. A professional business website’s footer should accomplish four things at once:
Navigation: Offer an alternative way to move through the site without scrolling back to the top.
Contact: Surface your business address, phone number, and email — exactly where users look when they’re ready to reach out.
Trust: Legal links, copyright notice, and brand consistency signal that this is a real, maintained business.
Social proof continuity: Social media handles placed in the footer appear on every page, reinforcing your digital presence.
Search engines parse the footer of every page. Consistent internal links in the footer help Googlebot discover and index all your pages. Your business name, address, and phone number in the footer (known as NAP data) are a local SEO signal that helps you rank in location-based searches.
A Professional Multi-Column Footer
Before writing any code, let’s map out the structure we are building. Our footer will have two distinct horizontal zones stacked vertically: the main grid (four columns of content) and the bottom bar (copyright + legal links). This separation is both structural and visual — a thin dividing line marks the transition.
The four-column layout uses CSS Grid with an intentionally unequal column ratio: the brand column is wider (2fr) because it carries more content (logo + tagline + social links), while the three remaining columns are narrower (1fr, 1fr, 1.5fr). This asymmetry creates visual hierarchy and prevents the footer from feeling like a mechanical grid.
Build the Footer HTML Structure
We begin with the outermost scaffold — the landmark element, the main grid wrapper, and the bottom bar wrapper. No column content yet. Getting the container structure right first makes it much easier to add content inside each column without losing track of nesting.
Open all four HTML files — index.html, about.html, services.html, and contact.html — and replace the current simple footer with this new structure. The content inside each column comes in the steps that follow.
<!-- All Pages Footer Update -->
<footer class="site-footer" aria-label="Site footer">
<!-- Main Grid: Four Columns-->
<div class="footer-inner">
<!-- Column 1: Brand -->
<div class="footer-brand">
<a href="index.html" class="footer-logo">Kmacims EAT</a>
<p>
Professional web solutions built with clean, native technologies.
Fast, accessible, and designed to grow with your business.
</p>
<div class="footer-social">
<a href="https://linkedin.com" class="social-link"
aria-label="Follow us on LinkedIn"
target="_blank" rel="noopener noreferrer">in</a>
<a href="https://x.com" class="social-link"
aria-label="Follow us on X"
target="_blank" rel="noopener noreferrer">𝕏</a>
<a href="https://instagram.com" class="social-link"
aria-label="Follow us on Instagram"
target="_blank" rel="noopener noreferrer">◎</a>
<a href="https://github.com" class="social-link"
aria-label="Visit our GitHub"
target="_blank" rel="noopener noreferrer">⌥</a>
</div>
</div>
<!-- Column 2: Company navigation -->
<nav class="footer-col" aria-label="Company links">
<h4>Company</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- Column 3: Services navigation -->
<nav class="footer-col" aria-label="Services links">
<h4>Services</h4>
<ul>
<li><a href="services.html#web-design">Web Design</a></li>
<li><a href="services.html#development">Development</a></li>
<li><a href="services.html#consulting">Consulting</a></li>
<li><a href="services.html#seo">SEO & Analytics</a></li>
</ul>
</nav>
<!-- Column 4: Contact details -->
<div class="footer-col">
<h4>Contact</h4>
<address>
<div class="contact-item">
<span aria-hidden="true">📍</span>
<span>14 Marina Road, Port Harcourt,
Rivers State, Nigeria</span>
</div>
<div class="contact-item">
<span aria-hidden="true">📞</span>
<a href="tel:+2348000000000">+234 800 000 0000</a>
</div>
<div class="contact-item">
<span aria-hidden="true">✉️</span>
<a href="mailto:hello@kmacims.com">hello@kmacims.com</a>
</div>
</address>
</div>
</div><!-- /.footer-inner -->
<!-- Bottom Bar -->
<div class="footer-bottom">
<p>© 2026 Kmacims Web Solutions. All rights reserved.</p>
<ul class="footer-legal">
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms of Use</a></li>
<li><a href="cookies.html">Cookie Policy</a></li>
</ul>
</div><!-- /.footer-bottom -->
</footer>
.site-footer class styles the outer <footer> — background colour, text colour, and top-level padding. footer-inner is the CSS Grid container that holds the four columns. footer-bottom is the bottom bar below the dividing line. Each class has a single, clear job.
The rel=”noopener noreferrer” Rule
Any external link that opens in a new tab (target=”_blank”) must include rel=”noopener noreferrer”. Without it, the opened page can access the opener’s window object via window.opener — a well-known security and privacy vulnerability. This applies to every external link on your site, not just social icons.
The social icons here use Unicode characters as a tutorial-friendly shorthand. In a production site, replace them with SVG icons from a library like Heroicons, Phosphor, or Simple Icons. Paste the SVG code directly inside the <a> tag, set width and height to 18, and add aria-hidden=”true” to the SVG since the link already has an aria-label.
Privacy Policy, Terms of Use, and Cookie Policy links are legally required in most jurisdictions (GDPR, CCPA, Nigerian Data Protection Act). Placing them in a dedicated bottom bar keeps them separate from navigational content — they are not part of the site’s information architecture, they are compliance artifacts. The visual separation communicates this difference clearly.
Style the Footer with CSS Grid
Now we write the CSS that brings the footer to life. We will build this up in logical layers: the outer container first, then the grid, then the individual column elements, and finally the bottom bar. All rules are written using the CSS variables established in Part 1 for consistency.
Open css/styles.css. Find the old footer rule block and the old .footer-inner block from Section 1, and replace them entirely with the following. This is a full replacement, not an addition.
/* ═════════════════════════════════════════
SECTION 5 — Multi-Column Footer
═════════════════════════════════════════ */
/* Outer container */
.site-footer {
background: #111827;
color: white;
padding: 3rem 1rem 0;
}
/* ── Main Grid ── */
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 2.5rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid #1f2937;
}
/* ── Brand Column ── */
.footer-logo {
display: inline-block;
font-size: 1.2rem;
font-weight: 800;
color: white;
text-decoration: none;
letter-spacing: -0.02em;
margin-bottom: 0.85rem;
}
.footer-brand p {
font-size: 0.875rem;
color: #9ca3af;
line-height: 1.6;
max-width: 260px;
}
/* Social icons row */
.footer-social {
display: flex;
gap: 0.65rem;
margin-top: 1.25rem;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: #1f2937;
border-radius: 6px;
color: white;
text-decoration: none;
font-size: 0.85rem;
transition: background 0.2s ease;
}
.social-link:hover {
background: var(--primary-color);
}
/* ── Navigation and Contact Columns ── */
.footer-col h4 {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #e5e7eb;
margin-bottom: 1rem;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-col ul a {
font-size: 0.875rem;
color: #9ca3af;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-col ul a:hover {
color: white;
}
/* ── Contact details inside <address> ── */
.footer-col address {
font-style: normal; /* remove browser default italic */
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.875rem;
color: #9ca3af;
margin-bottom: 0.7rem;
line-height: 1.5;
}
.contact-item span:first-child {
flex-shrink: 0;
margin-top: 0.1rem;
}
.contact-item a {
color: #9ca3af;
text-decoration: none;
transition: color 0.2s ease;
}
.contact-item a:hover {
color: white;
}
/* ── Bottom Bar ── */
.footer-bottom {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
padding: 1.25rem 0;
font-size: 0.8rem;
color: #6b7280;
}
.footer-legal {
list-style: none;
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.footer-legal a {
color: #6b7280;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-legal a:hover {
color: #9ca3af;
}
/* ── Footer: Tablet (≤ 768px) ── */
@media (max-width: 768px) {
.footer-inner {
grid-template-columns: 1fr 1fr;
}
/* Brand column takes the full width on its own row */
.footer-brand {
grid-column: 1 / -1;
}
.footer-brand p {
max-width: 100%;
}
}
/* ── Footer: Mobile (≤ 480px) ── */
@media (max-width: 480px) {
.footer-inner {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
grid-column: 1 / -1 is a shorthand that means “span from the first grid line to the last grid line” — regardless of how many columns there are. It is the cleanest way to make an element span the full width of a grid without hardcoding the column count. When the grid changes from 4 to 2 columns at the tablet breakpoint, this one rule still correctly forces the brand column to span both columns.
