Free birth center website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: linnea-house.md, data: linnea-house.json

Birth center website template: first screen on a phone

About this birth center website template

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.

At a glance, November 2026. 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.

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

Good for:

Birth center or midwife-led maternity unitDoula, antenatal class or postnatal care practicePrivate clinic or care home where the team and the rooms are the offerAny service that sells a calm, tile-based look with named rooms and a small team

Turn the birth center website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make it the site for <my birth center or midwife practice: town, funding and fees, who can book and from when, rooms, teams, visit schedule, classes with times, hospital transfer arrangements, phone numbers>. 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.

In a terminal

npx degit 8bsite/birth-center-website-template my-site

GSAP build

Prefer GSAP? The same design built with GSAP, ScrollTrigger and Lenis smooth scroll, loaded from jsDelivr, is in the repository as index.gsap.html: 74 KB of code to download gzipped against 29 KB for this one, and the scroll motion also plays in Firefox.

curl -LO https://raw.githubusercontent.com/8bsite/birth-center-website-template/main/index.gsap.html

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.

Build a one-page website for <my birth center or midwife practice: town, who it serves, rooms, team, funding>. 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.

Birth center website design and motion

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.

Every value of this birth center website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the birth center website page

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
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
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
Six coloured bands, one per birth room, that unfold from their title strips as you scroll, then an "In every room" tile
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.
A tile with twelve midwives in three teams of four, scattered pills that settle into rows, and a portrait with a quote
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
A list of five stages from the first call to 37 weeks, each row rising in with a week pill
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
A pinned card with a dial that names the phase on screen, beside five phases of labour
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
A pinned photo beside a letter of three panels about the first six weeks at home
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
Title tile, three captioned photos that open from a veil, and a row of five facts
The three photos settle from a larger, paler image, and the heading, paragraph and five fact pills rise or pop in.
Classes and groups
A held horizontal track of five class photos that come into focus as they reach the middle
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
Three family stories on tiles that stack like pages, each shrinking under the next
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
Seven questions and answers in native details elements
Come and see the rooms
A tour form, phone and address tile, and a closing wordmark over a turning flower photo
The closing word grows from a hairline weight to full weight while the photo behind it turns level and shrinks.
Footer
Brand line, three link columns with the address and phone, and the copyright with the labour line

Before you publish the birth center website site

Replace social preview image, favicon, phone number, contact form (sends nothing yet) and email address and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this birth center website template

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

Not a birth center website? More free templates