Harbor Outdoors

Hibotel - Luxury Hotel & Resort HTML5 Template

Hibotel is a high-end HTML5 template for luxury hotels, boutique resorts, villas, spa retreats and restaurants with rooms. It pairs an editorial Bodoni Moda and Jost typographic system with a warm champagne-and-ink palette - and backs it up with something most hotel templates skip: a real seasonal rate engine. Every price on the demo is calculated, not typed. Each night is priced by the season that night falls in, then summed, so a stay that straddles two seasons is costed honestly rather than averaged.

Three Homepages, Three Header And Footer Systems

• Home 01 - Editorial: split hero with a Ken-Burns Swiper carrying a gold autoplay progress ring and slide counter, a floating availability bar that computes live, staggered amenity cards, a pinned horizontal suite rail that scrolls sideways, a signature suite block with synced main and thumbnail sliders, a serif marquee that skews with scroll velocity, four dining venues, an animated stats band, a peeking experience slider, centred testimonials, a CTA with tilted gold-framed tiles and a centred newsletter footer.
• Home 02 - Cinematic: burger-left transparent header over a full-viewport Ken-Burns slider with a per-slide caption and progress bar, an intro split with a circular anniversary badge and a signed paragraph, a three-cell core band with ghost numerals, a feature-room slider with overlay captions, a hairline stat strip, two-up quote panels, a full-bleed video band, a one-lead-plus-four journal layout, a looping photo feed and a dark widget footer.
• Home 03 - Concierge: dark topbar with a boxed white header floating over the hero, a left-aligned hero with a full-bleed dark availability bar, an about stack with offset plates, a room showcase where the caption card sits below the photograph, a statement band with a giant watermark, a numbered services grid, a restaurant menu preview with leader dots, a stat strip and a light widget footer.

The Rate Engine

• Seasonal pricing: five seasons with their own multipliers - Low 0.78, Shoulder 1.00, High 1.20, Peak 1.55 and Festive 1.55 - applied per night, not per stay.
• Real totals: room subtotal, extra-guest surcharge, per-night resort fee and tax are all calculated and shown separately, so the number the guest sees is the number they pay.
• A working offer: stay four nights or more arriving inside the shoulder window and the cheapest night is deducted automatically.
• The stay travels: the search bar hands its dates to the availability page by query string, and the availability page hands them to the booking form - filters, per-room totals and the summary card all stay in step.
• Configurable in one place: fees, tax rate, surcharge and the whole season table sit at the top of a single JavaScript block.

Stay Pages

• Rooms Grid & Rooms List: nine rooms with live filters for bedding, occupancy and outlook, plus sorting by rate, size or capacity - all re-ordering the real DOM, with a proper empty state.
• Room Details: main and thumbnail gallery, a two-table specification, three framed detail shots, a seasonal rate table that highlights the current season, house policies, and a sticky reservation panel that prices your dates live.
• Availability Search: results filtered by party size, each row showing the average night, the season, any saving and the true total for the stay.
• Booking Form: a three-step request with a sticky summary card that recalculates as you change the room, dates or party, including the thirty per cent deposit.
• Special Offers: four packages with full terms, from-prices and struck-through comparisons.

Resort & Inner Pages

Dining (four venues with opening hours), Restaurant Menu (tabbed, with dish plates and prices), Spa & Wellness (treatment price table), Experiences, Experience Details (with an hour-by-hour itinerary), Gallery (filterable masonry with a lightbox), About (illustrated timeline and values band), Our Team, Journal (standard, video and quote post types with a full sidebar), Journal Details (author box, comments, post navigation), Contact (working PHP form and map), Login, Register, Forgot Password, Coming Soon (live countdown) and 404 - twenty-five pages in total, all sharing one three-level navigation and one offcanvas menu.

Features

• 30 HTML pages, 3 unique homepage designs
• 3 header systems and 3 footer systems, each demonstrated on its own homepage
• Real seasonal rate engine - per-night pricing, fees, tax and a working offer
• GSAP 3 with ScrollTrigger: pinned horizontal scroll, per-word headline reveals, clip-path wipes, scrubbed parallax, scroll-velocity marquee and counters
• Swiper 11 sliders: fade hero with progress ring, synced gallery pairs, peeking rails, creative testimonials and a looping photo feed
• Fancybox lightbox on the gallery and video blocks
• A square custom cursor that follows the pointer, opens over anything clickable and steps aside for fields, embeds and draggable rails
• Five post formats on the journal - gallery, video, audio, quote and link
• The Houses section: a flagged list of locations wired to a mini Google map
• Full prefers-reduced-motion support - nothing is ever left hidden
• CSS-variable design tokens for five-minute re-theming, with RGB companions
• Fluid clamp() type scale - no media queries needed for headings
• Working PHP contact handler with optional invisible reCAPTCHA v3
• Font Awesome 6 Free icons loaded locally, no CDN
• Desktop-first responsive system: 1399 / 1199 / 991 / 767 / 575
• W3C valid on every page, zero console errors on every page
• Numbered CSS table of contents and a numbered JavaScript index
• No build step - no Node, no Sass, no compilation
• Documentation included

Credits

Bootstrap 5.3, jQuery 3.7.1, Swiper 11, GSAP 3 with ScrollTrigger, Fancybox 3, Font Awesome Free 6, Google Fonts (Bodoni Moda, Jost).

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 exact pixel size required. The logo files and favicon are included. All libraries and icon fonts are self-hosted; the only external requests are Google Fonts and the OpenStreetMap embed on the contact page.