# Free birth center website template
> Free HTML birth center website template for midwife-led units: six rooms, teams, tour form, no libraries. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated November 2026.
Birth center website template: a free one-page site for a midwife-led birth center, with six named birth rooms, twelve midwives in three teams, a pregnancy timeline, five phases of labour and a tour form. Soft serif type sits on tinted tiles. It is one HTML file of about 29 KB gzipped with no libraries, which an AI agent can adapt.
- Page: https://8b.com/templates/linnea-house/
- Live demo: https://8b.com/templates/linnea-house/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/linnea-house/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/birth-center-website-template
- Download ZIP: https://8b.com/templates/linnea-house/birth-center-website-template.zip
- Template name in the repository: Linnea Birth House
- At a glance: One 124 KB index.html with its CSS and JavaScript inside, 13 sections, 24 Unsplash photos credited in CREDITS.md, Host Grotesk and Source Serif 4 from Google Fonts, no JavaScript libraries: CSS scroll-driven animations and a small inline motion script with built-in smooth wheel scrolling, no script loaded from a CDN.
## 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/birth-center-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/birth-center-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/birth-center-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/birth-center-website-template/main/CREDITS.md
```
Then give the agent this prompt:
```text
Read AGENTS.md, then edit index.html. Make it the site for . Replace the name, rooms, teams, medical claims and contacts first, and set --len on the closing wordmark to its length. Keep the gate script in the head, the data-8b-section and data-8b-motion attributes and the six room ids; add no animation library. Never invent clinical facts, prices or contacts; ask me.
```
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/birth-center-website-template my-site`.
### Birth center website design prompt for any AI tool
Paste this into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a birth center or midwife practice site from scratch, or brief a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.
```text
Build a one-page website for . Sections in order: opening, six birth rooms, midwife teams, pregnancy visits, five phases of labour, first six weeks at home, the house, classes, family stories, questions, tour form, footer. Type: Source Serif 4 for headings, pills, quotes and room names; Host Grotesk for body copy, labels and buttons. Colours: #141016 near-black frame, #2c2431 aubergine tiles, #fbf4dc cream text and light tiles, #f3cbd5 pale pink, #ec8667 coral, #c73a22 red accent, #8ea8dd periwinkle. Layout: rounded tiles on a dark frame with one corner radius and one gutter, each room a full-width colour band, names set as serif pills. Do not use a clinical blue palette, stock icon cards, a dark photo overlay or purple gradients. Motion: one idea, the opening board widening into a full-bleed field as you scroll, built with CSS scroll-driven animations and no animation library; with reduced motion or no support, show the finished static layout. Copy: short and warm. Ask me for funding, fees, who can book, pain relief offered, hospital transfer arrangements, class times and phone numbers; never invent medical claims, statistics or contacts, and mark each placeholder. One primary action, Book a visit, in the navigation, the opening and the footer. Mobile: check at 390 px, tap targets of at least 44 px, a full-screen menu with the labour line. Acceptance: no console errors, visible keyboard focus, and a list of every placeholder left.
```
## About
A midwife-led unit is the obvious fit, and a small practice of midwives or doulas can use the same structure. Anyone after a midwife website template or a postpartum doula website template will find the sections they usually need: rooms, team, pregnancy visits, labour phases, six weeks of home care, classes, family stories and tour booking. Many midwifery websites and doula websites bury the practical answers; here cost, hospital transfer and who can give birth there sit in the questions.
With this birth center website template for Claude Code, Cursor or Codex, a vibe coding session starts with facts the agent must ask you for: funding and fees, pain relief offered, transfer arrangements, visit schedule, class times, room features and phone numbers. The demo's medical figures, such as the transfer rate and the time to discharge, are invented: replace them with your own protocols. Add or remove rooms, teams or classes in the same markup pattern, and the scenes count them.
Choose this base when the offer is a house, a small team and a named room per family. For [a clinic with a price list and home visits](https://8b.com/templates/footnote/) another template fits better. This light build has the same look with no animation library and no script from a CDN: 29 KB gzipped in one file, where the GSAP build needs 74 KB and three more requests. The weak spot is the single page: no online booking, and a form that sends nothing.
## Design
- Palette: #141016 (near-black: the page ground that frames the tiles, and the text on light tiles), #2c2431 (aubergine: dark tiles, the second button, the full-screen menu and the nav bar once you scroll, and the Plum room band), #fbf4dc (cream: text on dark tiles, light tiles, the main button and the Milk room band), #f3cbd5 (pale pink: pink tiles, pills, chips and the Blush room band), #ec8667 (coral: the Coral room band and the warm middle of the tick dials), #c73a22 (red: the Ember room band, the end of the tick dials, warm pill text and the second button's hover fill), #8ea8dd (periwinkle: the Cornflower room band, the blurred fields behind the dial and the closing word, and the start of the tick dials), #f5eeb8 (butter: two pills in the opening values tile, the Team Alder pill, the third story tile and one class veil)
- Fonts: Source Serif 4 (headings, pills, quotes, room names, FAQ questions and the wordmark; weights 300 to 600, with one italic word in the headline), Host Grotesk (body copy, labels, buttons and form text, at weights 400 and 500)
A board of rounded tiles on a near-black frame, with one corner radius and one gutter shared everywhere. Intros and copy sit on solid tiles, the six rooms are full-width colour bands, the team is a dark field of name pills, and the pregnancy timeline is a ruled list. Photo tiles carry cream cards. Pills are serif capsules in cream, pink, butter, periwinkle or aubergine. The twelve-column grids fold to one column on phones.
As midwife website design goes, it stays soft: pale pink and butter pills, a tick-mark dial that turns from periwinkle through coral to red as a stage fills, and blurred flower photos behind the headline. Buttons fill from below on hover, and the bar hides as you scroll down.
## Sections and motion
- **Navigation** (navigation): brand mark and name, five section links, a Book a visit button and a Menu button with a full-screen menu
- **Birth that keeps your rhythm** (opening): three tiles with a portrait, the h1 over a drifting flower photo and a values tile, then a second screen with six room swatches, a statement, a visits dial and two photos. Motion: On load the tiles and headline slide in, a flower photo drifts and the pills bob; on scroll a flower field the width of the headline tile widens to full bleed while the side tiles tilt away, and the swatches, photos, statement and visits dial settle in.
- **Six rooms, each named for the light it keeps** (rooms): six coloured bands, one per birth room, that unfold from their title strips as you scroll, then an "In every room" tile. Motion: The bands below the first wait as a stack of title strips, and each unfolds to full height as the band above it reaches the top, its photo easing from larger to normal.
- **Twelve midwives. You get four of them.** (team): a tile with twelve midwives in three teams of four, scattered pills that settle into rows, and a portrait with a quote. Motion: Fifteen pills, three team names and twelve midwives, start scattered and turned and fly into three rows as the field scrolls in, while each team pill turns from cream to its own colour.
- **Your pregnancy with us** (pregnancy): a list of five stages from the first call to 37 weeks, each row rising in with a week pill. Motion: The heading and the five rows rise out of a clip and the week pills pop in as each reaches 90% of the screen.
- **On the day, one rhythm** (rhythm): a pinned card with a dial that names the phase on screen, beside five phases of labour. Motion: A card sticks while the five phases pass, its dial arc fills and the card names the phase near the middle of the screen.
- **The first six weeks, at home** (after): a pinned photo beside a letter of three panels about the first six weeks at home. Motion: The father-and-baby photo sticks and eases from larger to normal while three letter panels swing down flat as they rise.
- **A house, not a ward** (house): title tile, three captioned photos that open from a veil, and a row of five facts. Motion: The three photos settle from a larger, paler image, and the heading, paragraph and five fact pills rise or pop in.
- **Classes and groups** (classes): a held horizontal track of five class photos that come into focus as they reach the middle. Motion: The five class tiles are held on a horizontal track that slides sideways as you scroll, and each photo comes into focus as it reaches the middle.
- **Families who began here** (stories): three family stories on tiles that stack like pages, each shrinking under the next. Motion: The three story cards stick under the header, and each shrinks to 92% and darkens as the next slides over it.
- **Questions we hear at every tour** (faq): seven questions and answers in native details elements
- **Come and see the rooms** (visit): a tour form, phone and address tile, and a closing wordmark over a turning flower photo. Motion: The closing word grows from a hairline weight to full weight while the photo behind it turns level and shrinks.
- **Footer** (footer): brand line, three link columns with the address and phone, and the copyright with the labour line
## Good for
- birth center or midwife-led maternity unit
- doula, antenatal class or postnatal care practice
- private clinic or care home where the team and the rooms are the offer
- any service that sells a calm, tile-based look with named rooms and a small team
## Questions
**Can this serve as a midwife website or a doula website template, and is it free?** Yes to both. The code is MIT licensed, free for your own practice or a client's. A doula can rename the six rooms as ways of working and the teams as doulas. The 24 demo photos keep the Unsplash License and the fonts the Open Font License, credited in CREDITS.md.
**How do I give it to Claude Code, Cursor or Codex?** Download index.html and AGENTS.md, plus LICENSE and CREDITS.md, with the four curl lines in AGENTS.md, then open the folder in the agent and paste the prompt on this page. To start from nothing, paste the birth center website design prompt below. Hand over files, not a link: from a link an agent sees only a summary.
**What must I keep when I edit it?** Keep the gate script in the head, the data-8b-section, data-8b-motion and data-8b-part attributes, the ids and classes the scenes read (AGENTS.md lists them), and the six room ids the swatch links target. The --len number on the closing wordmark must match its character count.
**Does the tour form send anything?** No. It checks the name and email, shows the thank-you line and disables the button, but it sends nothing until you connect Formspree or Netlify Forms; AGENTS.md has both recipes. Without a service, remove the form and its script and keep the phone links. Also reword the line promising a call within a day.
**Does this version need GSAP, Lenis or any other library?** No. Most scroll scenes are CSS scroll-driven animations; a small inline script measures the page, unfolds the room bands and smooths the mouse wheel. In Firefox today, or with reduced motion on, the scenes stay off: rooms become a plain stack, classes a three-and-two grid, and the dials stay full. The opening still plays its load-in in Firefox.
**Can I get a site like this without editing code?** Yes. [8B's AI website builder](https://8b.com/) designs a new site from a sentence, with its own design rather than 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.
## Before publishing
Replace: social preview image, favicon, phone number, contact form (sends nothing yet) and email address, plus the invented demo facts (prices, dates, addresses).
- Book a visit button in the navigation bar and the first screen lead to #visit, the tour form at the end of the page now; point them to your booking page or tour calendar URL if tours are booked elsewhere, or keep it on the form.
- Request a place button in the tour form lead to a script checks the required fields and shows the thank-you line; the form sends nothing and has action="#visit" now; point them to your form endpoint (Formspree, Netlify Forms) or your own handler, and a thank-you line that matches.
- Refer yourself button in the pregnancy section lead to #visit now; point them to your self-referral form or phone line, if it is separate from the tour form.
- Six room links under the opening statement lead to anchors #room-milk, #room-blush, #room-coral, #room-ember, #room-cornflower, #room-plum in the rooms section now; point them to keep them, or rename them with the room ids when you rename the rooms.
- Phone links in the menu, the tour section and the footer lead to tel: links to two placeholder numbers (labour line and weekday office) now; point them to your real labour line and office numbers, in the tel: target and the visible text.
- Where the browser has no scroll-driven animation support (Firefox at the time of writing) or the visitor asks for reduced motion, the scenes do not run: the rooms are a plain stack of six bands, the five classes a 3 + 2 grid, the dials show a full arc and "Five phases", every phase is bright and the stories are plain cards. The content stays readable. In Firefox the opening still plays its load-in and its drifting and bobbing CSS loops; with reduced motion those stop too, while the nav still hides on scroll and the hover fills still run.
- The sticky stages (the rhythm card, the classes track, the stacked stories) are tall by design and need a normal screen height; on very short landscape phones they take more scrolling.
- Some decorative pill text sits on tinted tiles at moderate contrast; check the colours if you change the palette.
- The page carries a smooth wheel module for mouse wheels that eases scrolling on desktop; touch scrolling is left to the browser.
## 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 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).