Non-Profit & Donation Footer Template

Inspire action and build supporter confidence with this footer designed for non-profits and charities.

For a non-profit, the footer is a vital tool for driving donations and demonstrating transparency. This template places a bold, high-contrast "Donate" button at its core, surrounded by links to key information like impact reports and ways to get involved.

Screenshot of a non-profit footer with a large, colorful 'Donate Now' button, link columns, and a section for partner logos.

Get Source Code Preview

About this Non-Profit Footer Template

This footer is structured to meet the unique needs of a cause-driven organization. The layout uses a multi-column grid to organize information, but its central purpose is to channel user attention towards the primary call-to-action, which is donating. It also includes a dedicated section for logos of partners or sponsors, which acts as a compelling form of social proof and builds credibility with potential donors.

Features

High-Visibility Donate Button: A large, colorful button designed to be the main focal point.
Trust-Building Links: Organized columns for links to "Our Mission," "Impact Reports," and "Financials" to promote transparency.
Partner/Sponsor Logo Section: A dedicated area to showcase logos of supporting organizations, enhancing credibility.
Fully Responsive & Accessible: A robust three-stage responsive design ensures the layout is balanced and professional on all screen sizes.
Aligned Page Layout: Includes a shared .container class for perfect alignment between the page content and the footer.

Ideal Use Cases

Charities and Non-Profit Organizations (NPOs)
Community Initiatives and Fundraisers
Educational Institutions
Any organization seeking to drive donations and build community trust.

Code Breakdown

The template uses media queries to create a three-stage responsive experience. On small and medium screens, all elements are stacked vertically and center-aligned for a clean, mobile-friendly look. On large screens (above 992px), the layout transforms: the .footer-nonprofit__main section becomes a two-column CSS Grid, placing the links and the call-to-action side-by-side.

The section for partner logos, .footer-nonprofit__partners, uses Flexbox to create a simple, centered row of logos that wraps onto multiple lines if needed.

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>Non-Profit & Donation Footer</title>
    <style>
        :root {
            --footer-bg: #f8f9fa;
            --footer-text: #495057;
            --footer-heading: #212529;
            --footer-link-hover: #0056b3;
            --footer-border: #dee2e6;
            --donate-button-bg: #28a745;
            --donate-button-hover-bg: #218838;
            --donate-button-text: #ffffff;
        }

/* 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-nonprofit {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding: 3rem 0;
            border-top: 1px solid var(--footer-border);
            font-size: 0.95rem;
            line-height: 1.6;
            text-align: center;
        }

.footer-nonprofit__main {
            display: grid;
            grid-template-columns: 1fr; /* Stacked layout for small/medium screens */
            gap: 2.5rem;
        }
        
        .footer-nonprofit__links-container {
            display: grid;
            grid-template-columns: 1fr; /* Stacked on small screens */
            gap: 2rem;
        }

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

.footer-nonprofit__cta p { margin: 0 0 1rem 0; font-size: 1rem; }
        .footer-nonprofit__donate-button {
            display: inline-block;
            background-color: var(--donate-button-bg);
            color: var(--donate-button-text);
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            padding: 1rem 2.5rem;
            border-radius: 8px;
            transition: background-color 0.2s;
        }
        .footer-nonprofit__donate-button:hover { background-color: var(--donate-button-hover-bg); }

.footer-nonprofit__partners {
            padding: 2.5rem 0;
            margin: 2.5rem 0 0 0;
            border-top: 1px solid var(--footer-border);
        }
        .footer-nonprofit__partners h4 {
            text-align: center;
            margin: 0 0 1.5rem 0;
            color: var(--footer-heading);
            font-weight: 500;
        }
        .footer-nonprofit__partner-logos {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 2.5rem;
        }
        .footer-nonprofit__partner-logos svg {
            height: 35px;
            width: auto;
            fill: #888;
        }

.footer-nonprofit__bottom {
            padding-top: 2.5rem;
            border-top: 1px solid var(--footer-border);
            font-size: 0.875rem;
        }
        .footer-nonprofit__bottom p { margin: 0; }
        
        /* Media query for medium screens */
        @media (min-width: 576px) {
            .footer-nonprofit__links-container {
                grid-template-columns: repeat(2, 1fr); /* 2 columns for links */
            }
        }

/* Media query for large screens */
        @media (min-width: 992px) {
            .footer-nonprofit {
                text-align: left; /* Revert text alignment for side-by-side layout */
            }
            .footer-nonprofit__main {
                grid-template-columns: 2fr 1fr; /* Side-by-side layout */
            }
            .footer-nonprofit__cta {
                text-align: right; /* Align CTA content to the right */
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>Non-Profit & Donation Footer</h1>
            <p>A footer designed to build trust and drive donations.</p>
        </div>
    </main>

<footer class="footer-nonprofit" role="contentinfo">
        <div class="container">
            <div class="footer-nonprofit__main">
                <div class="footer-nonprofit__links-container">
                    <div class="footer-nonprofit__links">
                        <h3>About Us</h3>
                        <ul>
                            <li><a href="#">Our Mission</a></li>
                            <li><a href="#">Our Team</a></li>
                            <li><a href="#">Press</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                    <div class="footer-nonprofit__links">
                        <h3>Our Work</h3>
                        <ul>
                            <li><a href="#">Impact Reports</a></li>
                            <li><a href="#">Financials</a></li>
                            <li><a href="#">Get Involved</a></li>
                            <li><a href="#">Events</a></li>
                        </ul>
                    </div>
                </div>
                <div class="footer-nonprofit__cta">
                    <p>Your support makes our work possible. Join the cause today.</p>
                    <a href="#" class="footer-nonprofit__donate-button">Donate Now</a>
                </div>
            </div>

<div class="footer-nonprofit__partners">
                <h4>Our Partners & Supporters</h4>
                <div class="footer-nonprofit__partner-logos">
                    <svg role="img" viewBox="0 0 100 40"><title>Partner Logo 1</title><rect width="100" height="40" rx="4" fill="#e0e0e0"/><text x="50" y="25" fill="#888" text-anchor="middle" font-size="10" font-family="sans-serif">LOGO</text></svg>
                    <svg role="img" viewBox="0 0 100 40"><title>Partner Logo 2</title><rect width="100" height="40" rx="4" fill="#e0e0e0"/><text x="50" y="25" fill="#888" text-anchor="middle" font-size="10" font-family="sans-serif">LOGO</text></svg>
                    <svg role="img" viewBox="0 0 100 40"><title>Partner Logo 3</title><rect width="100" height="40" rx="4" fill="#e0e0e0"/><text x="50" y="25" fill="#888" text-anchor="middle" font-size="10" font-family="sans-serif">LOGO</text></svg>
                    <svg role="img" viewBox="0 0 100 40"><title>Partner Logo 4</title><rect width="100" height="40" rx="4" fill="#e0e0e0"/><text x="50" y="25" fill="#888" text-anchor="middle" font-size="10" font-family="sans-serif">LOGO</text></svg>
                </div>
            </div>

<div class="footer-nonprofit__bottom">
                <p>&copy; 2025 Your Charity Name. All Rights Reserved.</p>
                <p>Registered Charity Number: 12345-6789.</p>
            </div>
        </div>
    </footer>
</body>
</html>

View Output