A responsive, 8-page Bootstrap 5 template for tree-planting nonprofits, conservation groups, and environmental causes — built with plain HTML, CSS custom properties, and vanilla JavaScript. No build tools, no framework lock-in, no npm install.
Perfect for
- Tree-planting and reforestation nonprofits
- Environmental and conservation organizations
- Climate action campaigns and fundraisers
- Community land-stewardship projects
- Any eco-conscious brand that wants an organic, editorial feel instead of a generic “corporate green” template
Pages included
- Home — hero, animated impact counters, causes teaser, process steps, testimonials, blog teaser
- About — mission/vision/values, timeline, team grid
- Causes — full campaign grid with donation progress bars
- Blog — listing grid with search, categories, and tags sidebar
- Blog Single — full article layout with author box and comments
- Contact — contact form, info cards, embedded map, FAQ accordion
- Style Guide — every color, type size, button, badge, form control, card, and alert in one place
- 404 — custom not-found page
Key features
- Fully responsive across mobile, tablet, and desktop
- Organic leaf-shaped image clipping and ring-style stat counters as signature visual details
- Animated stat counters and a sticky navbar with scroll shadow
- Contact and newsletter forms wired to placeholder JS, ready to connect to a backend or a service like Formspree
- A dedicated style guide page, so extending the design stays consistent
- Every color, spacing, and font choice controlled from CSS custom properties at the top of one stylesheet — restyle the whole site by editing values once
Tech stack
| Layer | What’s used |
|---|---|
| Framework | Bootstrap 5.3 (CSS + JS bundle) |
| Icons | Bootstrap Icons 1.11 |
| Fonts | Fraunces (display) + Work Sans (body) via Google Fonts |
| Scripting | Vanilla JavaScript — zero dependencies |
| Build step | None — everything loads from CDN |
Why it’s easy to customize
- Colors, fonts, spacing live as CSS custom properties in
style.css— change a token once and it cascades through all 8 pages - Copy is plain inline HTML with no CMS or templating syntax to learn
- Components follow standard Bootstrap 5 markup conventions, so anything you already know about Bootstrap carries over directly
- No build pipeline to configure — open
index.htmlin a browser or drop the folder on any static host (Netlify, GitHub Pages, S3) and it’s live
Also available
- A free single-page version of GreenRoots (Home only) if you want to try it before committing
- More templates in the Bootstrap templates collection
- More options in the landing page templates collection
