Meridian Botanics

Pawtel - Pet Hotel & Boarding HTML5 Template

Pawtel is a warm, animation-rich HTML5 template for pet hotels, boarding kennels, catteries, day care and grooming businesses. It pairs a rounded, friendly design - grape and a four-colour accent rotation, set in Fredoka and Nunito - with something most pet templates skip: pricing that actually works. The rate calculator, the booking wizard and the printed rate card all read from one model in the JavaScript, so a quote on screen can never contradict the published rates.

Two Homepages

• Home 01 - The Full Tour: split hero with a blob-masked portrait over a three.js paw-print field, an overlapping availability bar, a welcome collage with a years badge, a tabbed suite mosaic by pet type, a dark "why owners choose us" band where a trail of paw prints is walked across as you scroll, the horizontal A Day At Pawtel timeline that scrubs as you scroll, a full-bleed facility slider with a synced copy card, a video tour, a six-card services grid, carer portraits, parent testimonials, an animated stats band over rising bubbles, a leash-trail CTA and a blog slider.
• Home 02 - The Night Shift: the same building told through its overnight care - a full-bleed dark hero over a night photograph with inline night-check figures, then the reasons band lifted to the top, facilities, suites, the day timeline and the rest re-ordered around the night-staffing angle.

Feature Pages

• Rates & Calculator: pick a pet type and the suite list filters itself. Set nights and pet count with sliders, tick any add-ons, and every line updates - nightly rate, boarding subtotal, each itemised extra, the multi-pet discount as its own line, the grand total and the true average per night. The full rate card underneath uses the identical numbers.
• Book A Stay: a four-step wizard - pet details, dates and suite, extra services, review - with per-step validation, a reversed-date-range guard, whole-night counting and a live summary rail that follows you down the page. The review step itemises the whole quote before anything is confirmed.
• Owner Portal: a stay in progress - today's timeline of walks, meals, medication doses and play, a weight trend chart, meal, walk, medication and stay-completion meters, a photo grid and upcoming bookings. The charts are pure CSS, so there is no charting library to configure.

Inner Pages

About (story timeline and four promises), All Suites (sixteen rooms across four pet types), Suite Details (gallery slider, spec tiles and a seasonal rate table), All Services, Service Details (with pricing table and FAQ accordion), Our Carers, Gallery (filterable, with lightbox), Blog (standard, video, gallery and quote post types with pagination), Blog Details (sidebar, author box, comments and post navigation), Contact (working PHP form and map), Login, Register, Forgot Password, Coming Soon (live countdown) and 404 - twenty pages in total, all sharing the same header, three-level navigation, offcanvas and footer.

Features

• 20 HTML pages, 2 unique homepage designs
• One pricing model shared by the calculator, the wizard and the rate card - no figure can drift
• Multi-pet discount bands, per-night and one-off add-ons, honest night counting
• three.js scenes: drifting paw prints, a paw trail walked in on scroll, grooming bubbles and leash trails
• A horizontal day timeline scrubbed by GSAP ScrollTrigger as the section passes
• GSAP + ScrollTrigger scroll reveals, animated counters, parallax and a marker-stroke heading effect
• Full prefers-reduced-motion support - nothing is left invisible on the reduced-motion path
• Swiper sliders (facilities, testimonials, blog, suite gallery)
• Pure-CSS bar chart and progress meters in the owner portal
• CSS-variable design tokens for five-minute re-theming
• Working PHP contact form handler with optional invisible reCAPTCHA v3
• Font Awesome 6 Free icons loaded locally
• Fully responsive with a desktop-first breakpoint system: 1399 / 1199 / 991 / 767 / 575
• W3C valid on every page, zero console errors
• Well-commented code with a numbered CSS table of contents and a numbered JS index
• Documentation included

Credits

Bootstrap 5.3, jQuery 3.7.1, Swiper 11, GSAP 3 with ScrollTrigger, three.js, Fancybox, Font Awesome 6 Free, Google Fonts (Fredoka, Nunito).

Note

All photographs are used for preview purposes only and are not included in the download package - they are replaced with neutral placeholders labelled with the size each one expects. The logo files and generated artwork are included. Fonts and icon fonts load locally; the only external requests are Google Fonts and the optional Google Maps embed.