# Free daycare website template

> Free HTML daycare website template for nurseries and childminders, with rooms, fees and a booking form. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Daycare website template: one free HTML file for a day nursery, preschool or childminder, with four rooms by age, a settling-in plan, a weekly lunch menu, fees with funded hours and an open-morning booking form. Photos and price cards roll and squash on pink, yellow and lilac slabs. AGENTS.md lets Claude Code, Cursor or Codex adapt it.

- Page: https://8b.com/templates/mallow-house/
- Live demo: https://8b.com/templates/mallow-house/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/mallow-house/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/daycare-website-template
- Download ZIP: https://8b.com/templates/mallow-house/daycare-website-template.zip
- Template name in the repository: Mallow House
- At a glance: One 89 KB index.html with its CSS and JavaScript inside, 10 sections, 21 Unsplash photos credited in CREDITS.md, Gabarito and Google Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); 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/daycare-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/daycare-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/daycare-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/daycare-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 nursery: name, address, ages taken, rooms with ratios, fees and funded hours, opening hours, garden, settling plan, menu, open-morning dates, legal name>. Replace first the name, rooms, fees, menu, staff and the footer registration line. Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists, and set the wordmark --len to the new name's length. Ask me for missing facts; never invent ratios, prices, funding rules, hours, staff, inspections 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/daycare-website-template my-site`.

## About

Nurseries, preschools, playgroups and childminders who look for a daycare website, or websites for daycares, usually need the same answers on one page: which ages, what a day costs, what the children eat and how to book a visit. Owners wanting a website for childcare or a free preschool website template get all four in order here. A forest school, art class or after-school club can cut the rooms down to its own groups.

Vibe coding with Claude Code, Cursor or Codex goes fastest when you hand the agent the facts only the setting has: ages taken, rooms and ratios, fees, funded hours, opening times, the menu week, open-morning dates and the registered name. The demo invents all of them, including the staff names, the Ofsted registration line in the footer and the funding rules. Ratios and funding differ by country, so the agent should ask rather than guess.

Choose this base when one friendly page should show rooms, fees and a route to book a visit. For daycare web design where families book sessions and parties, the [indoor play venue](https://8b.com/templates/hopla/) template fits better, and a group with several sites or a parent login needs more than one page. The no-code route is the 8B builder. One weak spot: the scroll effects move many rounded photos at once, which can feel heavy on weak phones.

## Design

- Palette: #F6EADA (page ground), #FDF8F1 (cards: settling steps, question items, lunch days and fee plans, form fields and date pills, the floating nav bar, the round icon buttons and the menu links), #4A2A1F (text, focus outlines and the favicon ground), #E2588B (second dot of the logo mark and the low wash under the text links that fills on hover), #AE9AEA (lilac: the Buds room ground, the fee tray, the full-screen menu, the footer ground, the first logo dot, the plus discs in the questions, the settling step fill and the nav link pill on hover and for the section in view), #7A5BD0 (violet: the main buttons and the chosen Saturday pill), #BFE6B0 (mint: the Blooms room ground, the garden slab, the booking form, the six craft photo labels and the nut-free badge), #3E9A55 (declared in :root but used by no rule in the shipped page; free for a new accent), #F6D167 (butter yellow: the Meadow room ground, the lunch slab, the small badges and the fourth logo dot), #F8C8D9 (pale pink: the Shoots room ground, the making-table slab and the settling stage), #FFFFFF (text on violet and pink buttons, the arrow discs, the rings round the bowls and portraits, and the highlight in the inner shadows), #C93A72 (deep pink: the Book a visit button in the nav bar and in the menu), #7B5C4F (softer brown for the dish lines, the price units and the contact facts), #A6D996 (light green, used only for the third dot of the logo mark)
- Fonts: Gabarito (headings at weight 800, room and card titles and the nav wordmark at 700-800), Google Sans (body text, buttons, labels, badges and form fields, at 400 to 700)

A single column of coloured slabs on a cream ground. The first screen holds the heading and four room columns of rising height (76, 84, 92 and 100 percent), each its own colour, with photo, age badge and ratio inside. Below come a six-photo craft grid, a garden slab with two photos, a four-step settling list beside a portrait stage, five lunch cards, the parents' questions, three fee cards on a lilac tray, and a booking form beside the contacts.

Everything is rounded: pill buttons, 48 px slabs and 32 px cards, round bowl photos and portraits, with soft inner shadows that make the slabs look pressed from dough. In daycare website design this keeps the heavy Gabarito headings friendly. The nav bar floats after 40 px of scrolling.

## Sections and motion

- **Navigation** (navigation): top bar with the brand, four links, a Book a visit button and a menu button; full-screen menu. Motion: The bar hides when you scroll down and returns when you scroll up, floats after 40 px, and the round icon buttons squash on hover.
- **Four rooms, growing up together** (rooms): the h1, a booking button and four rooms by age as columns of rising height. Motion: On load the heading block rises and the four coloured grounds grow from small, with each room's contents following 0.16 s apart.
- **The making table** (making): a slab with the making table text and six craft photos that roll out like dough. Motion: Six photos start piled in the middle of the table, turned and shrunk, and roll out to their grid places as you scroll.
- **Out in all weathers** (garden): two garden photos and a slab listing what is in the garden. Motion: The slab swells out from its lower left corner, and the small wellies photo and the badges squash down as they arrive.
- **Settling in, one step at a time** (settling): four settling-in steps beside a portrait stage where the parent moves away and the key person comes close. Motion: As the four steps scroll past, the parent's portrait steps away and shrinks while the key person's comes beside the child, the dashed lines follow them and a lilac fill sweeps across the active step.
- **Cooked here, this morning** (kitchen): the week's lunch menu: five bowls that roll onto a butter-yellow slab. Motion: Each day's round bowl photo rolls in from the left edge of the slab, turning as it travels and squashing as it stops on its day.
- **Questions parents ask** (faq): six parents' questions in native <details>. Motion: Each question squashes in as it arrives, and its plus turns to a cross when it opens.
- **Fees and funded hours** (fees): three day patterns as price cards on a lilac tray, with a funded-hours note. Motion: The three cards start stacked as one small lump on a shrunken tray; the tray stretches and the cards slide apart and press down.
- **Come to an open morning** (visit): open-morning text, a playroom photo, address and contacts beside a booking form. Motion: The photo and the form squash in as they arrive.
- **Mallow House** (footer): wordmark, four columns and the copyright with the Design: 8B credit. Motion: The wordmark squashes in as it arrives.

## Good for

- day nursery or preschool
- childminder, playgroup or after-school club
- kids' activity studio, art class or forest school
- any friendly local service that wants soft colours and playful motion

## Questions

**Is this one of the free daycare website templates I can use for a client?** Yes. It is one index.html under the MIT license, so a freelancer can build a nursery or preschool site with it at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, and the 21 Unsplash photos and two fonts are credited in CREDITS.md.

**How do I hand it to Claude Code, Cursor or Codex?** Put index.html and AGENTS.md in an empty folder using the curl lines at the start of AGENTS.md, then tell the agent to read AGENTS.md before it edits. Give it the files, not the page address, which returns only a summary. Paste the prompt from this page, filled in with your setting's facts.

**Does the open-morning booking form send anything?** No. As shipped, it checks the fields, shows a thank-you line and clears itself, but sends nothing. Point it at Formspree or Netlify Forms, or at your booking system, before you publish. The three Saturday choices are fixed radio buttons, so edit their dates too.

**What must I keep when I change the text?** Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes, the garden's data-swell-origin and the classes AGENTS.md lists. The settling animation is written for four steps, and the footer wordmark needs --len set to the new name's length. Keep the header comment and the 8B meta tag. Keep the Design: 8B footer link unless the site owner asks to remove it.

**Can I get a daycare site like this without editing code?** Yes, with a different tool: [8B's AI website builder](https://8b.com/) designs a new site from a sentence, 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.

**What happens with reduced motion or without JavaScript?** With reduced motion on, the entrance animations, the scroll animations and smooth scrolling are off and the page reads in full, though the nav bar still hides as you scroll down. Without JavaScript the menu button cannot open its overlay and the form posts to the page itself, sending nothing and showing no thank-you line; the parents' questions still open.

## Before publishing

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

- Book a visit buttons in the top bar, the menu and the rooms intro lead to #visit now; point them to your booking page, or keep them pointing to the open-morning form.
- Fees and funded hours link in the rooms intro and the Ask about your hours button in the fees section lead to #fees and #visit now; point them to keep them, or point the button at your enquiry page.
- Book my place button in the visit form lead to nothing is sent: the form has action="#visit" and a script shows the thank-you line now; point them to your form endpoint (Formspree, Netlify Forms) or your booking system.
- gsap, ScrollTrigger and Lenis load from jsDelivr at the end of body; if the CDN fails, the page stays static and readable but page-init logs an error.
- With reduced motion the scroll scenes and Lenis are off, but the bar still hides on scroll down.
- The open-morning dates, the menu week and the funded-hours rules are for one place and one year and will read as out of date if left.
- The squash and roll scenes move many rounded photos at once, which can feel heavy on weak phones.

## 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).