This website was created using Claude Sonnet 4.6 via Claude Code, starting from Word documents and photos provided by the foundation team. The prompt below captures all the technical decisions, design conventions, and setup choices made during that session. Organisation-specific content has been replaced with placeholders so the prompt can be reused for a similar NGO or non-profit website.
# Static NGO / Non-Profit Website — Prompt Template
## Prompt
Create a multi-page static website (plain HTML + CSS, no frameworks, no build step) for
[organisation name], a [type of organisation — e.g. "registered non-profit in Kenya"] that
[brief mission statement].
Use the following as source material:
[paste Word document content, programme descriptions, contact info, or attach source files]
---
## Pages to create
- index.html — Homepage: photo hero, about snapshot, programme cards, impact stats, CTA
- about.html — Who we are, vision/mission/purpose pillars, founder bio, board members
- programmes.html — All [N] programmes with descriptions, activities, SDG alignment tags
- impact.html — Impact areas, key projects with goals, get-involved section
- partners.html — Why partnerships matter, partner types, become-a-partner CTA
- contact.html — Contact info, office hours, social links, Formspree form, support cards
- thanks.html — Post-form-submission confirmation page (Formspree redirects here)
- prompt-instructions.html — How-this-was-built page (footer-only link, not in main nav)
---
## Design
- Theme colour: [primary hex — e.g. #4a0080 deep purple]
Derive a dark shade, mid shade, light shade, and pale tint for use across the UI.
- Style: modern, clean, mobile-first, warm and trustworthy feel suited to a community NGO.
Dark header and footer, light body, sections alternating between white and the pale tint.
- Typography: system UI font stack — no web font dependency.
- No emojis in UI copy. Use descriptive text or Unicode symbols for icon-style list items.
Layout components to include:
- Sticky header: logo left (links to index.html), org name + tagline, desktop nav right,
hamburger on mobile. Allow org name to wrap on mobile (white-space: normal).
Hide tagline on mobile.
- Photo hero (index.html): community photo as background behind a strong colour gradient
(~80% opacity) so white headline text is legible.
- Photo strips: full-bleed sections with ~72% opaque colour overlay + white text, used
mid-page for visual warmth in place of plain quote banners.
- 3–4 column card grid (collapses to single column on mobile) for programmes and impact.
- Vision/Mission pillar blocks: left-bordered cards for purpose statements.
- Stats row: large number highlights in a horizontal grid.
- CTA banner: full-width gradient section with headline and button.
- Footer: logo, nav links, copyright, subdued "Made by Claude" meta link.
Container: max-width 1080px. Mobile breakpoints: 640px (nav), 700px (multi-column grids).
---
## Logo handling
The logo will be provided as a JPEG or PNG with a background.
Process it with Python + Pillow before using it on the site:
1. Open the image, convert to RGBA.
2. Remove the background: for every pixel where R, G, B > 220, set alpha = 0.
3. Scan pixel density per row to locate any boundary between the symbol and text rows —
a near-empty row (very few non-transparent pixels) marks the gap.
4. Crop to just above that gap, discarding any text rows.
5. Scale the cropped symbol up so its height equals the original image height,
then centre-crop to a square canvas. Save as logo.png.
In CSS:
- filter: brightness(0) invert(1) — renders the symbol as white on dark header/footer
- object-fit: contain; flex-shrink: 0
- No border-radius needed if the symbol is already circular
---
## Photography
Store photos in the project root. Use a two-layer CSS background for each:
.photo-strip-[name] {
background:
linear-gradient(rgba([R],[G],[B],0.72), rgba([R],[G],[B],0.72)),
url('[filename]') center [Y%] / cover no-repeat;
}
Adjust the alpha (0.72) to control how much of the photo shows through.
The hero uses a stronger gradient (0.80–0.84) since white text must remain legible.
---
## Programmes
List each programme with:
- Name and short description (2–3 sentences)
- Bullet list of key activities
- SDG alignment tags (small colour pill labels)
- An id anchor for deep-linking from homepage cards
---
## Contact form (Formspree)
Use Formspree (formspree.io) — no backend code required.
Form tag:
<form action="https://formspree.io/f/[FORM_ID]" method="POST">
Honeypot field (spam filtering):
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
Redirect after successful submission:
<input type="hidden" name="_next" value="https://[DOMAIN]/thanks.html" />
Recommended fields: name (required), email, phone/WhatsApp, subject dropdown, message textarea.
Subject options: General Enquiry, Donation, Volunteering, Partnership, Programme Information, Other.
No JavaScript form handling needed.
---
## Docker / self-hosting
Serve with nginx:alpine via Docker Compose. All site files in the repo root.
For local preview or direct port exposure:
services:
[service-name]:
image: nginx:alpine
container_name: [service-name]
restart: unless-stopped
ports:
- "80:80"
volumes:
- ./:/usr/share/nginx/html:ro
For deployment behind Nginx Proxy Manager — remove ports, attach to NPM's Docker network:
services:
[service-name]:
image: nginx:alpine
container_name: [service-name]
restart: unless-stopped
volumes:
- ./:/usr/share/nginx/html:ro
networks:
- npm_default # verify name: docker network ls
networks:
npm_default:
external: true
In NPM: add a proxy host, forward to hostname [service-name], port 80.
---
## Checklist before going live
- [ ] Replace all [placeholder] text with real content
- [ ] Add real board member names and bios
- [ ] Add confirmed social media URLs (Instagram, LinkedIn, X/Twitter)
- [ ] Set Formspree form ID and confirm destination email in dashboard
- [ ] Update _next redirect URL to https://[DOMAIN]/thanks.html
- [ ] Process and upload logo.png, confirm it renders correctly in header and footer
- [ ] Drop community photos into project root, add CSS classes, reference in HTML
- [ ] Attach Docker Compose to NPM network, create proxy host entry
- [ ] Test contact form end-to-end: submit → redirect to thanks.html → email received
- [ ] Check on mobile: header wraps, hamburger nav opens/closes, no element overlap
- [ ] Add partner logos and profiles once partnerships are established