Awards & Recognition Footer Template

Build instant credibility and trust with this footer designed to showcase your awards and recognition.

Perfect for businesses and professionals who have earned accolades, been featured in the press, or worked with prominent clients. This footer uses social proof to make a powerful final impression on potential customers.

Screenshot of a footer featuring a section with 'As Featured On' and a row of placeholder logos.

Get Source Code Preview

About this Awards & Recognition Footer Template

This footer's primary goal is to leverage social proof. By prominently displaying the logos of companies you've worked with, publications that have featured you, or awards you've won, you immediately increase a visitor's confidence in your brand. The template features a dedicated, high-contrast section for the logos, ensuring they stand out. The rest of the footer provides essential links and copyright information in a clean, organized manner.

Features

Social Proof Section: A dedicated area with a clear heading like "As Featured On" or "Our Valued Clients".
Flexible Logo Display: Uses Flexbox to create a row of logos that wraps gracefully on smaller screens.
Clean & Professional Design: A two-part structure separates the recognition section from the standard footer links, creating a strong visual hierarchy.
Easy to Customize: The placeholder logos are simple SVGs that are easy to replace with your own assets.
Fully Responsive & Aligned: Looks great on all devices and aligns with the main page content.

Ideal Use Cases

Startups featured in tech publications.
Agencies and freelancers showcasing client logos.
Companies that have won industry awards.
Authors or professionals featured in the media.

Code Breakdown

The template is composed of two main sections within the footer. The .footer-awards__recognition section is designed to draw attention with a distinct background color. It contains a heading and a Flexbox container (.footer-awards__logo-grid) that aligns the logos and allows them to wrap. The .footer-awards__main section below it uses a standard multi-column CSS Grid layout for navigation links and a final bottom bar for copyright details.

Code

Here's the full code for the footer template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awards & Recognition Footer</title>
    <style>
        :root {
            --recognition-bg: #f8f9fa;
            --recognition-heading-color: #6c757d;
            
            --footer-bg: #212529;
            --footer-text: #adb5bd;
            --footer-heading: #ffffff;
            --footer-link-hover: #ffffff;
            --footer-border: #343a40;
        }

/* Basic body styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        main {
            flex-grow: 1;
        }

.container {
            width: 90%;
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
        }

.main-content {
            padding: 2rem 0;
        }

/* FOOTER STYLES START HERE */
        
        .footer-awards {
            line-height: 1.6;
        }

/* Recognition Section */
        .footer-awards__recognition {
            background-color: var(--recognition-bg);
            padding: 2.5rem 0;
            text-align: center;
        }
        .footer-awards__recognition-heading {
            color: var(--recognition-heading-color);
            font-weight: 500;
            font-size: 1rem;
            margin: 0 0 2rem 0;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .footer-awards__logo-grid {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 3rem;
        }
        .footer-awards__logo-grid svg {
            height: 30px;
            width: auto;
            max-width: 130px;
            fill: #999;
        }

/* Main Footer Section */
        .footer-awards__main {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding: 3rem 0;
            font-size: 0.9rem;
        }
        
        .footer-awards__main-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Mobile layout */
            gap: 2rem;
        }

.footer-awards__main h3 {
            color: var(--footer-heading);
            font-size: 1.1rem;
            margin: 0 0 1rem 0;
        }
        .footer-awards__main ul { margin: 0; padding: 0; list-style: none; }
        .footer-awards__main li:not(:last-child) { margin-bottom: 0.75rem; }
        .footer-awards__main a { color: var(--footer-text); text-decoration: none; }
        .footer-awards__main a:hover { color: var(--footer-link-hover); text-decoration: underline; }

.footer-awards__copyright {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--footer-border);
            text-align: center;
            font-size: 0.875rem;
        }

@media (min-width: 992px) {
            .footer-awards__main-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>Awards & Recognition Footer</h1>
            <p>Showcase client logos, press mentions, or awards to build trust.</p>
        </div>
    </main>

<footer class="footer-awards" role="contentinfo">
        <section class="footer-awards__recognition" aria-labelledby="recognition-heading">
            <div class="container">
                <h4 id="recognition-heading" class="footer-awards__recognition-heading">As Featured On</h4>
                <div class="footer-awards__logo-grid">
                    
                    <svg role="img" viewBox="0 0 150 40"><title>Publication Logo 1</title><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="20">PUBLICATION</text></svg>
                    <svg role="img" viewBox="0 0 150 40"><title>Publication Logo 2</title><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="20">TECH NEWS</text></svg>
                    <svg role="img" viewBox="0 0 150 40"><title>Publication Logo 3</title><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="20">AWARDS</text></svg>
                    <svg role="img" viewBox="0 0 150 40"><title>Publication Logo 4</title><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="20">CLIENT</text></svg>
                </div>
            </div>
        </section>
        <section class="footer-awards__main">
            <div class="container">
                <div class="footer-awards__main-grid">
                    <div class="footer-awards__links">
                        <h3>Company</h3>
                        <ul>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Careers</a></li>
                            <li><a href="#">Press Kit</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                    <div class="footer-awards__links">
                        <h3>Services</h3>
                        <ul>
                            <li><a href="#">Web Design</a></li>
                            <li><a href="#">Development</a></li>
                            <li><a href="#">Marketing</a></li>
                            <li><a href="#">Consulting</a></li>
                        </ul>
                    </div>
                    <div class="footer-awards__links">
                        <h3>Resources</h3>
                        <ul>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Case Studies</a></li>
                            <li><a href="#">FAQ</a></li>
                        </ul>
                    </div>
                    <div class="footer-awards__links">
                        <h3>Social</h3>
                        <ul>
                            <li><a href="#">LinkedIn</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Dribbble</a></li>
                        </ul>
                    </div>
                </div>
                <div class="footer-awards__copyright">
                    <p>&copy; 2025 Your Company Inc. All Rights Reserved.</p>
                </div>
            </div>
        </section>
    </footer>
</body>
</html>

View Output