# Burrow, a free veterinary website template

> Website for a veterinary clinic or animal hospital. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/).

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.

- Page: https://8b.com/templates/burrow/
- Live demo: https://8bsite.github.io/veterinary-website-template/
- Repository (GitHub template): https://github.com/8bsite/veterinary-website-template
- Download ZIP: https://github.com/8bsite/veterinary-website-template/archive/refs/heads/main.zip
- Size: 104 KB, 26 photos (Unsplash), fonts: Google Sans
- Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll

## 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/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:

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

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/veterinary-website-template my-site`.

## Design

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.

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

## Sections and motion

- **Navigation** (navigation): top bar: arch logo and wordmark, section links, Book a visit button; phone menu overlay
- **Calm, thorough, kind. Vet care for every animal.** (opening): first screen: headline, two buttons, wide photo and floating shapes; second screen: four numbered steps of a visit on a coral arch. Motion: 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.** (clinic-sides): two arch-cut photos either side of the copy (demo: separate cat and dog sides of the clinic). Motion: 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.** (species): four overlapping colour panels, one per group (demo: animals the clinic treats). Motion: 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.** (services): list of six services, each row with a photo, text and a short note. Motion: 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.** (team): four people with portraits, role and one line (demo: vets and head nurse). Motion: As the team scrolls into view, each portrait opens from a circle, arch, square or diamond into its full frame.
- **This month at Burrow.** (patients): pinned horizontal row of seven cards (demo: patients of the month, name, breed, age, why they came). Motion: 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.** (prices): dark band: price list (service, what is included, price) and a note on estimates
- **On Lombard Street since 2014.** (story): sticky building photo beside three dated paragraphs (demo: the clinic's history). Motion: 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.** (faq): questions and answers (native <details>)
- **Come in.** (contact): coral arch panel: address, phone, email, hours, photo and a visit request form. Motion: As the section scrolls in, the coral panel grows and rises while its top corners round into a tall arch.
- **Footer** (footer): rounded panel: brand line, address, three link columns, copyright and the Design: 8B credit

## Good for

- veterinary clinic or animal hospital
- exotic-pet or specialist vet practice
- pet groomer, boarding or other pet-care business
- any small local clinic with a team, services and a price list

## Questions

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

## Before publishing

Replace: 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).

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.