# Free podiatrist website template

> Free HTML podiatrist website template for foot clinics and health practices, with a price list and home visits. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Podiatrist website template: one free HTML file for a foot clinic that takes bookings and home visits, with a four-step first visit, six condition areas, a gait lab, custom insoles, a seven-row price list and a call-back form. Pale lime and deep green tiles carry a condensed serif. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

- Page: https://8b.com/templates/footnote/
- Live demo: https://8b.com/templates/footnote/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/footnote/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/podiatrist-website-template
- Download ZIP: https://8b.com/templates/footnote/podiatrist-website-template.zip
- Template name in the repository: Footnote Podiatry
- At a glance: One 144 KB index.html with its CSS and JavaScript inside, 13 sections, 23 Unsplash photos credited in CREDITS.md, Asta Sans and Roboto Serif 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/podiatrist-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/podiatrist-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/podiatrist-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/podiatrist-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 clinic: name, town, address, treatments with durations and prices, opening hours, registration body, insurers accepted, podiatrists with specialities, home-visit radius and charge, how people book>. Replace first the clinic name, address, prices, staff, the three patient stories and the 23 photos. Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes, the classes AGENTS.md lists and one condition photo per row in order. Ask me for missing facts; never invent prices, registrations, clinical claims, patient quotes 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/podiatrist-website-template my-site`.

### Podiatrist website design prompt for any AI tool

Use this to build a foot clinic site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It is this template's design written as decisions, the opposite of the sameness of AI-built sites. With the template itself, the short prompt above is enough.

```text
Build a one page website for a podiatry clinic that takes bookings and home visits. The audience is patients worried about foot pain, parents, runners and older people. Sections in order: navigation, opening statement, four step first visit, six condition areas, gait lab, custom insoles, patient stories, team, home visits, price list of seven services with times, questions, call-back form, footer. Type: Roboto Serif condensed for headings and prices, uppercase for section headings, Asta Sans for body text, labels and buttons. Colours: lime #eef68e for tiles, deep green #0e3a1e for text and the frame, light green #b8ec80 for hovers and fills, pale #f2f8e8 for the main tiles, bright green #23c45f for button labels, mid green #157a3d for step numbers and the home visit section. Motion has one idea, photos that assemble: the gait lab runner photo is cut into strips that slide together as you scroll, condition photos open as circles. Respect prefers-reduced-motion. Layout: rounded 12px tiles separated by 4px gaps inside one green frame, round photo discs, no clinical blue, no stock icon cards, no centred hero with two buttons. Copy is plain medical explanation, short and concrete. Ask me for the clinic name, address, hours, registration body, prices, times, staff and insurers; never invent them, clinical claims or patient quotes, and leave marked placeholders. One primary action, request a call back, repeated in the opening and after the prices. Check at 390 px width, keep tap targets at least 44 px. Acceptance: no console errors, visible keyboard focus, every placeholder listed.
```

## About

Podiatrist websites usually answer the same worries in the same order: what happens at the first visit, which problems get treated, what it costs and whether someone can come to the house. This page follows that order. A physiotherapy, chiropractic or osteopathy practice can reuse it, and so can any small clinic with a price list. For podiatry website design, the prices are a plain list of seven services with their times.

As a podiatrist website template for Claude Code and Cursor, it goes fastest when you vibe code it and the agent gets the facts only the clinic has: name, address, hours, registration body, prices and times, staff, insurers and the home-visit radius. The demo invents all of them, along with three patient quotes. The agent should replace the clinic name in the logo, the phone menu, the footer wordmark, the copyright line and the title tags, then swap the photos. Real patient stories need written consent.

This podiatrist website template is the right base for a clinic that wants a calm, rounded look and plain medical explanations on one scroll. A counter-based business such as a [pharmacy](https://8b.com/templates/hale/) fits a different page shape. The weak spot is booking: every booking button jumps to a call-back form that sends nothing until it is connected, and no calendar shows free slots. No code? 8B's builder designs a site from a sentence.

## Design

- Palette: #eef68e (lime tiles (trust notes, first visit, condition rows, insole intro, price note, contact details, footer), the phone menu sheet and the focus colour inside form fields, and the text of the home visit section), #0e3a1e (text everywhere outside the home visit section, the frame and 4px gaps between tiles, button rims, borders, price row rules and the FAQ plus marks), #b8ec80 (light green tiles (conditions stage, team and FAQ headings), hover fill on buttons, the wash across each first-visit card, photo-disc fills, the top of the page background and the rings on the home visit section), #f2f8e8 (pale tiles (opening, price list, stories, team cards, FAQ rows, form), the navigation bar, form fields and the lower page background), #23c45f (the fill of the label pill in the main buttons and the arrow on their dark caps), #157a3d (step numerals, the Day labels in the insole stages and the background of the home visit section)
- Fonts: Roboto Serif (headings, the opening statement, prices and card titles at weight 400, condensed to 62% width; uppercase for section headings, italic for the logo and footer wordmark), Asta Sans (body text at 400, small labels at 500, buttons and form labels at 600)

Every section is a set of rounded 12px tiles separated by 4px gaps of deep green, all inside one green frame, so the page reads like a tiled board. Tiles alternate pale, lime and light green. Most sections split 4/8, 5/7 or 7/5. Photos are round discs in the opening, first visit, stories and home visit, and masked portraits in the team. Section headings are uppercase condensed serif; the opening statement is sentence case.

The greens are split by job: bright green for button labels and arrows, mid green for step numerals, Day labels and the home visit section, light green hovers. Five condition photos open from a stage's left edge, and the gait lab runner photo [slides together in nine strips](https://8b.com/templates/animated/).

## Sections and motion

- **Navigation** (navigation): wordmark, six links and a booking button; a round menu button and full-screen sheet on small screens
- **Since 2011, three podiatrists in Nottingham have looked after more than 11,000 pairs of feet: toddlers’ first shoes, marathon training blocks, ninety-year-old gardeners and everyone in between.** (opening): one screen: a long statement as the h1 with two actions and two round photo discs in a pale cell, and three lime trust notes under it. Motion: On load the statement and buttons rise into place, and the two round photos pop in while a green fill shrinks away from each; this is CSS, not GSAP.
- **Your first visit, step by step** (process): your first visit as four numbered cards in a green frame beside a photo, each card washed by a green fill in turn. Motion: Scroll-driven: a green wash sweeps across each of the four step cards in turn, its numeral nudges right, and the round photos shrink and bounce back.
- **Where does it hurt?** (conditions): six body regions from toes to skin as a list, beside a held green cell whose photo changes for each region. Motion: A light green stage stays in view while the six rows scroll; each new row opens its photo as a circle growing from the left edge.
- **We watch you walk** (gait-lab): a held stage with a runner photo cut into strips that slide into one frame, then four gait observations in a row. Motion: Pinned for a little over one screen on a desktop: the runner photo is cut into nine strips (seven on phones) that slide into one picture as you scroll.
- **Insoles made from your own feet** (orthotics): insole offer with a button, then four stages from scan to fit on a grid. Motion: The four stage cards slide in from alternating sides with a small tilt as each reaches the lower part of the screen.
- **Back on their feet** (stories): three patient stories with round portraits, each quote filling from faint to full ink word by word. Motion: Each quote fills from faint to full ink word by word while you scroll, and each round portrait shrinks slightly and springs back once on arrival.
- **Three podiatrists, one standard** (team): a green heading cell and three podiatrist cards with portraits, specialities and an ask-about line. Motion: The three podiatrist cards slide in from alternating sides as they arrive.
- **We come to you** (home-visits): home visit offer on the left, a round portrait with three growing rings on the right. Motion: Scroll-driven: the round portrait turns upright and grows while three rings scale up and fade in around it.
- **Prices, plainly** (prices): lime note cell and a pale list of seven services with duration and price. Motion: Each of the seven rows slides in from alternating sides once.
- **Questions we hear at the door** (faq): six questions and answers (native <details>) with a green heading cell and the front desk phone. Motion: The six question rows start piled toward the first and deal down into the list as it scrolls into view; opening one turns its plus into a minus.
- **Book an assessment** (contact): call-back form with eight topics and a lime cell with the clinic address, contacts and opening hours. Motion: The three detail blocks slide in from alternating sides on arrival.
- **Clinic** (footer): lime footer: wordmark with a line, two link columns, the address and phone, and the legal line. Motion: The three link columns slide in from alternating sides when the footer reaches the lower part of the screen.

## Good for

- podiatry or chiropody clinic
- physiotherapy, osteopathy or chiropractic practice
- dentist, optician or other small clinic with a price list and home visits
- any practice that wants a calm, rounded, green look with plain medical explanations

## Questions

**Can I use this podiatrist website for a client clinic?** Yes. It is a single index.html under the MIT license, so a freelancer can build a clinic site from it at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, the 23 photos come from Unsplash and both fonts from Google Fonts; CREDITS.md lists them.

**Does the call-back form send anything?** No. The script needs a name and a phone number, shows a thank-you line and clears the fields; nothing leaves the page. Connect Formspree or Netlify Forms with the steps in AGENTS.md. The form has a free-text box, so add a privacy notice and tell patients not to write sensitive details.

**How do I give the template to Claude Code, Cursor or Codex?** Download index.html and AGENTS.md into an empty folder with the curl lines in AGENTS.md, then tell the agent to read AGENTS.md first. Give it the files, not the page address. To build from scratch in Lovable, v0 or Bolt, use the podiatrist website design prompt below. Base44 can rebuild the look [from the demo's address](https://8b.com/templates/for-base44/).

**What must I keep when I change the text and photos?** Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes, the classes AGENTS.md lists and one condition photo per row in order. The first-visit cards, gait notes and insole stages sit in grids built for four each. Keep the header comment, the 8B meta tag and the Design: 8B footer link unless the site owner asks to remove it.

**Can I get a clinic site like this without editing code?** Yes: use [8B's AI website builder](https://8b.com/). You describe the site in a sentence and it designs a new one, 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.

**Can a physiotherapist or a clinic outside the UK use it?** Yes, after a text pass. The demo is British: pounds, HCPC, the Royal College of Podiatry, GP referrals and a Nottingham address. The condition list, gait lab and insole stages describe feet, so a physio rewrites them. Podiatry websites for other countries swap the registration body, insurers and currency.

## 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 top bar, Book an assessment buttons (opening, first visit), Arrange a home visit button lead to #contact, the call-back form now; point them to your online booking page (Cliniko, Jane, Calendly) if you book there, or keep #contact once the form is connected.
- Phone links in the questions, contact and footer sections lead to a tel: link to the demo number now; point them to your front desk number as tel:+44....
- Email link in the contact section lead to a mailto: link to the demo address now; point them to your clinic email.
- Request a call back button in the contact form lead to submits the form to nothing; a script shows a thank-you line and resets the fields now; point them to a form service (Formspree, Netlify Forms) or your booking system.
- Insole prices, See the prices and Can I claim on insurance? links lead to #prices and #faq now; point them to keep them.
- GSAP, ScrollTrigger and Lenis load from jsDelivr at the end of the body; if the CDN is blocked the page stays static, with the nav, menu, FAQ and form scripts still working.
- The call-back form sends nothing: the button only shows the thank-you line, so connect a form service or your booking system before publishing.
- The stylesheet still carries rules for a removed opening (op-screen, op-intro, op-photo) that no markup uses; they can be deleted.

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