Free florist website template

Live demo GitHub Download ZIP Use this template

Repository: github.com/8bsite/florist-website-template · Live demo: 8bsite.github.io/florist-website-template/ · MIT license

Moth & Marigold template: first screen on a phone

About this template

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.

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.

Good for:

Florist or flower shopFlower delivery or subscription serviceWedding and event floristFlower farm or farm stand that sells directAny small shop with weekly stock, a delivery window and workshops

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation, parallax website templates.

How to use the florist website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

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 give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for a florist or flower shop site for <your business: name, town, what you sell, how and when you deliver, prices, events or workshops if any>. 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.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/florist-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Florist website design and motion

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.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

Navigation
Top bar: brand mark and name, section links, Order for tonight button; phone menu overlay with address, hours and phone
Moth and Marigold
First screen: width-filling brand wordmark, two taglines, two actions and a shop photo; then a dark statement screen (demo: "after five")
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
This week's stock: six items with source, distance and price, beside one held photo frame (demo: flower stems)
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
Portfolio grid of six arrangements, each with a title and a place/month caption
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
How delivery works: five hour panels (5 pm to 9 pm) on a horizontal track, each a shade darker
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
Price list of three weekly subscriptions as table rows (demo: The Jar, The Mantel, The Lobby)
Big flowers for long tables
Event services with prices and lead times, a button, and a board of six event photos
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
Suppliers placed on a 0 to 200 mile scale by distance (demo: seven flower growers)
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
Workshops: four dated classes with price and seats left, a booking button and one photo (demo: Thursday night school)
As the workshop photo scrolls into view it opens like a window from a narrow centre strip.
Dear Marigold
Journal or blog: one featured post beside a tall photo, two shorter posts (demo: "Dear Marigold" care column)
While you read the featured letter, the tall photo in its sticky frame pans slowly upward, tied to scroll.
Before you order
Questions and answers (native <details>)
Tell us who they're for
Order form on a card over a shop photo, with address, hours, phone and email
Tied to scroll, the order card slides in from the right with a slight tilt over the shop photo, which zooms out.
Footer
Large brand mark built from three blocks, link columns, address and contacts, copyright and the Design: 8B credit
The big brand mark assembles as you reach it: block from the left, dome from below, then the bar between.

What is inside

Files: index.html (100 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Brygada 1918, Playwrite US Trad and TikTok Sans from Google Fonts (SIL Open Font License)
Photos: 27 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), container query units, cascade layers, small/dynamic viewport units).
Replace before publishing: 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). AGENTS.md lists them.
License: MIT

Good to know

One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
Order for tonight buttons in the nav, the phone menu and the first screen lead to #contact now; point them to your online shop or order page URL (or keep the order form in contact).
Build a bouquet from the bench (under the stem list) lead to #contact now; point them to your shop's product page or order form URL.
Start the Jar / Start the Mantel / Ask about the Lobby in standing orders lead to #contact now; point them to the sign-up or subscription checkout URL of each order.
Plan an event buttons (first screen and events) lead to #events and #contact now; point them to your event enquiry form or booking URL.
Save a seat in the workshops section lead to #contact now; point them to your workshop booking or ticket URL.
See every arrangement (row link under arrangements) and Instagram in the footer lead to https://www.instagram.com/ now; point them to your Instagram profile or portfolio URL.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
Long words in the width-filling wordmark need the --len value updated, or the line overflows or looks small.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this florist website template

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.