Donation Campaign

Donation Campaign is a landing page for raising money for one specific thing. It is built on a single conviction: donors do not give to causes, they give to projects with a budget they can check. So the page prints the full itemised budget including the charity's own cut, publishes the delays alongside the wins, and makes the progress bar the second thing you see.
Sections, in order

Sticky navbar with anchors and a donate button.
Hero — a phase badge, the project stated in one sentence with a number, a photograph with a caption crediting the community's own work, and a donation card: amount raised against target, a funding bar, three amount chips that each say what that sum buys, a free-text amount, and a give-once-or-monthly selector. The chips and the field are wired to one value, so the button label can never disagree with the input.
What the target buys — six budget lines with real costs and quote references, the last of which is the organisation's own 4.8%.
Where your money goes — four proportion bars measured for this project rather than blended across the charity.
Progress timeline — six entries, two of which are delays written up as plainly as the successes.
Accountability — a dark band: published invoices, a public audit including a critical finding, and the fact that the community committee can remove the charity from the project.
Photographs — a six-image mosaic credited to the committee's volunteers.
Voices — three quotes, from the committee chair, a donor and a resident.
FAQ — six questions: missing the target, tax receipts, cancelling a monthly gift, why overheads are not zero, what keeps the well working in five years, visits and goods in kind.
Closing donation form with dedication and a message to the committee.

Design and style. Sober rather than pleading: deep crimson and teal on warm ivory, Lora over Inter, generous photography, proportion bars instead of pie charts. Amount chips, FAQ accordion, scroll reveal and mobile menu are vanilla JavaScript.
Before you publish. Replace the budget table with your real one and keep the raised/target figures identical in the hero card, the bar labels, the closing CTA and the footer — four places, two numbers, and a donor who spots a mismatch will not give. Set the funding bar's width to match the percentage you state. The delays in the timeline are not decoration: a campaign page with only good news reads as a brochure, so keep at least one honest setback. The forms use named inputs with no action attribute, so PageHub attaches the handler on publish and every pledge arrives in Form Submissions with amount, frequency and dedication attached — connect your payment link in the confirmation email.
Best suited to infrastructure and construction appeals, disaster relief, medical and education funds, animal welfare, community projects, and any fundraiser where trust is the obstacle rather than sympathy.