Charity Works

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Charityworks is a website template for charities and nonprofit organizations, built on Bootstrap 5, with bright green accents on white and navy. It has eight pages: home, about, causes, events, blog, a single blog post, contact and elements. The layout is responsive and mobile-ready.

The home page opens with a hero and a Donate button, followed by three areas of work (clean water, education and healthcare), an about block, counters, the latest causes with progress bars that show the amount raised against the goal, a call for volunteers, social events, volunteer profiles, a testimonial slider and the latest blog posts. The inner pages add a causes page, an events page with dates and places, a blog with search and a sidebar, a blog post with comments and a comment form, an elements page with typography, buttons, tables, form elements and a gallery that opens in a lightbox, and a contact page with a working contact form and a map that loads on click. Every page has a sticky header and a newsletter form in the footer.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery), compiled from Sass with only the parts the pages use, and plain JavaScript with no jQuery. Swiper 14 runs the testimonial slider, PhotoSwipe 5 replaces Magnific Popup in the elements gallery, CSS progress bars show the causes, and small built-in modules handle the mobile menu, counters, forms and map; Slick, Owl Carousel, SlickNav, Nice Select, WOW, CounterUp and Waypoints are gone. Lucide SVG icons and a Font Awesome 7 Brands subset replace the old icon fonts. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 5.7 MB and 70 requests to 0.67 MB and 31 requests, and the download from 14.3 MB to 2.3 MB. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the fold, and the home hero image went from 952 KB to 53 KB.
• No third-party requests: Muli is self-hosted, the Twitter bird is now the X logo, and a Google Analytics 4 snippet stays commented out until you add your own ID. The contact page map is an OpenStreetMap map that needs no setup and loads only when a visitor clicks “Show map”. Before, every page loaded its web fonts from Google Fonts and the contact page loaded a Google Maps script.
• Working forms: the contact form, the newsletter forms in the footer and the blog sidebar, and the blog comment form send through php/send-email.php, php/subscribe.php and php/comment.php, with validation, a spam trap, a recipient you set and an in-page message, and the mailer keeps visitor input out of the mail headers. The blog search searches the blog.
• Accessibility: a skip link and landmarks on every page, one h1 per page, labelled form fields, names on icon-only links and buttons, a menu and submenu that work from the keyboard and close with Esc, visible focus rings and 44 px slider dots. Text meets WCAG AA contrast: the bright green stays on large surfaces with navy text, and buttons and badges use a deeper green with white labels that stay readable on hover and focus.
• Fixed: a preloader hid every page until it finished loading (it is gone); the contact page was missing its body tag (it now renders correctly); the testimonial slider had no controls on phones and tablets (it now has dots at every width); the elements page overflowed the screen at 768 px; the hero buttons and the volunteer and service links pointed to three pages that do not exist, and most footer and blog links went nowhere; and four pages stopped with a script error from a missing progress-bar plugin.
• Demo content: three distinct areas of work (all three services read “Clean Water” before), cause amounts that match their progress bars, distinct event dates and places, three different supporters in the testimonials, charity blog posts with consistent category counts, a fictional address and contact details, and corrected typos.