Free veterinary website template

Live demo GitHub Download ZIP Use this template

Repository: github.com/8bsite/veterinary-website-template · Live demo: 8bsite.github.io/veterinary-website-template/ · MIT license

Burrow template: first screen on a phone

About this template

Burrow is a veterinary website template for a neighbourhood clinic that treats dogs, cats, rabbits, birds and reptiles. Services, vets, prices, recent patients and a visit request form all sit on one page. It also suits a vet clinic attached to an animal hospital, an exotic-pet practice or a groomer.

A one-page site for a neighbourhood vet clinic that sees dogs, cats, rabbits, birds and reptiles, with services, vets, prices, recent patients and a visit request form. Warm cream and dark brown with six muted accent colours; a set of flat shapes (arch, circle, diamond, plus) does the moving: the small coral arch grows into a doorway on the first scroll, colour panels are dealt out like cards and the patient cards roll past like a wheel.

Good for:

Veterinary clinic or animal hospitalExotic-pet or specialist vet practicePet groomer, boarding or other pet-care businessAny small local clinic with a team, services and a price list

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation.

How to use the veterinary website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/veterinary-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/veterinary-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/veterinary-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/veterinary-website-template/main/CREDITS.md

Then give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for a veterinary clinic site for <your practice: name, town and address, which animals you see, services and prices, vets and nurses, opening hours, how to book>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, staff, patient stories, prices, hours, links and contacts, and recolour it through the CSS variables if needed.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/veterinary-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Veterinary website design and motion

Palette

#f7efe2 cream page background#1f0b08 dark brown text and prices band#ebe2d3 darker cream panels and cards#f26b45 coral buttons, arches and contact panel#63a4bc blue dogs panel and shapes#dcb155 mustard round cats panel#96503f rust small mammals panel#3dac91 green birds and reptiles panel#e2a8d3 pink accent shapes

Fonts

Google Sans: all text: large medium-weight headings with tight letter spacing, regular body copy

A cream page with centred headings and flat shapes (arch, circle, square, quarter-circle, diamond, plus) used as bullets, step markers and photo masks. Every photo has its own cut: arch-topped doors, circles, one huge rounded corner. Coral arches frame the visit steps and the contact panel, and buttons have rounded tops.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

Navigation
Top bar: arch logo and wordmark, section links, Book a visit button; phone menu overlay
Calm, thorough, kind. Vet care for every animal.
First screen: headline, two buttons, wide photo and floating shapes; second screen: four numbered steps of a visit on a coral arch
Smooth scrolling throughout; headings rise line by line. On scroll, the small coral arch near the headline grows into the doorway behind the visit steps as the other shapes fly outward.
Two doors. Cats never wait with dogs.
Two arch-cut photos either side of the copy (demo: separate cat and dog sides of the clinic)
Tied to scroll, the cat and dog photos slide out from the centre to either side as their narrow arch masks widen.
Small, scaly, feathered or furry.
Four overlapping colour panels, one per group (demo: animals the clinic treats)
The four colour panels start stacked and tilted in the middle and are dealt out into an overlapping row as you scroll; small shapes drift past.
What we do here.
List of six services, each row with a photo, text and a short note
Tied to scroll, each row's photo opens from a small pill to a full frame and its rule grows in the row's colour.
Who you’ll meet in the room.
Four people with portraits, role and one line (demo: vets and head nurse)
As the team scrolls into view, each portrait opens from a circle, arch, square or diamond into its full frame.
This month at Burrow.
Pinned horizontal row of seven cards (demo: patients of the month, name, breed, age, why they came)
The section pins while seven patient cards slide sideways; cards away from the centre drop and tilt, so the row curves like a wheel.
Prices you see before we start.
Dark band: price list (service, what is included, price) and a note on estimates
On Lombard Street since 2014.
Sticky building photo beside three dated paragraphs (demo: the clinic's history)
The sticky building photo starts close on the ground floor, pans to the top floor and pulls back to the whole corner as you read.
Before you come in.
Questions and answers (native <details>)
Come in.
Coral arch panel: address, phone, email, hours, photo and a visit request form
As the section scrolls in, the coral panel grows and rises while its top corners round into a tall arch.
Footer
Rounded panel: brand line, address, three link columns, copyright and the Design: 8B credit

What is inside

Files: index.html (104 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Google Sans from Google Fonts (SIL Open Font License)
Photos: 26 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 108+, Safari 15.4+, Firefox 101+ (it uses cascade layers, small/dynamic viewport units).
Replace before publishing: Social preview image, favicon, phone number, email address, map, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
License: MIT

Good to know

One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
Book a visit buttons (nav, phone menu, hero, footer) lead to #contact now; point them to your online booking page, or keep them on the contact form.
Privacy link in the footer lead to #contact now; point them to your privacy policy page.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
On phones the growing arch is stretched more in height than in width, so mid-scroll it reads as a tall coral door; it lands exactly on the second screen's arch.
The service photos fold back into their small pill as a row leaves the top of the screen; at rest (no JavaScript, reduced motion) every photo is open.
The building photo in story shows a shop sign and street signs of the real place it was taken; replace it with a photo of your own building.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this veterinary website template

Does the visit request form send anything?

Not yet. It asks for name, phone, the animal's name, species and the problem and shows a thank-you, but sends nothing until you connect a form service such as Formspree or Netlify Forms.

Can I change the species and prices?

Yes. The four species panels, the nine price rows with what each visit includes, and the opening hours are plain HTML text you edit in index.html.