Templates /

Free pet boarding website template

Live demoGitHubDownload ZIPUse this template

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

Sill template: first screen on a phone

About this template

Sill is a pet boarding website template for a twelve-room cattery: room types with nightly prices, evening letters from sitters, the daily routine, the team, house rules and a booking form. It also works for pet sitting or, with new photos and rules, dog boarding.

A one-page site for a small boarding house for cats with twelve rooms around a courtyard. Flat blocks of saturated colour separated by thick black gutters; a black hill rises and swallows the first screen while the house's windows light up, the day runs past on a pinned track under a changing sky, and photos peek up over their panels' edges.

Good for:

Cattery or cat hotelPet boarding or pet sitting serviceDog daycare or kennel (with new photos and rules)Small guesthouse or B&B with a handful of roomsAny small service with rooms or packages, a daily schedule and a team

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

How to use the pet boarding website template

With an AI coding agent

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

curl -LO https://raw.githubusercontent.com/8bsite/pet-boarding-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/pet-boarding-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/pet-boarding-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/pet-boarding-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 site for <your pet boarding business: which animals you take, the rooms or packages and their prices, the daily routine, the team, where you are, how to book>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, prices, hours, staff, address, 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/pet-boarding-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.

Pet boarding website design and motion

Palette

#0b0a0a black page and gutters#f4f1ee off-white text#cf6224 orange panels, sky, wordmark#6e1116 maroon panels#5a3cd4 violet panels#bca59d taupe panels and form#a97d9c mauve panels#80a89b sage panels#e3b867 mustard panels, button hover

Fonts

  • Gabarito: heavy, tight grotesk headings, set very large
  • Rethink Sans: body text, buttons, uppercase labels
  • Playwrite US Modern: handwriting for the sitters' letters

Flat, square panels of saturated colour sit on a 12-column grid, the black page showing through as thick gutters, and photos fill their panels edge to edge. Room panels differ in shape, first-visit steps rise like a staircase and black mullions cut the courtyard photo into six panes.

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

What is on the page

  • Navigation
    Black top bar: wordmark, five section links, Book a stay button; hides on scroll down; phone menu overlay of colour panels
  • Rooms with a view, for cats.
    Two screens: a grid of colour panels with headline, photo, intro, price and buttons, then a facade of twelve coloured windows (demo: twelve rooms, five with cats)

    Smooth scrolling throughout. Scrolling on, a black hill swallows the first screen as its panels drift apart, then the facade's twelve windows fill in.

  • Three shapes of room
    Room types as panels of different shapes, each with photo, text and price per night, plus an "every room has" list (demo: Ledge, Tower, Burrow)

    Most headings rise line by line. Tied to scroll, each room panel opens out from a square in its corner.

  • A letter every evening
    Three short notes in a handwriting font with photos (demo: the evening letters sitters send to owners); works as testimonials

    Here, in the team and on the first visit, photos peek up inside their frames as you scroll and hand-drawn curls draw themselves.

  • A day at Sill
    Pinned horizontal track of six timed panels under a sky band (demo: the cats' daily schedule from 07:00 to 21:00)

    Pinned, the six timed panels slide sideways under a sky band that shifts through six colours as a black sun rises and sets.

  • Four people, always in the house
    Team of four: portraits behind coloured ledges at stepped heights, name and role on each ledge
  • Every window faces the courtyard
    One photo cut into six window panes by black mullions, with heading, text, a three-item list and a second photo with caption (demo: the courtyard view)

    Tied to scroll, the six panes of the window photo slide from scattered offsets into one picture as their tints fade.

  • Your first visit
    Four numbered steps as a rising staircase of panels, a photo on the top step (demo: what happens on a first visit)
  • A quiet house, by rule
    Four rules or promises as panels with one big word each (demo: No dogs, One cat, Own air, Vet close)

    Four rule panels start tilted, scattered and orange, then settle into a row in their own colours as each big word slims.

  • Questions owners ask
    Questions and answers (native <details>) beside a heading panel with a phone link
  • Book a room
    Booking form framed by four contact panels: Call, Visit, Hours, Write (phone, address, opening hours, email are placeholders)

    Tied to scroll, the Call, Visit, Hours and Write panels slide in from four sides to frame the booking form.

  • Footer
    Black footer: links, address, phone, email, a one-line note, copyright with the Design: 8B credit, and a large wordmark

What is inside

Files
index.html (94 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
Gabarito, Playwrite US Modern and Rethink Sans from Google Fonts (SIL Open Font License)
Photos
25 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, contact form (sends nothing yet) and email address, 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 stay buttons in the nav, the phone menu, the first screen and the footer lead to #contact now; point them to your online booking page, or keep #contact once the form is connected.
  • Ask for dates in the Winter holidays notice on the first screen lead to #contact now; point them to your booking page or a page about holiday availability.
  • The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
  • In rooms, the text inside each room panel is clipped until the panel has grown; it is complete when the panel is in the middle of the screen.
  • The handwriting face is a third font family used only for the three letters; drop it and use the body font if you need fewer font files.
  • The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this pet boarding website template

Does the booking form send requests?

Not yet. It asks for names, email, dates, room and notes, then shows a thank-you line; connect it to a form service such as Formspree or Netlify Forms to receive bookings.

Can it work for a dog kennel or daycare?

Yes, with edits: swap the cat photos, room names and prices, and rewrite the four house rules, since one of them reads No dogs. The six timed slots of the day fit any boarding routine.

For agents and LLMs

More templates

All 20 templates