Free podiatrist 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: footnote.md, data: footnote.json

Podiatrist website template: first screen on a phone

About this podiatrist website template

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.

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

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

Good for:

Podiatry or chiropody clinicPhysiotherapy, osteopathy or chiropractic practiceDentist, optician or other small clinic with a price list and home visitsAny practice that wants a calm, rounded, green look with plain medical explanations

Turn the podiatrist 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/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

Prompt for the agent:

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.

In a terminal

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.

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.

Podiatrist website design and motion

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.

Every value of this podiatrist 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 podiatrist website page

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.
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
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
Your first visit as four numbered cards in a green frame beside a photo, each card washed by a green fill in turn
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?
Six body regions from toes to skin as a list, beside a held green cell whose photo changes for each region
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
A held stage with a runner photo cut into strips that slide into one frame, then four gait observations in a row
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
Insole offer with a button, then four stages from scan to fit on a grid
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
Three patient stories with round portraits, each quote filling from faint to full ink word by word
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
A green heading cell and three podiatrist cards with portraits, specialities and an ask-about line
The three podiatrist cards slide in from alternating sides as they arrive.
We come to you
Home visit offer on the left, a round portrait with three growing rings on the right
Scroll-driven: the round portrait turns upright and grows while three rings scale up and fade in around it.
Prices, plainly
Lime note cell and a pale list of seven services with duration and price
Each of the seven rows slides in from alternating sides once.
Questions we hear at the door
Six questions and answers (native <details>) with a green heading cell and the front desk phone
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
Call-back form with eight topics and a lime cell with the clinic address, contacts and opening hours
The three detail blocks slide in from alternating sides on arrival.
Clinic
Lime footer: wordmark with a line, two link columns, the address and phone, and the legal line
The three link columns slide in from alternating sides when the footer reaches the lower part of the screen.

Before you publish the podiatrist 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 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.

Questions about this podiatrist website template

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.

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

Not a podiatrist website? More free templates