webdevpuneet.com

Nonprofit & Charity Website Template

A hopeful, transparent page for charities and community groups: a clear mission over a sunrise landscape, the impact you have made so far, exactly how donations help, your programmes, stories from the people you support and an easy way to give.

One page keeps everything on a single scrolling page. The 3-page website opens all its pages in the editor: Home, About, Privacy.

Full page preview · scroll to see it all
The complete Nonprofit & Charity Website template: Simple Sticky Navbar, Image Background Hero, Animated Stats Counters, How It Works Steps, Horizontal Timeline, Icon Grid Features, Testimonial Wall, About Us & Our Story, Team Grid, Gradient CTA Banner, Popup & Promo Modal, Floating Social Share Bar, Footer With Newsletter, Back to Top Button, Accessibility Toolbar Widget

Nonprofit & Charity Website Template — Free, Editable, Export HTML

Community · One page or 3 pages · 15 sections · Merriweather + Inter · Responsive · GSAP animation

Updated October 20, 2026

Extend with AI

Take This Template Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

Multi-page version

Pages in the 3-Page Nonprofit & Charity Website Template

Home (index.html): 9 sections, the home page
About (about.html): 2 sections
Privacy (privacy.html): 1 sections

What's included

Sections in the Nonprofit & Charity Website Template

Simple Sticky Navbar: A clean, responsive site header: logo on the left, navigation links, a log-in link and a call-to-action button
Image Background Hero: A full-width hero with your photo as the background, a dark gradient overlay that keeps text readable, a small label, a large white headline, supporting text, two buttons and an optional row of three stats along the bottom
Animated Stats Counters: A row of key numbers that count up from zero as the section scrolls into view, under a centred heading
How It Works Steps: A "how it works" section that explains a process in a few numbered steps
Horizontal Timeline: A horizontal timeline for company history, roadmaps and project milestones
Icon Grid Features: The classic features section: an eyebrow, a centred heading and intro, then a responsive grid of cards, each with an icon, a short title, a sentence of detail and an optional link
Testimonial Wall: A "wall of love" testimonials section: a heading with an overall rating summary, then customer quotes in a masonry layout where cards of different lengths fit together neatly
About Us & Our Story: The About page section most websites are missing: a large picture with a floating badge such as “Since 2014”, a heading and your story in two short paragraphs, the founder with a photo and role, three headline facts, and a grid of values with icons
Team Grid: A “meet the team” grid: a centred heading, then cards with each person’s photo, name, role and a one-line bio
Gradient CTA Banner: A bold closing call to action: a rounded panel in a rich brand gradient with a subtle grid texture and a soft glow that follows the pointer, a centred heading and text, two buttons that drift toward the cursor, and a short reassurance note underneath
Popup & Promo Modal: A popup or promo modal that opens by itself: in the middle of the screen with a dimmed page, or as a small card in a corner or along the bottom or top edge with no overlay, which the visitor can dismiss with ×
Floating Social Share Bar: A floating social share bar that takes no space in your layout
Footer With Newsletter: A footer that grows your list: on the left your logo, a short newsletter pitch and an email form that posts to any email service; on the right columns of links; underneath, social icons, the copyright and legal links
Back to Top Button: A floating scroll-to-top button that appears after the visitor has scrolled down a distance you choose and glides back to the top of the page when clicked
Accessibility Toolbar Widget: A floating accessibility button that opens a panel of display options visitors can switch on for themselves: bigger text, line height, text alignment, a readable font, contrast, grayscale, hide images, pause animations, highlight links and a reading mask

Checklist

What a nonprofit & charity Website Needs

A donate button in the hero, the middle and the end of the page
Impact numbers that are specific and recent
What a typical gift pays for, in plain terms
Stories and photos from the people or places you help
Charity number, accounts and the names of the team in the footer

About this template

A Free Nonprofit & Charity Website Template You Can Edit Online

A hopeful, transparent page for charities and community groups: a clear mission over a sunrise landscape, the impact you have made so far, exactly how donations help, your programmes, stories from the people you support and an easy way to give.

Use it as one scrolling page, or as a 3-page website (Home, About, Privacy) sharing one navbar, footer and theme. The one-page version is built from 15 sections of the Website Section Templates library and opens in the free Website Builder, where you can change every word and image, swap sections, set your own colours and fonts and export the finished site as clean HTML pages. The page is responsive, accessible and animated with GSAP, with content that stays visible without JavaScript.

The template ships with a Merriweather and Inter font pairing and a colour theme suited to nonprofit & charity websites; switch to any Google Font, upload your own, or apply your brand kit in one click.

Extras included

Extras Built Into the Nonprofit & Charity Website Template

Beyond the standard sections, the Nonprofit & Charity Website template includes 4 extras that you can edit, move or remove in the builder.

Horizontal Timeline: a pinned horizontal timeline of the charity's decade of planting, from the first nursery to millions of trees.

About Us & Our Story: an About us section with the charity's story, headline numbers and values.

Back to Top Button: a floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return.

Accessibility Toolbar Widget: a floating accessibility toolbar where visitors can enlarge text, raise contrast, hide images and pause animations.

Each extra has its own page in the free Website Section Templates library, where you can try its settings on their own before you use it here.

Make it yours

How to Get the Most From the Nonprofit & Charity Website Template

Donors give when they can see exactly what their money does, so this template is built around impact. A full-bleed hero states the mission and puts a donate button in view, counters show what past support achieved, a three-step section follows a gift from donation to result, programme cards explain the work, and stories, team profiles and a closing donation banner finish the page. A newsletter footer keeps supporters in touch.

Use real numbers in the counters and say what a specific gift buys, as the sample does with a gift that plants ten trees. Add your charity number and registered address in the footer, name the people behind the work and link the donate buttons to your donation platform. The multi-page version adds an About page for the longer story. A page like this works best when every section ends in the same action.

Who it’s for

Best For

★
Charities and NGOs
A ready-made starting point for charities and ngos, with real copy you can adapt in minutes.
◆
Community groups and foundations
A ready-made starting point for community groups and foundations, with real copy you can adapt in minutes.
●
Fundraising campaigns
A ready-made starting point for fundraising campaigns, with real copy you can adapt in minutes.

Step by step

How to Use This Template

  1. 1
    Open the templateClick “Use as one page” or “Use as 3-page website” to load it in the Website Builder. Your current website is kept in Saved.
  2. 2
    Make it yoursClick any section to change its text, images and links; upload your logo and photos.
  3. 3
    Set your brandPick colours and fonts in the Theme tab, or apply your saved brand kit.
  4. 4
    Adjust the pageAdd sections from the library, drag to reorder, duplicate or remove what you don’t need.
  5. 5
    Export and publishDownload the ZIP (one HTML file per page for the multi-page version) and upload it to Netlify, Vercel or any host.

Got questions?

Frequently Asked Questions

Link the donate buttons to your donation platform, such as JustGiving, Stripe, PayPal or GoFundMe. The template presents the cause and the gift amounts; the platform handles payment securely.

Specific results, how gifts are spent, who runs the organisation and your registration details. This template has an impact counters section, a donation-to-result steps section and a team section for that reason.

Yes. Add pages in the Pages tab, such as Volunteer or Fundraise, and build them from sections like features, a form and a call to action. They share the navbar, footer and theme.

Yes. Remove the sections you do not need, such as the counters, and keep the hero, the stories and a donate or join button. It works for community groups, clubs, foundations and campaigns.

Yes. The Nonprofit & Charity Website template is free for personal and commercial use, with no sign-up, no watermark and no attribution required.

Click “Use this template” to open it in the free Website Builder. Click any section to change its text, images and links, change colours and fonts for the whole page in the Theme tab, and add, remove or drag sections to reorder them.

Both. Use it as one scrolling page, or as a 3-page website (Home, About, Privacy) that opens with every page in the editor. The pages share one navbar, footer and theme, and the menu links to every page automatically. Add more pages (About, Pricing, Contact, Blog and others) or remove any you don’t need in the builder’s Pages tab.

Yes. As one page you get a ZIP with index.html and an assets folder. As a 3-page website you get one HTML file per page (index.html, about.html, privacy.html), a shared styles.css and script.js, and an assets folder with your images, then upload it to any web host. Links between pages also work when you open the files from your computer.