Overview

Hibo — Hospitality, Intelligence, Business, Operations — is a suite of eleven hospitality HTML templates built to one standard, and a landing page that presents them all: ten complete sites and Hiboboard, the dashboard that runs them. Every template is a complete product of its own: open a site’s folder and you have a finished site with its own pages, styles, scripts and mail handler; open hiboboard/ and you have the whole back office in HTML.

What’s included

• Ten complete site templates, each a standalone site in its own folder: Hibotel (Luxury Hotel & Resort), Hiboxa (Rainforest Resort & Eco Lodge), Hiboski (Ski Resort & Chalet Booking), Hibojet (Private Jet Charter), Hibolimo (Luxury Black Car & Chauffeur), Hibotour (Tours & Travel Agency), Hibomar (Water Park & Beach Resort), Hibokids (Kindergarten & Nursery School), Hibomerch (Resort Boutique & Fashion Store), Hiboncierge (Luxury Concierge & Travel Booking)
• Hiboboard, the eleventh template: a hospitality operations dashboard of 192 pages and 12 HTML email templates, in dark and light (see Hiboboard Dashboard)
• 466 HTML pages across the suite, 29 home pages to choose from
• The Hibo landing page (index.html): a mega menu with every home page, the showroom, eight live pricing engines, the suite cards, the kit in one scan and a footer with every home page
• 8 live pricing engines: private jet, black car, hotel suites, spa rituals, journeys, ski passes, water park and kids club — each works inside its template and again on the landing
• One code standard: numbered CSS table of contents, numbered JS index, local plugins and icon fonts, reduced-motion fallbacks
• A working AJAX mail handler with optional reCAPTCHA v3 in every site template

Getting Started

1. Open locally

Unzip the package and open Hibo/index.html for the landing page, or Hibo/<template>/index.html for any template (for example Hibo/hibotel/index.html). No build tools or server are needed — every page, slider and price works straight from the files.

2. Publish one template, or the whole suite

Each template folder is self-contained. To launch a single site, upload the contents of that one folder (for example hibojet/) to your host. To publish the suite, upload the whole Hibo/ folder.

3. Customise

Every template keeps its styles in assets/css/style.css (numbered Table of CSS at the top) and assets/css/responsive.css, and its scripts in assets/js/main.js (numbered JS INDEX). Colours and fonts are CSS variables — see Colors & Fonts.

File Structure

index.html	The Hibo landing page
assets/	The landing’s CSS, scripts (32 numbered blocks), fonts and images
documentation/	This guide
hibotel/ … hiboncierge/	The ten site templates, one folder each: the HTML pages, assets/ and sendmail.php
hiboboard/	The dashboard: its 192 HTML pages, emails/ (12 email templates) and assets/
<template>/assets/css/	style.css, responsive.css (breakpoints 1399 / 1199 / 991 / 767 / 575) and plugins/
<template>/assets/js/	main.js and plugins/ (jQuery, Bootstrap, Swiper, GSAP, ScrollTrigger and the template’s own extras)
<template>/assets/img/	Images grouped by the section that uses them
<template>/sendmail.php	The AJAX mail handler for that template’s forms (see Contact Form)

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and Hibo/, which holds the landing page and its files at the top, then the eleven templates, each a complete product of its own.

Hibo/
├── index.html                              the Hibo landing page
├── assets/                                 the landing's own files
│   ├── css/
│   │   ├── style.css                       all the landing's styles, numbered Table of CSS
│   │   ├── responsive.css                  breakpoints 1399 / 1199 / 991 / 767 / 575
│   │   ├── fontawesome-all.css             Font Awesome Free, local
│   │   └── plugins/                        Bootstrap, Swiper
│   ├── js/
│   │   ├── main.js                         all the landing's scripts, numbered JS INDEX
│   │   └── plugins/                        jQuery, Bootstrap, Swiper, GSAP, ScrollTrigger
│   ├── fonts/                              Hibo Icons (the landing's icon font)
│   ├── webfonts/                           Font Awesome font files
│   └── img/                                bg/, brands/, cars/, dashboard/, engines/, homes/, jets/, leaves/, logo/, stage/, support/, wall/
├── hibotel/                                Luxury Hotel & Resort - 30 pages
├── hiboxa/                                 Rainforest Resort & Eco Lodge - 29 pages
├── hiboski/                                Ski Resort & Chalet Booking - 31 pages
├── hibojet/                                Private Jet Charter - 29 pages
├── hibolimo/                               Luxury Black Car & Chauffeur - 29 pages
├── hibotour/                               Tours & Travel Agency - 26 pages
├── hibomar/                                Water Park & Beach Resort - 30 pages
├── hibokids/                               Kindergarten & Nursery School - 38 pages
├── hibomerch/                              Resort Boutique & Fashion Store - 30 pages
├── hiboncierge/                            Luxury Concierge & Travel Booking - 2 pages
└── hiboboard/                              Hospitality Operations Dashboard - 192 pages and 12 emails

Inside a template

Every site folder is laid out the same way, so what you learn in one works in all ten. Hiboboard’s folder is described in Hiboboard Dashboard.

hibotel/   (every template folder follows the same layout)
├── index.html, homepage-2.html, homepage-3.html   the home pages
├── *.html                                  every inner page (about, rooms, booking, blog, contact ...)
├── sendmail.php                            the AJAX mail handler for this template's forms
└── assets/
    ├── css/
    │   ├── fontawesome-all.css             Font Awesome Free, local
    │   ├── responsive.css                  breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css              the right-to-left twin of responsive.css
    │   ├── style.css                       all custom styles, numbered Table of CSS
    │   ├── style.rtl.css                   the right-to-left twin of style.css
    │   └── plugins/                        Bootstrap (+ its RTL build), Swiper, Fancybox
    ├── js/
    │   ├── main.js                         all custom scripts, numbered JS INDEX; the engine figures live here
    │   └── plugins/                        jQuery, Bootstrap, Swiper, GSAP, ScrollTrigger, Fancybox
    ├── fonts/                              the niche icon font (Flaticon), where the template has one
    ├── webfonts/                           Font Awesome font files
    └── img/                                one folder per section, e.g. about/, banner/, bg/, blog/, dining/, experiences/, flags/, gallery/ ...

The Eleven Templates

Every template has its own look, its own two fonts and its own class prefix (all of its CSS variables start with it).

Template	Niche	Pages	Homes	Fonts	Prefix
Hibotel hibotel/	Luxury Hotel & Resort	30	3	Bodoni Moda + Jost	--hb-
Hiboxa hiboxa/	Rainforest Resort & Eco Lodge	29	3	Fraunces + Figtree	--hx-
Hiboski hiboski/	Ski Resort & Chalet Booking	31	3	Archivo + Barlow	--hs-
Hibojet hibojet/	Private Jet Charter	29	3	Sora + Hanken Grotesk	--hj-
Hibolimo hibolimo/	Luxury Black Car & Chauffeur	29	3	Instrument Serif + Urbanist	--hl-
Hibotour hibotour/	Tours & Travel Agency	26	3	Kurale + Mukta	--ht-
Hibomar hibomar/	Water Park & Beach Resort	30	3	Baloo 2 + Mulish	--hr-
Hibokids hibokids/	Kindergarten & Nursery School	38	3	Grandstander + Karla	--hk-
Hibomerch hibomerch/	Resort Boutique & Fashion Store	30	3	Playfair Display + Jost	--hm-
Hiboncierge hiboncierge/	Luxury Concierge & Travel Booking	2	2	DM Serif Display + Jost	--hc-
Hiboboard hiboboard/	Hospitality Operations Dashboard	192	—	Schibsted Grotesk + Onest	--hbd-

Hiboboard Dashboard

Hiboboard is the suite’s hospitality operations dashboard: one board for every property in the network — bookings and rates, guests and operations, partners, referrers and payouts — in a dark and a light theme. It is front-end only: every list, form and chart is designed with its demo data and working interface behaviour, ready for your back end to fill. Open Hibo/hiboboard/index.html to start.

Pages	Count
Dashboard pages	162
Guest portal	8
Print views	6
Sign-in & onboarding	9
System pages	7
HTML email templates (emails/)	12

Dark & light

The theme is one attribute on the <html> tag: data-theme="dark" (the default) or data-theme="light". The toggle in the top bar switches it and remembers the choice in the browser; a short script in the head applies the saved choice before the page paints, and every chart redraws in the new colours. The colours are the --hbd- variables at the top of assets/css/style.css: the light values in :root, the dark ones in [data-theme="dark"].

Charts, lists and states

Charts are ApexCharts drawn from data attributes on each chart element — data-chart (the kind), data-series, data-labels, data-colors and data-opts — so a back end prints real figures into the same attributes. Table rows carry data-status for the status filters. Every list also ships its empty, no-results, loading and error states; the menu beside the Export button on each list shows them.

Connecting a back end

• The sidebar, the top bar and every modal are marked with start and end comments (for example <!-- sidebar start here -->), ready to move into your framework’s includes.
• Form fields carry name attributes; forms confirm with a toast in the demo, and saving is your back end’s.
• Each plugin loads only on the pages that use it, and assets/js/main.js has 28 numbered blocks, one per feature, like every template.
• Street maps are Google Maps embeds; for production, switch them to the Maps Embed API with your own key.

Emails

The 12 transactional emails in hiboboard/emails/ are table-based with inline styles, the form email programs need; open one in a browser to see it, then copy it into your mail system’s templates.

Colors & Fonts

Each template is driven by the CSS variables at the top of its style.css: colours are --<prefix>-color-* and the fonts are its two --<prefix>-ff- variables (heading and body). Change a token once and every section follows. Colours used with transparency have an -rgb twin — change both together. The landing uses the --ho- prefix:

Fonts

Two Google Fonts are loaded in the head of every page of a template (see the table above); the landing uses Schibsted Grotesk for headings and Onest for text. To swap a font, edit the Google Fonts link and the two -ff- variables.

Pricing Engines

Eight templates price their service live as the visitor changes the form — nothing is typed in. Each engine lives in its template’s main.js (find it in the JS INDEX), with the figures it uses kept together at the top of its block. The landing’s Engine Room runs the same eight engines; their figures sit in the Suite Data block of Hibo/assets/js/main.js.

Hotel Suites hibotel/	A rate engine that prices every night by its own season
Spa Rituals hiboxa/	A stay builder and a spa planner that catches clashing rituals
Ski Passes hiboski/	Lift-pass tables by days, age and season, with the family saving
Private Jet hibojet/	Charter quotes from the great-circle distance, the aircraft and the legs
Black Car hibolimo/	Fares by road distance and time, or by the hour
Journeys hibotour/	Trip cost with seasons, rooms, the early bird and a deposit schedule
Water Park hibomar/	Day passes by weekday, weekend and summer peak, with cabanas
Kids Club hibokids/	Fees by age room, days, siblings and a registration

Changing Engine Values

Every price an engine shows is worked out from a few named values — change a value and every card, table and quote that uses it follows. The values are plain numbers: no currency signs, no thousands separators. The currency switcher converts dollars for display using the rate on each of its options.

1. Open the template’s assets/js/main.js in a code editor.
2. Find the block named below (the JS INDEX at the top of the file lists every block by number), or search for the value’s name.
3. Change the number, save, and reload the page.

Hibotel — Hotel Suites

Open hibotel/assets/js/main.js and go to block 16. Rate Engine (search for the name in the first column). All money is in US dollars; shares are fractions (0.15 = 15%).

SEASONS	each season as [start month, start day, end month, end day, multiplier, name]; a night costs the room's rate × its season's multiplier
RESORT_FEE	per room, per night
TAX_RATE	0.11 = 11% on room, surcharge and resort fee
EXTRA_GUEST	per guest above two, per night

// before
[7, 1, 8, 31, 1.55, 'Peak Season'],
// after
[7, 1, 8, 31, 1.45, 'Peak Season'],

Each room's own nightly rate is the data-rate attribute on the room in the page (for example data-rate="420" in booking.html and the room pages).

Hiboxa — Stays & Spa Rituals

Open hiboxa/assets/js/main.js and go to block 13. Rate Engine and 21. Ritual Day (search for the name in the first column). All money is in US dollars; shares are fractions (0.15 = 15%).

STAYS	every stay: its nightly rate, how many it sleeps, its size and view
RITUALS	every ritual: its daily start time, length in minutes and price per guest

// before
{ slug: 'canopy-safari-tent', name: 'Canopy Safari Tent', type: 'tent', rate: 420, sleeps: 2, size: 42, view: 'Jungle', img: 'package-slider/03.jpg' },
// after
{ slug: 'canopy-safari-tent', name: 'Canopy Safari Tent', type: 'tent', rate: 460, sleeps: 2, size: 42, view: 'Jungle', img: 'package-slider/03.jpg' },

Hiboski — Ski Passes

Open hiboski/assets/js/main.js and go to block 10. Resort Data (search for the name in the first column). All money is in US dollars; shares are fractions (0.15 = 15%).

SEASON_BANDS	the winter in bands: [start month, start day, end month, end day, season]
PASS_DAYS	the adult pass price for 1, 2, 3 … 14 days (the first 0 is for zero days)
PASS_AGES	the share of the adult price each age pays (factor)
PASS	insurance per day, the family saving and the rental saving with a pass
RENTAL	ski and board rental prices

// before
var PASS_DAYS = [0, 79, 152, 222, 288, 350, 405, 456, 505, 552, 597, 640, 681, 720, 757];
// after
var PASS_DAYS = [0, 85, 160, 222, 288, 350, 405, 456, 505, 552, 597, 640, 681, 720, 757];

Hibojet — Private Jet

Open hibojet/assets/js/main.js and go to block 10. Fleet Data (search for the name in the first column). All money is in US dollars; shares are fractions (0.15 = 15%).

FLEET	every jet: seats, range (nm), cruise speed (kt) and hourly rate
CATS	per class: the landing and handling fee and the crew's night stop
QUOTE	the rules: routing allowance, taxi time, minimum hours, catering, transfer, tax

// before
{"id": "vega-cj", "name": "Vega CJ", "cat": "light", "seats": 6, "range": 1850, "speed": 415, "rate": 4100, "cabin": 1.45, "bags": 1.8, "burn": 520, "sleeps": 0},
// after
{"id": "vega-cj", "name": "Vega CJ", "cat": "light", "seats": 6, "range": 1850, "speed": 415, "rate": 4400, "cabin": 1.45, "bags": 1.8, "burn": 520, "sleeps": 0},

Hibolimo — Black Car

Open hibolimo/assets/js/main.js and go to block 08. Fleet Data (search for the name in the first column). All money is in US dollars; shares are fractions (0.15 = 15%).

FLEET	every car: base fare, price per mile, per hour and the minimum hours
RULES	road factor, night surcharge and hours, stops, child seat, meet and greet, tax
CORP	the corporate account tiers and their discounts
PACKAGES	the wedding, prom and tour packages

// before
{"id": "executive-sedan", "name": "Executive Sedan", "cls": "sedan", "clsName": "Sedans", "seats": 3, "bags": 3, "base": 25, "mile": 3.95, "hour": 89, "min": 2, "cut": "assets/img/fleet/sedan.png", "cabin": "assets/img/photos/executive-cabin.jpg", "photo": "assets/img/photos/chauffeur-door-sm.jpg", "line": "Leather rear seats, Wi-Fi and a quiet ride for one to three."},
// after
{"id": "executive-sedan", "name": "Executive Sedan", "cls": "sedan", "clsName": "Sedans", "seats": 3, "bags": 3, "base": 25, "mile": 3.95, "hour": 95, "min": 2, "cut": "assets/img/fleet/sedan.png", "cabin": "assets/img/photos/executive-cabin.jpg", "photo": "assets/img/photos/chauffeur-door-sm.jpg", "line": "Leather rear seats, Wi-Fi and a quiet ride for one to three."},

Hibotour — Journeys

Open hibotour/assets/js/main.js and go to block 09. Tour Data (search for the name in the first column). All money is in US dollars; shares are fractions (0.15 = 15%).

TOURS	every tour: days, price per person, single supplement, best and shoulder months
SEASON	the price factor in the best, shoulder and off months
COST	child share, early-bird days and saving, deposit, balance due days, private and single-night rules

// before
{ id: 'golden-triangle', name: 'The Golden Triangle', region: 'india', dest: 'delhi-agra', country: 'India', days: 7, price: 1890, single: 540, styles: ['heritage'], best: [10, 11, 12, 1, 2, 3], shoulder: [4, 9], closed: [], rating: 4.9, reviews: 212 },
// after
{ id: 'golden-triangle', name: 'The Golden Triangle', region: 'india', dest: 'delhi-agra', country: 'India', days: 7, price: 1990, single: 540, styles: ['heritage'], best: [10, 11, 12, 1, 2, 3], shoulder: [4, 9], closed: [], rating: 4.9, reviews: 212 },

Hibomar — Water Park

Open hibomar/assets/js/main.js and go to block 09. Park Data (search for the name in the first column). All money is in US dollars; shares are fractions (0.15 = 15%).

TICKETS	each ticket's price as [weekday, weekend]
PEAK	the summer peak: its dates and price factor
ADDONS	the day-pass extras
CABANAS	cabana prices
FAMILY	the family bundle: adults, children and the saving

// before
adult: { label: 'Adult', note: 'Ages 12-64', price: [49, 59] },
// after
adult: { label: 'Adult', note: 'Ages 12-64', price: [52, 62] },

Hibokids — Kids Club

Open hibokids/assets/js/main.js and go to block 10. Care Data (search for the name in the first column). All money is in US dollars; shares are fractions (0.15 = 15%).

ROOMS	every age room: the full and half day rates, staff ratio and places
FEES	multi-day savings, the sibling saving, early and late care, registration, deposit

// before
{"id": "babies", "name": "Babies", "tab": "3 Months", "ages": "3 - 6 Months", "room": "The Nest", "full": 82, "half": 52, "ratio": 3, "capacity": 9, "enrolled": 6},
// after
{"id": "babies", "name": "Babies", "tab": "3 Months", "ages": "3 - 6 Months", "room": "The Nest", "full": 86, "half": 54, "ratio": 3, "capacity": 9, "enrolled": 6},

Hibomerch — Boutique

Open hibomerch/assets/js/main.js and go to block 35. Delivery Estimator and 36. Order Summary (search for the name in the first column). All money is in US dollars; shares are fractions (0.15 = 15%).

SHIPPING	standard and express delivery, the free-delivery threshold, the same-day cutoff hour
TAX_RATE	0.08 = 8% sales tax
CODES	the discount codes: each one's rate and any conditions

// before
HIBO10: { rate: 0.10, label: 'Ten percent off your first order.' },
// after
HIBO10: { rate: 0.12, label: 'Ten percent off your first order.' },

Each product's price is the data-price attribute on its card in the page (for example data-price="148" in shop-grid.html).

Hiboncierge — Every Service

Open hiboncierge/assets/js/main.js and go to block 08. Concierge Data (search for the name in the first column). All money is in US dollars; shares are fractions (0.15 = 15%).

CD	one object with every figure the desk uses: terminals, aircraft, cars, suites and seasons, rituals, journeys, pass tables, park and kids club rates, boutique pieces, the Circle and the weekends

Find the service's key inside CD (for example CD.cars) and change its numbers.

The Hibo landing — the Engine Room

The landing runs the same eight engines with its own copy of the figures: Hibo/assets/js/main.js, block 08. Suite Data (var CD). Change a figure there and the Engine Room follows; the templates keep their own values.

RTL (Right To Left)

Every site template is RTL-ready (Hiboboard, the dashboard, runs left to right): the layout with its paddings and margins, the sliders, the marquees and the animations all mirror. Nothing is translated — you bring your own right-to-left copy. To turn a page right to left:

1. Set the direction

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

<html lang="en" dir="rtl" class="no-js">

2. Swap three stylesheets

assets/css/plugins/bootstrap.min.css	→ assets/css/plugins/bootstrap.rtl.min.css
assets/css/style.css	→ assets/css/style.rtl.css
assets/css/responsive.css	→ assets/css/responsive.rtl.css

The scripts read the direction from the dir attribute: sliders, marquees and every move that must mirror follow it on their own.

JavaScript Guide

Every main.js in the suite is organised the same way: a numbered JS INDEX at the top, then one self-contained doSomething() block per feature that skips pages where its section is not present — delete any block you do not need. Every animation respects prefers-reduced-motion: content appears in its final state.

Images

The package ships neutral placeholder images so every layout shows at the right size. Replace them with your own photos using the same file names and dimensions. The landing’s images are grouped in Hibo/assets/img/:

img/bg/	Section grounds: the runway, the maze pattern and its soft copy, the Engine Room veil — 4167×2083, 3280×1919, 1084×610
img/brands/	The eleven template logos, dark and light — 1106×272, 1162×248, 1098×240, 828×208
img/cars/	The limousine that drives across the kit section — 1000×437
img/dashboard/	The Hiboboard section: the dashboard's overview in dark and light, and six of its pages — 1440×900, 720×450
img/engines/	One photograph per pricing engine form — 1000×750
img/homes/	Home-page thumbnails for the mega menu, the showroom and the footer slider — 640×400
img/jets/	The jet that flies across the kit section — 1400×420
img/leaves/	The leaves at the sides of the suite's first row — 326×263, 316×255, 275×223
img/logo/	Hibo logo, light logo, wordmark, mark and favicon — 512×512, 722×322, 672×208, 64×64
img/stage/	Tall captures of every home page, scrolled inside the showroom window and the suite cards — 760×2280, 760×1351
img/support/	The support center's faces — 160×160
img/wall/	Inner pages drifting on the hero wall — 480×300

Each template groups its images the same way, one folder per section. The logos are included and ready to use; the demo photography on the live preview is for preview only and is not included in the download.

Contact Form

The forms in each site template post to that template’s own sendmail.php, a lightweight AJAX mail handler; the message appears under the button without reloading the page (Hiboboard’s forms are for your back end). To activate it:

1. Set your email address

Open sendmail.php in the template folder and replace the placeholder recipient at the top of the file:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your own computer or from a static-only host.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 is built into the handler and stays off until you add keys: create v3 keys for your domain in the Google reCAPTCHA admin console, replace YOUR_RECAPTCHA_V3_SECRET_KEY in sendmail.php with your secret key, then add a hidden g-recaptcha-response field to the form and load the reCAPTCHA script with your site key before </body>.

Credits

The suite is built with the following open-source libraries and resources.

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11.2.10
• GSAP 3.12.5 + ScrollTrigger
• Fancybox 3.5.7
• three.js (Hiboncierge)
• Font Awesome Free 6
• Flaticon icon fonts
• Hibo Icons (the landing)
• Google Fonts: Archivo, Baloo 2, Barlow, Bodoni Moda, DM Serif Display, Figtree, Fraunces, Grandstander, Hanken Grotesk, Instrument Serif, Jost, Karla, Kurale, Mukta, Mulish, Onest, Playfair Display, Schibsted Grotesk, Sora, Urbanist

Hiboboard adds:

• ApexCharts 3.42.0
• FullCalendar 5.11.5
• flatpickr 4.6.13
• Choices.js
• FilePond 4.30.4
• Quill 1.3.7
• Pickr 1.8.2
• Cleave.js 1.6.0
• noUiSlider + wNumb
• Dragula
• GLightbox
• jsVectorMap
• SimpleBar 5.3.9

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheets and, where a page has them, the map and audio embeds.

Support

Six months of dedicated support and every future update are included. Support is available through the marketplace where you purchased Hibo: open the item there and send us your question from its support page. Item support covers questions about the templates’ features, bug fixes and help with the included third-party assets. We aim to respond within 24–48 hours.