This website was created using Claude Sonnet 4.6 via Claude Code, starting from a flyer image and a short block of event text. 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 other purposes.
# Static Website Prompt Template
## Prompt
Create a static website (plain HTML + CSS, no frameworks, no build step) for
[purpose — e.g. "a charitable foundation's Easter outreach event"].
Use the following as source material:
[paste flyer text, event details, contact info, or attach an image of the flyer]
---
## Pages to create
- index.html — Homepage: hero section, about/event summary, action cards
- [action].html — Dedicated page for the primary CTA (donate, register, book, etc.)
- contact.html — Contact details + working contact form via Formspree
- thanks.html — Post-form-submission confirmation page (Formspree redirects here)
---
## Design
- Theme colour: [primary hex — e.g. #4a0080 purple]
Derive a dark, mid, and light shade from this for use across the UI.
- Style: modern, clean, mobile-first.
Dark header and footer, light body sections, alternating section backgrounds.
- Typography: system UI font stack (no web font dependency).
- No emojis in UI copy. Unicode symbols (e.g. 📍) are acceptable for icon-style list items.
Layout components to include:
- Sticky header: logo left, org name + tagline, desktop nav right, hamburger on mobile.
On mobile, allow org name to wrap (white-space: normal) so it does not overlap the hamburger.
Hide the tagline on mobile.
- Hero section: headline, subtext, date/event callout box, two CTA buttons.
- 3-column card grid (collapses to single column on mobile).
- Icon list for features or donation items.
- Full-width quote banner (mid-page and/or above footer).
- Footer: logo, nav links, copyright line.
Header logo block should be an <a href="index.html"> (standard home link).
External links to third-party sites: target="_blank" rel="noopener", styled to inherit
colour with a subtle underline so they read as links without breaking prose flow.
---
## Logo handling
The logo will be provided as a JPEG with a white background.
Process it with Python + Pillow before using it on the site:
1. Open the JPEG, convert to RGBA.
2. Remove the white background: for every pixel where R, G, B > 220, set alpha = 0.
3. Scan pixel density per row to locate the boundary between the symbol and any
text below it — a near-empty row (very few non-transparent pixels) marks the gap.
4. Crop to just above that gap, discarding the 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 the dark header
- object-fit: contain
- No border-radius needed if the symbol is already circular
---
## 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 — bots fill it in and are silently dropped):
<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), phone/WhatsApp, email (optional),
subject dropdown, message textarea.
No JavaScript form handling needed. Sign up at formspree.io and confirm
the destination email address in the dashboard before going live.
---
## Placeholder convention
Mark content that needs to be filled in by the client with italic brown text:
.placeholder-note {
color: #a0522d;
font-style: italic;
font-size: 0.9rem;
}
Typical placeholders: org history/bio, email address, social media links,
logo file (if not yet provided).
---
## 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 the ports mapping,
attach to NPM's Docker network instead:
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
- [ ] Set Formspree form ID and confirm destination email in dashboard
- [ ] Set [DOMAIN] in the _next redirect field
- [ ] Process and upload logo.png, confirm it renders correctly in header
- [ ] 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