# Free farm delivery website template

> Free HTML farm delivery website template for veg box schemes and local producers, with a box builder. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Farm delivery website template: one free HTML file for an organic veg box scheme or farm that delivers by postcode, with this week's box, the growers, a one-day delivery timeline, six promises, a box builder with a live price, recipes and a postcode check. Lime green, near-black and white. AGENTS.md is included for Claude Code, Cursor and Codex.

- Page: https://8b.com/templates/furrow/
- Live demo: https://8b.com/templates/furrow/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/furrow/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/farm-delivery-website-template
- Download ZIP: https://8b.com/templates/furrow/farm-delivery-website-template.zip
- Template name in the repository: Furrow
- At a glance: One 86 KB index.html with its CSS and JavaScript inside, 12 sections, 23 Unsplash photos credited in CREDITS.md, Host Grotesk from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.4 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/farm-delivery-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/farm-delivery-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/farm-delivery-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/farm-delivery-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my box scheme: what I sell, farms or growers, box sizes and prices, extras, delivery areas with postcode prefixes and days, returns policy, certifier and licence numbers, contacts>. Replace the vegetables, growers, prices and area rows first. Keep the section ids, the classes AGENTS.md lists, the data-price, data-fit, data-label, data-prefix and data-day attributes with your values, and match the footer --len to the new name. Ask me for missing facts; never invent prices, certification, delivery days 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/farm-delivery-website-template my-site`.

### Farm delivery website design prompt for any AI tool

Use this to build a farm delivery site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design as decisions. With the template itself, the short prompt above is enough.

```text
Build a one-page website for a farm that delivers organic veg boxes by postcode, for customers who order a recurring box and need to know whether you reach them. Sections in order: navigation, opening statement with a card holding the main action, this week's box as rows of vegetables with their farm, the growers as stacked cards, one delivery day as five steps, returns, six promises, a box builder with size, frequency, extras and a live total, recipes, questions, contact with a postcode check, footer. Type: Host Grotesk only, regular-weight headings with tight negative tracking, medium card titles, semibold buttons. Colours: #c9e36b lime for the bar, whole sections and action cards, #131512 near-black for text and dark panels, #ffffff for cards, #5c6257 for secondary text, #c4c7be for small text on dark. Layout: full-width blocks that change ground one after another, square-cornered cards, rows split by thin rules, pills only on buttons and fields. No gradients, no three icon cards, no centred hero with two buttons. Motion: one idea, the page reveals its subject in order and each reveal follows scroll; switch every animation off for prefers-reduced-motion. Copy: short and concrete, from the farm's real facts. Ask me for box sizes, prices, growers, delivery areas and days, certifier and phone; never invent them, leave visible placeholders. One primary action, order a box, repeated in the bar, opening, builder and contact. Mobile: check at 390 px, stack columns, tap targets of at least 44 px. Acceptance: no console errors, keyboard focus visible, list every placeholder.
```

## About

A farm delivery site has to answer four things before anyone orders: what is in the box, who grew it, when it arrives and what it costs. This farming website template answers them in that order, then adds recipes and a postcode check. As an organic farm website template it suits a veg box scheme, a market garden or a CSA, and a bakery, dairy or flower grower that delivers by postcode can swap the vegetables for its own products.

Vibe coding this farm delivery website template for Claude Code or Cursor goes fastest when the agent gets the facts only the farm has: growers and farms, box sizes and prices, extras, delivery areas and days, certifier and licence numbers, crate policy, phone hours. Replace the seven vegetables, four growers and six area rows first. Keep the section ids and the classes AGENTS.md lists, and set the footer wordmark's --len to the new name's letter count. The [terminal steps with Claude Code](https://8b.com/templates/for-claude-code/) cover this in more detail.

As a farm shop website template it is right when customers order a recurring box and need to know whether you reach them. A florist or flower grower that sells by the stem fits the [florist](https://8b.com/templates/moth-marigold/) template better. A shop with hundreds of products, a basket and card payment needs more than one scroll: the box builder adds up a price but takes no payment. The day section is also long on a phone.

## Design

- Palette: #c9e36b (nav bar and menu overlay, growers and promises grounds, the lime cards (opening, box builder, contact), the footer button and wordmark, the star on near-black buttons), #131512 (text, rules, the near-black buttons, grower and returns panels, recipes and footer grounds, selected choices, the last colour of the day section), #ffffff (box, boxes and questions grounds, the day and recipe cards, the promises asterisk, text on near-black), #c4c7be (secondary text and rules on dark grounds, footer headings and small print, the returns and footer dot grids), #5c6257 (secondary text on white: leads, farm lines in the box rows, notes, times, recipe meta, answers, the field placeholder)
- Fonts: Host Grotesk (the only typeface: regular-weight headings with tight tracking, medium card titles and links, semibold buttons, a bold nav logo and footer wordmark)

Full-width colour blocks follow one another: a photo ground, white, lime, a pale lime tint, near-black, lime, white, near-black, white, then a photo under a lime card. Most headings sit in a two-column head beside a short lead. Lists are square-cornered rows or cards; box rows are split by 1px near-black rules. The only curves are the pills, the round menu buttons and the dot grids; the six-armed asterisk returns as a three-bar star on buttons and questions.

The farm website color palette is one soft lime against near-black and white, with square cards beside pill buttons and fields. Each pill button's three-bar star turns 60 degrees on hover. Photos do the rustic work, and a list tipped back [swings flat as it scrolls in](https://8b.com/templates/animated/).

## Sections and motion

- **Navigation** (navigation): wordmark, six links and a Start a box button; a menu icon opens a full-screen overlay with seven links and the button. Motion: The bar hides when you scroll down past 80 px and returns on scroll up, also with reduced motion on.
- **Every box starts as a row in somebody's field.** (opening): one statement as the h1 over a full-screen field photo, with a short paragraph, a button and a link on a card. Motion: On load the heading and the lime card rise into place and the photo settles from a slight zoom; nothing here is tied to scroll.
- **In the box this week** (box): this week's seven vegetables as a table of rows with farm, cut day and a small photo, laid out like a field that swings up to face the reader. Motion: The list starts tipped back 60 degrees (48 on phones) and swings flat as it scrolls in, while each photo opens upward from its slot.
- **Twenty-seven growers. Four of them filled this box.** (growers): four grower cards that stack like crates: each holds under the header while the next slides over it. Motion: Each card sticks 84 px below the top of the screen while the next slides over it; the covered card shrinks, moves up and darkens.
- **One day, from the row to your door** (day): one delivery day as five steps that travel sideways while the section is pinned; the ground runs from pale dawn through lime to near-black dusk. Motion: Pinned: the five steps travel sideways while the section background runs from a pale lime tint through lime to near-black.
- **The box comes back.** (returns): a crate photo beside a panel about returnable crates, with a grid of dots that fills as it scrolls. Motion: The dot grid fills column by column as it crosses the screen, and the heading rises line by line.
- **The asterisk is the promise, not the small print.** (promises): six promises read one at a time while a six-armed asterisk assembles and turns. Motion: The asterisk turns 120 degrees over the list and each arm grows as its promise nears the middle, while the promise being read is full strength and the rest are dimmed.
- **Choose a box. Change it any week.** (boxes): a box builder: size, frequency and extras with a live price. Motion: The heading rises on arrival; the total and the label under it change as you pick a size, a frequency or extras.
- **Cook the box** (recipes): four recipe cards that arrive as a fanned stack and are dealt into the grid. Motion: The four cards start fanned in one stack, centred over the first row, and are dealt out to their places as it scrolls in.
- **Questions, answered plainly** (faq): six questions and answers (native <details>) with an email link. Motion: A rule draws across above each question, and the star turns 60 degrees when one opens.
- **Do our vans come down your lane?** (contact): a barn photo behind a card that asks for a postcode, lists six delivery areas and gives contacts. Motion: The lime sheet starts as the whole section and contracts into the card, uncovering the barn photo, which settles from a zoom.
- **On this page** (footer): dot row, call to action, page links, contacts, a furrow rule, the wordmark across the width and small print. Motion: The dot row fills from left to right and the rule above the wordmark draws across.

## Good for

- organic veg box or fruit and veg delivery
- farm shop, market gardener or CSA with weekly boxes
- local food producer that delivers by postcode (bakery, dairy, meat, flowers)
- any subscription brand that wants a bright, friendly look with a builder form

## Questions

**Is this a farmer website template I can use for a farm shop or a client?** Yes. It is one index.html under the MIT licence, free for your own farm or a client's, with no build step. A veg box scheme, a farm shop with weekly boxes, a CSA or a producer of bread, dairy, meat or flowers fits once the vegetables, growers and prices are replaced. Photos are Unsplash images listed in CREDITS.md.

**Does the box builder or the postcode check take real orders?** No. The builder adds the size and ticked extras into a total, and the Check button reads the leading letters of a postcode against six area rows, then shows a delivery day or a no. Neither sends anything. Connect them to your checkout or Formspree, and edit each row's data-prefix and data-day. Numeric ZIP codes need a rewrite.

**Where is the farm delivery website design prompt, and how do I use it?** Below the short prompt sits a longer farm delivery website design prompt for any AI tool. With the template, put index.html and AGENTS.md in an empty folder with the curl lines in AGENTS.md, and have the agent read it first. Give it the files, not the page address. Bolt opens the repository from [the veg box card on its page](https://8b.com/templates/for-bolt/).

**What breaks if I change the text and prices?** Keep the section ids, the data-8b-section and data-8b-motion attributes and the classes AGENTS.md lists. A new size or extra needs data-price, data-fit or data-label, the promises must match the six asterisk arms, and the wordmark needs a --len equal to the name's letter count. Keep the Design: 8B footer link unless the site owner asks to remove it.

**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 its engine designs a new site, its own design and not this template. Designing and restyling are free; hosting with 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.

**What happens on a phone, with reduced motion or with scripts off?** On a phone the lists stack and the day section scrolls sideways for about 1,500 px. With reduced motion on, entrance and scroll animations and smooth scrolling are off and the page reads in full; the bar still hides on scroll. Without JavaScript the menu cannot open, the total stays at £23.00 and the postcode check answers nothing.

## Before publishing

Replace: social preview image, favicon, contact form (sends nothing yet), email address and phone number, plus the invented demo facts (prices, dates, addresses).

- Start a box button in the top bar, the menu and the footer lead to #boxes (the box builder) now; point them to your sign-up or checkout URL.
- Build your box button in the opening lead to #boxes now; point them to your sign-up or checkout URL, or keep it on the builder.
- Check my postcode button under the box builder lead to #contact (the postcode check) now; point them to your checkout with the chosen size and extras, or keep it on the postcode check.
- How returns work link in the returns section lead to #faq now; point them to your returns page, or keep it on the FAQ.
- The postcode check (Check button and the six area rows) lead to a script that reads the first letters of the postcode against six areas and shows a day or a no now; point them to your own delivery areas and days (change each row's data-prefix and data-day), or a call to your delivery-area service.
- The postcode check and the box builder are demo scripts and send nothing; connect them to your own checkout and delivery data.
- The top bar hides while you scroll down and returns on scroll up, also with reduced motion on.
- The day section holds the screen for as far as the track overflows the screen width, which feels long on a phone.
- gsap, ScrollTrigger, SplitText and Lenis load from jsDelivr at the end of body; if the CDN fails, the page still reads in full but without motion or smooth scrolling.

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 121+ (it uses color-mix(), :has(), cascade layers, small/dynamic viewport units).