An elegant single-page bridal photography booking website where couples can explore packages, browse a curated gallery, and submit a session enquiry — all in one beautifully crafted page.
Visit the live site to preview.
Lumière Bridal Photography is a single-page booking website for a high-end wedding photographer. The design aesthetic is romantic and refined — warm blush-pink (#F2C4CE) and antique gold (#C9A84C) on a cream background, with Cormorant Garamond headings and Lato body text — evoking the timeless elegance couples expect from a luxury bridal studio.
The site guides prospective clients through the full booking journey in one seamless scroll: discovering the photographer's story, comparing tiered packages (Essentials, Signature, Luxury), browsing a curated masonry gallery, and submitting a personalised enquiry. Package cards are interactive — clicking one pre-selects the matching option in the booking form below.
Form submissions are handled serverlessly via formsubmit.co, making the entire site deployable as a single static file with zero back-end infrastructure. All images are served from Unsplash CDN with responsive sizing via query parameters.
bridalbooking/
├── index.html # All HTML, CSS, and JavaScript — single file, no build step
├── README.md
├── .github/
│ └── workflows/
│ └── deploy.yml # GitHub Pages deployment workflow
└── .claude/
├── settings.json # Claude Code project settings (Stop hook)
└── commands/
└── github-push.md # /github-push slash command
| Section | Description |
|---|---|
| Hero | Full-viewport background image with CTA button |
| About | Two-column photographer bio with portrait |
| Packages | Three tiered pricing cards (Essentials / Signature / Luxury) |
| Gallery | CSS-columns masonry grid with 6 Unsplash images |
| Booking Form | Nine-field enquiry form (name, email, phone, date, time, package, location, guests, message) |
| Contact | Contact details, embedded Google Map, social links, and footer |
Node.js must be installed. No build step or package manager required.
git clone https://github.com/youchjbl/bridalbooking.git
cd bridalbooking
node -e "const h=require('http'),fs=require('fs');h.createServer((_,r)=>{r.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});fs.createReadStream('index.html').pipe(r)}).listen(8080,()=>console.log('http://localhost:8080'))"Then open http://localhost:8080.
| What to change | Where |
|---|---|
| Colour palette | CSS custom properties on :root in index.html (--blush, --gold, --dark, etc.) |
| Hero & gallery photos | Unsplash src URLs in the #hero and #gallery sections |
| Packages & pricing | .package-card elements in the #packages section |
| Form submission email | fetch URL in the inline <script> at the bottom (formsubmit.co/ajax/...) |
| Photographer bio & portrait | #about section |
| Nav logo name | .nav-logo anchor text in <nav> |
Automatically deployed to GitHub Pages on every push to main via the included GitHub Actions workflow (.github/workflows/deploy.yml).
Live URL: https://youchjbl.github.io/bridalbooking