Overview

A bright, outdoors HTML template for an environmental charity: campaigns with their figures, donations that show what they do, petitions with live signatures, volunteer days with places and a carbon footprint calculator. Wildera ships three home pages, a light and a dark theme, right-to-left support, and logic that is worked out rather than typed in: what each campaign has raised today, every petition’s count climbing through the day, the next date of every volunteer day with its places left, the impact of a gift in trees, hectares and ranger days, monthly giving, the office open now and a shop that plants a tree for every few dollars.

What’s included

• 3 home pages, each with its own scroll moment: the Red List (six endangered and vulnerable animals, each status panel lifting off its portrait as you scroll), what a gift grows (the amount runs from $5 to $500 and the trees it plants grow on the hill) and the warming stripes (one stripe a year from 1880, arriving year by year)
• A light theme by default and the field at night on one switch in every header, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker in every header: a right-to-left language turns any page around
• WebGL layers — Migrating Birds, a small flock drifting along the edges of the page titles and bands, and the footer’s Striped Earth, the globe wrapped in the warming stripes and turning — tinted by the theme colours
• The donation builder: once or monthly, five funds, suggested amounts or your own, the impact in the fund’s two kinds of work, the card fee covered on request, a tribute, three steps and a reference
• Campaigns on a yearly programme: raised today, percent, donors and days left from the date, with cause tabs, status, search and sort
• Petitions with signatures from the date that climb through the day, a sign form that adds you to the count everywhere, the latest signers and the next milestone
• Volunteer days by repeat rule with places left, a finder by kind and region and a three-step sign-up
• The carbon footprint calculator: home, travel, food and things in tonnes a year, against the average and the 2 t target, with the trees that would take it back
• Monthly giving: four Guardian tiers, monthly or yearly at 10% less, a three-step join
• The shop: categories, price filter, sort and search, the product page, bag, Guardian saving, code, free-shipping meter, tax, checkout with an order number and the trees it plants, wishlist
• Sign Up preloader, Regrow reveals (each photo uncovers behind a green edge growing up from the bottom), soft-rise copy and the paw print on hover
• About, impact report, team and profile, gallery, field notes with post formats, FAQ with search, account pages, coming soon, 404
• Fully responsive, W3C-valid, zero console errors

Getting Started

Thank you for choosing Wildera. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open wildera/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the field clock, the donation builder, the campaigns, the petitions, the volunteer days, the calculator and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the wildera/ folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are controlled by CSS variables — see Colors & Fonts. The unit costs, funds, campaigns, petitions, volunteer days, carbon factors, tiers and shop rules live in one place — see NGO Logic.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and wildera/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

wildera/
├── *.html                              the 32 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS
    │   ├── style.rtl.css               the right-to-left twin of style.css
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css          the right-to-left twin of responsive.css
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (33 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── jquery.fancybox.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      18 files
        ├── decor/                       1 files
        ├── faces/                       5 files
        ├── field/                       11 files
        ├── flags/                       6 files
        ├── gallery/                     6 files
        ├── icons/                       44 files
        ├── logo/                        5 files
        ├── menu/                        3 files
        ├── places/                      21 files
        ├── shop/                        11 files
        ├── team/                        6 files
        └── wild/                        17 files

To publish the site, upload the contents of wildera/ to your web root. Photos keep their folder, file name and size when you replace them, so no page needs editing.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --wd-turq-rgb) — change both together.

White is the page and the aqua band its quieter sections. Turquoise fills the buttons (with slate words), the progress bars, the short rule under every title and the date tiles; teal ink is turquoise made dark enough for small text, the italic eyebrows and the links. Slate sets the headings, the footer and the night bands; coral is kept for deadlines and the last places. --wd-bg, --wd-surface, --wd-band, --wd-heading and --wd-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode). The warming stripes use their own sixteen colours, blue to red, in .ws-0 to .ws-15.

Fonts

Two Google Fonts are loaded in the head of each page: Merriweather (heavy headings, the italic eyebrows, figures and quotes) and Raleway (body, navigation, buttons and forms). Swap them by editing the Google Fonts link and the --wd-ff-display / --wd-ff-body variables.

Logo

The logo is a W drawn from four leaves, tip to tip, beside the word Wildera in Merriweather. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the white header and the light theme
• logo-light.png — for dark grounds: the header over the heroes, the footer and the dark theme
• logo-word.png and mark.png — the word and the leaf W alone (the preloader’s campaign sign)
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images. To use your own logo, replace these files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Light & Dark Mode

Wildera opens light: the light theme is the default and needs no attribute. Every header (and the mobile menu) has a theme switch that turns the lights down to the field at night. The choice is saved in the browser under the key wildera-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a white flash. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there.
• Bands that stay coloured — sections with the class is-night (the causes, the Guardians, the footprint, the footer) are slate in both themes; is-turq is the turquoise band with slate words.
• White panels — the plates on the hero photographs and the calculator on its slate band take wd-on-paper and keep their white and ink in both themes.
• Icons — each illustrated icon ships in an ink and a light version, and the right one shows by theme and ground.
• Start dark — to open the site dark for first-time visitors, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

NGO Logic

The figures on every page come from one data block, JS block 09 Wildera Data near the top of main.js (var WILDERA). Edit it once and the figures, dates, places and totals follow. Money is in US dollars; times are minutes after midnight (540 = 9:00 am); weekdays run 0 = Sunday to 6 = Saturday; months 1 = January to 12 = December.

What a gift does

Campaigns on the calendar

The programme repeats every year, and each campaign is placed within half a year either side of today, so the site always has campaigns live, launching soon and just closed. Raised today is the amount on day one plus the pledges a day for every day (and hour) since the start, up to the goal; the card shows Funded at the goal, Closed after the end.

Petitions

Signatures are those on day one plus the signatures a day for the time since the start, counted to the minute, so a count climbs while the page is open. Signing adds one, saved in the browser under wildera-signed-<slug>; every card of that petition shows it. End Bottom Trawling In Marine Parks starts at 48,000 and gains 2,300 a day towards 250,000.

Volunteer days

Every day repeats on its own rule, so its next dates are always ahead of the visitor. The places taken come from a seeded hash of the date and the day, so every visitor sees the same figures:

The carbon footprint

Guardians and the shop

The bag, the wishlist, the code, the Guardian tick, the signatures and a carried gift are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag and wishlist; to start empty, set the two demo lists in doShop() (block 26 Shop) to []. Donations, monthly giving, sign-ups, petitions and checkout confirm on screen with a reference — connect them to your own payment and CRM systems to take real gifts.

WebGL Layers

Two small WebGL scenes draw the moving layers: Migrating Birds — a flock that follows the boids rules (separation, alignment, cohesion), drifting to the right along the top and bottom edges of the page titles and bands, the copy in the middle left clear — and the Striped Earth — the globe in the footer, wrapped in one meridian stripe a year from the warming series and turning on its tilted axis. Each is one canvas:

<canvas class="wd-gl is-birds" data-gl="birds" aria-hidden="true"></canvas>

• Colours — each layer reads its colours and an opacity from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha. The theme switch repaints them.
• Performance — a layer only runs while its section is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame. Without WebGL, the section’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Wildera is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys wildera-lang and wildera-dir) and reloads; the one-line script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute before the page paints. Nothing is translated — you bring your own right-to-left copy. To make a page right to left for good:

1. Set The Direction

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute. Figures, dates, the warming stripes (a timeline from 1880 on the left) and the forest keep reading left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 33 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Sign Up preloader, the header, the Regrow reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Wildera Data, Field Clock. Wildera Data holds every figure; Field Clock works out the office open now, what each campaign has raised, every petition’s signatures through the day and the next dates and places of every volunteer day from the visitor’s date and time.
• 11–18 — Custom Select, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, sliders, accordions, filters, search, forms.
• 19 — Scroll Moments. The three home pages’ scroll moments.
• 20–33 — Volunteer Days, Guardians, Campaign Browser, Petitions, Carbon Footprint, Contact Form, Shop, Account Forms, Donation Builder, Article Tools, Demo Forms, Launch Countdown, Milestones, FAQ Search. The feature pages: volunteer sign-up, monthly giving, the campaign browser, petitions, the carbon footprint, contact, the shop, accounts, the donation builder, the field notes, demo forms, the countdown, the milestones and the FAQ.

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion automatically: content appears in its final state and the scrubbed scenes rest in place.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the illustrated icons, the preloader’s hand and the language flags are included and ready to use. All demo photography shown on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form and the comment form post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, join, donation, monthly giving, petition, volunteer sign-up, checkout, account, login, register and forgot-password forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. To switch it on:

• Create v3 keys (a site key and a secret key) for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the reCAPTCHA script with your site key just before </body>:

<!-- inside the form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Once the token field is present, sendmail.php verifies every submission with Google and rejects low-score (bot) requests.

Credits

This template is built using the following open-source libraries and resources.

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Merriweather, Raleway

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds and the video popups.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.