# Moth & Marigold, a free florist website template > Website for a florist or flower shop with delivery, standing orders, events and workshops. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). A one-page site for an evening-delivery flower shop: stems of the week, arrangements, delivery, weekly orders, events, growers, workshops, a care column and an order form. Blush and chocolate grounds with hot-pink script lines; the night rises over the first screen as a dome, the delivery hours slide past on a track that darkens from blush to chocolate, and event photos gather from a loose pile into a board. - Page: https://8b.com/templates/moth-marigold/ - Live demo: https://8bsite.github.io/florist-website-template/ - Repository (GitHub template): https://github.com/8bsite/florist-website-template - Download ZIP: https://github.com/8bsite/florist-website-template/archive/refs/heads/main.zip - Size: 100 KB, 27 photos (Unsplash), fonts: Brygada 1918, Playwrite US Trad and TikTok Sans - Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 smooth scroll ## 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/florist-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/florist-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/florist-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/florist-website-template/main/CREDITS.md ``` Then: ```text Read AGENTS.md, then edit index.html. Use this template as the base for a florist or flower shop site for . Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, prices, dates, growers, links and contacts, remove sections you do not need, and recolour it through the CSS variables if needed. ``` 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/florist-website-template my-site`. ## Design Moth & Marigold is a florist website template for a flower shop with evening delivery, standing orders, events and workshops. It holds this week's stems, arrangements, delivery hours, growers, a care column and an order form, and with wedding and dinner prices in its events section it also suits a wedding florist. - Palette: #eecbc0 (blush page background and cards), #331917 (chocolate text and dark sections), #fc72c4 (hot pink script lines and button hover), #a0146c (magenta workshop band, distance pins and second script colour) - Fonts: TikTok Sans (wordmark: black weight, extra wide, uppercase; also body text and labels), Brygada 1918 (headings, stem names and prices: uppercase serif), Playwrite US Trad (thin pink handwritten script, set as large as headlines) Blush and chocolate bands alternate, all square-cornered with hairline rules. The wordmark fills the width with a tilted script 'and', and script lines as big as headlines ('after five', 'rooms in bloom') sit between sections. Photos hold in sticky frames beside lists, and growers sit on a 0 to 200 mile scale. ## Sections and motion - **Navigation** (navigation): top bar: brand mark and name, section links, Order for tonight button; phone menu overlay with address, hours and phone - **Moth and Marigold** (opening): first screen: width-filling brand wordmark, two taglines, two actions and a shop photo; then a dark statement screen (demo: "after five"). Motion: Smooth scrolling throughout; headings lift in. On scroll the chocolate night rises over the first screen as a widening dome while the shop photo darkens and the wordmark spreads. - **What the fields sent** (season): this week's stock: six items with source, distance and price, beside one held photo frame (demo: flower stems). Motion: In the sticky frame the top stem photo slides away left as each row passes, and that stem's name turns bold magenta. - **Flowers that moved in** (work): portfolio grid of six arrangements, each with a title and a place/month caption. Motion: The three columns of arrangements start at different heights and settle into line as you scroll; the script ribbon slides sideways. - **Cut at five, at your door by nine** (dusk): how delivery works: five hour panels (5 pm to 9 pm) on a horizontal track, each a shade darker. Motion: The section pins and five hour panels slide sideways from 5 pm to 9 pm, each darker, their photos moving at their own speed. - **The same evening, every week** (standing): price list of three weekly subscriptions as table rows (demo: The Jar, The Mantel, The Lobby) - **Big flowers for long tables** (events): event services with prices and lead times, a button, and a board of six event photos. Motion: Tied to scroll, the six event photos start in a loose, tilted pile near the centre and spread out into the board. - **Grown within two hundred miles** (growers): suppliers placed on a 0 to 200 mile scale by distance (demo: seven flower growers). Motion: As you scroll, each grower's pin slides from zero along the mile scale to its distance, drawing a line behind it. - **Two hours at the bench after closing** (school): workshops: four dated classes with price and seats left, a booking button and one photo (demo: Thursday night school). Motion: As the workshop photo scrolls into view it opens like a window from a narrow centre strip. - **Dear Marigold** (notes): journal or blog: one featured post beside a tall photo, two shorter posts (demo: "Dear Marigold" care column). Motion: While you read the featured letter, the tall photo in its sticky frame pans slowly upward, tied to scroll. - **Before you order** (faq): questions and answers (native
) - **Tell us who they're for** (contact): order form on a card over a shop photo, with address, hours, phone and email. Motion: Tied to scroll, the order card slides in from the right with a slight tilt over the shop photo, which zooms out. - **Footer** (footer): large brand mark built from three blocks, link columns, address and contacts, copyright and the Design: 8B credit. Motion: The big brand mark assembles as you reach it: block from the left, dome from below, then the bar between. ## Good for - florist or flower shop - flower delivery or subscription service - wedding and event florist - flower farm or farm stand that sells direct - any small shop with weekly stock, a delivery window and workshops ## Questions **Does the order form take orders?** Not yet. It asks for name, phone or email, the evening, a budget and who the flowers are for, but sends nothing until you connect Formspree, Netlify Forms or a similar service. **How do I update the weekly stems and prices?** Each stem is a row of plain HTML text with name, grower, miles, price and a note, paired with one photo in the sticky frame; keep rows and photos in the same order. ## Before publishing Replace: social preview image, favicon, phone number, social media links, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.