Description
.tpl-section{background:#0f0f0f;border:1px solid #c9a84c;border-radius:10px;padding:28px 32px;margin:28px 0;font-family:’Segoe UI’,system-ui,sans-serif;color:#e8e8e8}
.tpl-section h3{color:#c9a84c;font-size:1.05rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid #2a2a2a}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tpl-grid li{background:#181818;border:1px solid #2a2a2a;border-radius:7px;padding:14px 16px;font-size:.9rem;line-height:1.5}
.tpl-grid li strong{display:block;color:#c9a84c;margin-bottom:4px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.tpl-included{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.tpl-included li{display:flex;align-items:flex-start;gap:9px;background:#181818;border-radius:7px;padding:10px 13px;font-size:.88rem;line-height:1.45}
.tpl-included li::before{content:”✓”;color:#c9a84c;font-weight:700;flex-shrink:0;margin-top:1px}
.tpl-stack{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-stack li{background:#1a1a1a;border:1px solid #c9a84c33;border-radius:20px;padding:5px 14px;font-size:.8rem;color:#d4b96a;font-weight:600}
.tpl-for{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-for li{background:#1a1a1a;border:1px solid #3a3a3a;border-radius:6px;padding:7px 14px;font-size:.85rem;color:#ccc}
.tpl-for li::before{content:”→ “;color:#c9a84c}
Nonprofit Landing Page HTML Template — Turn Visitors into Donors
Give your cause the professional online presence it deserves. This nonprofit landing page template is built to inspire trust, communicate impact, and convert website visitors into recurring donors — without needing a developer or expensive page-builder subscription.
Feature Highlights
- Animated Impact Counters4 key stats count from zero on scroll (lives impacted, meals, countries, volunteers). Eased JS increment.
- Donation Amount SelectorPre-set $25 / $50 / $100 / Custom buttons — connects to PayPal / Stripe / Donorbox via one form action URL.
- Programs Section3-column icon card layout describing core initiatives with heading, description, and Learn More link.
- Testimonial CarouselBeneficiary photo, name, location, and story quote — auto-advances every 5 seconds with dot nav.
- Fundraising Progress BarCampaign goal vs. amount raised + days remaining. Animated bar fills on page load.
- Team Section4-column responsive grid with board member / staff photo, name, title, and LinkedIn icon.
- Partners Logo RowGreyscale sponsor logos with hover colorize effect for instant credibility.
- Newsletter SignupFull-width CTA section — Mailchimp embed or any POST endpoint, no backend needed.
What’s Included
- index.html — full nonprofit landing page
- style.css — accessible, warm stylesheet with CSS custom properties
- nonprofit.js — counters, carousel, donation selector, progress bar
- /assets/ — demo hero photo, team portraits, partner logos, program icons
- README.md — connect your payment processor and email provider in minutes
Tech Stack
- Pure HTML5 + CSS3
- Vanilla JS
- Google Fonts — Nunito + Merriweather
- ARIA Accessible
- Intersection Observer
- Payment-processor agnostic
Perfect For
- Nonprofits and charities needing a professional fundraising page
- NGOs launching a donation campaign without dev budget
- Community organizations promoting awareness and events
- Social entrepreneurs building a cause-driven online presence
- Grant writers showcasing impact metrics to potential funders
Frequently Asked Questions
Can I connect a real donation processor?+
Yes. The donate button is a standard link — point it to your PayPal Giving Fund, Stripe Checkout, or Donorbox campaign URL. No template changes needed beyond updating the href.
Is the fundraising progress bar dynamic?+
In the demo it is driven by a CSS variable. To make it truly dynamic, fetch your current raised amount from your donation platform API and update the variable via a small script.
Can I add more team members?+
Yes. The team grid is CSS Grid-based. Duplicate a member card, update the photo, name, role, and bio, and the layout reflows automatically on every screen size.
Is the volunteer sign-up form functional?+
The form is fully styled and front-end validated. Submissions need a back-end handler — Formspree, Netlify Forms, or your own server endpoint — to store or email the data.
Does it include an events calendar?+
The template includes a styled upcoming-events list section. For a full interactive calendar, embed a Google Calendar widget or integrate a library like FullCalendar.
Felix K. –
I build sites for property agents and this is now my go-to template. The agent profile cards, featured listings carousel, and neighbourhood guide section cover every client request I get. Worth every cent.
Victoria F. –
The property listing cards with image carousel, bed/bath icons, and price badge are the most polished I’ve seen in any real estate template. The map search integration placeholder made wiring up Mapbox straightforward. Exceptional quality.
Aurora I. –
Clean, professional design that real estate clients trust immediately. The mortgage calculator widget is a smart inclusion and works correctly. Only minor issue was the Google Maps iframe needing an API key placeholder — purely cosmetic until you add your key.
Sebastian Q. –
Advanced filter panel with price range slider, property type checkboxes, and area selector — all styled beautifully. The single-property page with a full-screen gallery and enquiry form is conversion-optimised out of the box. Superb.