# Free wedding planner website template > Free HTML wedding planner website template with priced packages, a seasons scroll and a timed wedding day. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. Wedding planner website template: one free HTML file for a studio that plans garden weddings, with three priced packages, a four-season flower scroll, a timed wedding day, four wedding stories and an enquiry form. Orange colour fields on a pale grey ground carry the garden photography. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it. - Page: https://8b.com/templates/aubade/ - Live demo: https://8b.com/templates/aubade/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/aubade/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/wedding-planner-website-template - Download ZIP: https://8b.com/templates/aubade/wedding-planner-website-template.zip - Template name in the repository: Aubade - At a glance: One 108 KB index.html with its CSS and JavaScript inside, 13 sections, 23 Unsplash photos credited in CREDITS.md, Google Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr. ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash curl -LO https://raw.githubusercontent.com/8bsite/wedding-planner-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/wedding-planner-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/wedding-planner-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/wedding-planner-website-template/main/CREDITS.md ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this the site for . Replace first the studio name, the logo SVG, the packages, the timed day, the weddings, the planners and the journal. Keep the section ids, the classes AGENTS.md lists, the --len numbers and one season field per slide. Ask me for missing facts and never invent prices, weddings, quotes or contacts. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/wedding-planner-website-template my-site`. ## About A planner who wants a wedding planner website, or a florist and event stylist comparing event planner websites, can use it as a base. The page answers what couples ask first: how far ahead to book, what each package costs, what a day looks like and what happens in the rain. A venue with seasonal packages can keep the same order, and so can any small studio with tiers. Vibe coding with Claude Code, Cursor or Codex starts with facts only the studio has: package names, prices and lead times, the team, venues, real weddings, quotes and a reply time. The demo invents all of them, plus a Bath address and three journal posts. Swap the name, the logo SVG and the prices first. Keep the section ids, the listed classes and each --len number, and update --len when a name changes. As a wedding planning website it fits a small studio that sells fixed packages and wants an editorial feel. A party or celebration business with a lineup and ticket passes is closer to the [festival and event](https://8b.com/templates/ondo/) template. The weak spots: the journal links lead to pages that do not exist, and the enquiry form sends nothing. A studio that wants no code can use the 8B builder. ## Design - Palette: #efefef (page ground and the grounds of the packages, weddings, quotes and contact sections, the spring field), #1c1c1c (text, buttons, rules, the black day and journal sections, the winter field, one wedding card and one quote card), #8c8c8c (the handover and footer grounds, the summer field, one wedding card, the grey quote card), #f0925c (the opening field, the autumn field, the logo chip, button hover fills, question markers, hour times on black, one wedding card and the orange quote), #ffffff (text on black and grey, the planners and questions grounds, the handover labels, one wedding card and one quote card, the footer wordmark), #5c5c5c (secondary paragraphs and captions on light grounds), #a3a3a3 (secondary text on the black sections and in the menu overlay) - Fonts: Google Sans (the only typeface, loaded as a variable font from weight 400 to 700 for every heading, label, paragraph and button, with an Arial based fallback) A four-column grid with wide side margins. The opening puts three facts on the left, a tall couple photo next, and the heading in the right half, all on one flat orange field. Later sections swap flat grounds: pale grey, white, mid grey and black. Each heading sits left with a short paragraph in the right half, and hairline rules open the package rows and the questions. The season words and the footer wordmark are sized by their character count. Orange fills whole fields and also the button hover, the question markers and the hour times on the black day section. With reduced motion the scroll animations and smooth scrolling switch off and the seasons stack, but the header bar still hides on scroll down. ## Sections and motion - **Navigation** (navigation): top bar with the logo, a Check your date button and a dot-grid menu button; full-screen menu with ten links, email and phone. Motion: The header bar hides when you scroll down and returns when you scroll up, and the nine dots of the menu button shift on hover. - **Two planners, eighteen weddings a year, and every one of them started before the sun was up.** (opening): orange colour field with the h1, a booking button, a tall couple photo and three facts. Motion: On load the heading, paragraph, buttons and facts rise in turn and the photo settles from a slight zoom. - **Three ways to plan a garden wedding** (planning): three planning packages as rows with price, inclusions and timing. Motion: The heading rises line by line and a hairline above each package draws across as the row arrives. - **Every wedding starts with a flower in season** (seasons): four colour fields in a horizontal track, one per season, with a flower photo and a giant season word. Motion: Pinned: the four season fields slide left as a track for three screen widths of scroll; from the second field on, each photo opens from a narrow strip to full width while the giant season word slides against the track. - **Hand it over** (handover): a heap of ten task labels carried into an ordered list, beside what stays with the couple. Motion: Pinned on wide screens: ten task labels start scattered and tilted over the couple's half and are carried one by one into the list on the right; on phones each label slides in as it rises. - **From first light to the last song** (day): a wedding day hour by hour beside a sticky frame of eight photos that change with the hour. Motion: Each hour's time swells to display size while its row crosses the screen, and the sticky photo frame slides the previous photo up to uncover the next. - **Weddings we have planned** (weddings): four weddings as a mosaic of colour cards and photos. Motion: In each pair the colour card and the photo start swapped and slide past each other into the mosaic as they rise. - **Two planners, both on the day** (planners): two portraits and short bios of the planners. Motion: The heading rises and each portrait is revealed in four stair steps. - **In their words** (words): four couples' notes as colour cards that stack like a deck. Motion: The four quote cards stick at stepped offsets, and each covered card shrinks slightly as the next slides over it. - **Questions couples ask first** (questions): six questions in native
with hairline rules. Motion: The heading rises and a hairline draws across above each question. - **Journal** (journal): three journal notes with a photo, date, title and link, rising onto one line. Motion: On wide screens the three notes start at different heights and settle onto one line as the section crosses the screen, their photos easing out of a close crop; on phones each note rises on its own. - **Tell us the date and the garden** (contact): an enquiry form beside the studio's email, phone, address and a gazebo photo. Motion: The heading rises and the gazebo photo is revealed in stair steps. - **Studio** (footer): wordmark, studio address, contact links and the copyright with the Design: 8B credit ## Good for - wedding planner or wedding coordinator - florist, event stylist or venue with seasonal packages - event, party or celebration planning studio - any small service studio that sells tiered packages with a warm, editorial look ## Questions **Is this one of the free wedding website templates, and can I use it for client sites?** Yes. It is one index.html under the MIT licence, so you can use it for clients at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step, and the photos are Unsplash images listed in CREDITS.md. **How do I give this wedding planner template to an AI agent?** Download index.html and AGENTS.md from the repository into an empty folder, open it in Claude Code, Cursor or Codex, and paste the prompt from this page. AGENTS.md tells the agent what to replace, what to keep and which facts to ask you for. **What must I keep when I edit it?** Keep every section id and the data-8b-section, data-8b-motion and data-8b-part attributes, the classes AGENTS.md lists for each animated section, the --len numbers and the quote card order. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it. **Does the enquiry form send anything?** No. The script checks the required fields, clears the form and shows a thank-you line, and nothing leaves the page. Connect it to Formspree or Netlify Forms, or your own handler. The Check your date and Tell us your date buttons only jump to the form. **Can I use it for an event planner or a florist?** Yes, with new copy. The packages, the four seasons and the timed day work for any studio selling tiers around dates, such as an event planning template for parties. The wording is about weddings throughout, so an agent rewrites every section, not only the prices. **Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/). You describe the site in a sentence and it designs a new one, not this template. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT through the 8B connector. ## Before publishing Replace: social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). - Check your date button in the top bar and Tell us your date button in the opening lead to #contact now; point them to your booking or enquiry page, or keep them pointing to the enquiry form. - Ask about full planning, Ask about partial planning and Ask about the day links in the planning section lead to #contact now; point them to the same enquiry form or a page for each package. - Read the note links under the three journal posts lead to relative addresses journal/sweet-peas-in-september, journal/a-rain-plan-is-not-a-marquee and journal/a-run-sheet-your-aunt-can-read, which do not exist in this file now; point them to your own blog post addresses, or remove the links and the journal section. - Instagram and Pinterest links in the footer lead to the home pages instagram.com and pinterest.com now; point them to your studio's profiles. - Send the enquiry button in the contact form lead to nothing is sent: the form has action="#contact" and a script shows the thank-you line now; point them to your form endpoint (Formspree, Netlify Forms) or your own handler. - With reduced motion the scroll scenes and Lenis are off and the seasons stack, but the bar still hides on scroll down and the menu dots move on hover. - The journal links point to pages that do not exist in this file. - The opening has no scroll motion, only the load-in, so the first screen is quieter than the sections below it; its four .opening__flood spans are the same orange as the ground and show nothing. ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 108+, Safari 15.4+, Firefox 101+ (it uses cascade layers, small/dynamic viewport units).