Pet boarding website template: a one-page site for a small cattery or pet hotel, with three room types and nightly prices, a timed daily routine, four sitters, house rules and a booking form. The look is flat colour panels on a black page. Its scroll motion runs on CSS with no JavaScript library, in one HTML file with an AGENTS.md that an AI agent reads whole.
Live demo · Use this template · Download ZIP · Template page on 8b.com
Scroll animation
Download the four files into your project folder (curl.exe in Windows PowerShell):
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.mdThen fill in the angle brackets and give your agent this prompt:
Read AGENTS.md, then edit index.html. Turn this template into the site for <my boarding business: the animals I take, my town and address, the room types with nightly prices, the daily routine with times, the team, vaccination rules, minimum stay, drop-off hours, how guests book>. Replace the brand name, town, rooms, prices and sitters first. Keep twelve facade windows and four house rules. Motion is CSS scroll-driven animation plus the inline motion kit: keep the gate script in the head, the data-8b-section and data-8b-motion attributes and the classes AGENTS.md lists; add no animation library. Never invent prices, hours, addresses, vet clinics, reviews or contacts; ask me.
Start with the facts only the owner has: town, address, phone, the three nightly prices, vaccination rules, minimum stay, drop-off hours and the real team. A pet boarding website template for Claude Code, Cursor or Codex fits a vibe coding session: tell the agent to ask for these and never to invent a vet clinic, a price or a sitter. Next it searches for the old name in any letter case and replaces every match, then sets the footer wordmark's --len value to the new name's character count. Leave alone the section ids, the classes AGENTS.md lists, the twelve facade windows and the four house rules: the grid and the scenes are built for those counts.
No agent? Click Use this template, edit index.html on GitHub and turn on Settings > Pages.
- 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 wheel scrolling with a mouse throughout; on load the first panels slide in, then scrolling on, a black hill swallows the first screen as its panels drift apart and 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). Several headings rise line by line as they arrive. Tied to scroll, each room panel opens out from a square in its corner and the tall room's name turns to run up its edge.
- 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 thins.
- 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.
Gabarito: heavy, tight grotesk headings, set very large. Rethink Sans: body text, buttons, uppercase labels. Playwrite US Modern: handwriting for the sitters' letters (Google Fonts). 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.
Does the booking form send requests?
No. The form asks for name, email, the cat's name, dates, a room and notes, checks that name and email are filled in, then shows a thank-you line and sends nothing. Connect Formspree or Netlify Forms, or remove the form and keep the email link. AGENTS.md has the steps. Also edit the line that promises an answer within one working day.
Can I use it as a pet sitting website template?
Yes. As a pet sitting template it needs three changes: rename the room types as the packages you sell, turn the evening letters into the updates you send owners, and swap the four sitter portraits for your own people. Then edit the six timed slots of the day and add your town, phone and prices.
Can it be a dog boarding website template?
Yes, with edits. The layout does not depend on the animal, but the copy does: replace the cat photos, the lines that talk about cats and the four house rules, whose first panel reads No dogs. Rooms, prices and the six timed slots of the day can then describe your kennel. Expect more rewriting than for a cattery.
Choose this template when guests sleep over and the pitch is the place: a cattery, a pet hotel or a small kennel. As a pet care website template it suits animals that stay, not a dog walker who comes to the door; for a clinic with appointments, the template for an animal hospital fits better. This build looks and moves the same with no script from a CDN: about 27 KB of gzipped code in one file, where the GSAP version needs about 75 KB over five requests. Booking is the weak spot: the form sends nothing until you connect a form service, with no availability calendar or payment.
- Replace what is marked
data-8b-placeholder(social preview image, favicon, phone, form, email) and the invented demo facts; AGENTS.md lists them. - The form sends nothing yet: connect it to Formspree or Netlify Forms, or remove it.
No JavaScript libraries: CSS scroll-driven animations and a small inline motion script with its own smooth wheel scrolling, 113 KB, no build step. Chrome and Edge 108+, Safari 16+, Firefox 110+ (it uses container query units, cascade layers, small/dynamic viewport units). Without scroll-driven animations (Firefox today) the scroll motion and the smooth wheel are off and each section shows its finished layout, while any load-in or looping animation still plays; with "reduce motion" on, the page is complete and nothing moves on its own (hover effects stay).
A GSAP build of the same page is index.gsap.html: GSAP 3.13.0, ScrollTrigger, SplitText, Lenis 1.3.27 from jsDelivr, 96 KB; its scroll motion also plays in Firefox. Use one of the two files.
MIT, see LICENSE. Photos, fonts and libraries keep their own licences: CREDITS.md. More free templates: 8b.com/templates · github.com/8bsite.