Free pet boarding website template
Repository: github.com/8bsite/pet-boarding-website-template · Live demo: 8bsite.github.io/pet-boarding-website-template/ · MIT license
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:
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.mdThen 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-siteNo 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 hoverFonts
- 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
- NavigationBlack 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 roomRoom 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 eveningThree 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 SillPinned 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 houseTeam of four: portraits behind coloured ledges at stepped heights, name and role on each ledge
- Every window faces the courtyardOne 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 visitFour 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 ruleFour 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 askQuestions and answers (native <details>) beside a heading panel with a phone link
- Book a roomBooking 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.
- FooterBlack 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
#contactnow; 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
#contactnow; 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.




