Login

Not a member yet? Register now
×
Design Nominees
Hibo - HTML Travel and Hospitality Templates

Hibo - HTML Travel and Hospitality Templates

by Metropolitanthemes

69
Description

Hibo - Hospitality Suite HTML5 Templates

Hibo is a suite of eleven hospitality HTML5 templates in one package: ten complete sites - a luxury hotel, an eco lodge, a ski resort, a private jet charter, a black car service, a tour operator, a water park, a kids club, a resort boutique and a concierge desk - and Hiboboard, the operations dashboard that runs them. Each site is a complete product with its own look - its own palette, type, motion, WebGL scene and home pages - so a hotel group, a travel brand or an agency gets a site for every part of the stay, and one board to run the whole network behind them. Underneath, all eleven are built to one standard: the same file structure, the same commented CSS and JavaScript, the same working form handler and one documentation. And every template does real work: every price on every demo is calculated, not typed.

The Eleven Templates

  • Hibotel - Luxury Hotel & Resort (30 pages): an editorial hotel template with a seasonal rate engine that prices every night of a stay by its own season.
  • Hiboxa - Rainforest Resort & Eco Lodge (29 pages): a calm, botanical template with nightly season pricing, a three-step stay builder and a spa booking flow.
  • Hiboski - Ski Resort & Chalet Booking (31 pages): lift passes priced by season, days and age, rental kit, chalet stays night by night, a snow report and a piste finder.
  • Hibojet - Private Jet Charter (29 pages): a Charter Quote engine that prices every trip from great-circle distances between 27 airports, plus jet cards and empty legs.
  • Hibolimo - Black Car & Chauffeur (29 pages): a fare engine that prices every ride from the real distance, a three-step booking with a live trip sheet and a corporate savings calculator.
  • Hibotour - Tours & Travel Agency (26 pages): a trip cost engine with seasons, rooms, children, add-ons, early-bird savings and a deposit schedule, plus a route builder.
  • Hibomar - Water Park & Beach Resort (30 pages): day passes priced by date, a ride finder by height, a live wave pool schedule and cabana booking.
  • Hibokids - Kindergarten & Nursery (38 pages): a fee engine that prices every care plan, an enrolment wizard and a complete parent journey.
  • Hibomerch - Resort Boutique & Fashion Store (30 pages): a working shop - a bag that remembers across pages, filters, a delivery estimator with room delivery and coupons.
  • Hiboncierge - Luxury Concierge Desk (1 page, 2 variants): a three.js globe and a real concierge desk: eight pricing engines, one itinerary and a membership.
  • Hiboboard - Hospitality Operations Dashboard (192 pages + 12 emails): the back office for the whole network, in dark and light: bookings, rates, guests, operations, partners, referrers and payouts, with every list and form in all of its states.

Hiboboard, The Dashboard

Hiboboard runs the network behind the sites from one board. Its 192 HTML pages are 162 dashboard pages, an 8-page guest portal, 6 print views, 9 sign-in and onboarding pages and 7 system pages, plus 12 HTML email templates, all in a dark and a light theme. It is designed for a back end: every list, form and dashboard ships with all of its states, so connecting real data needs no new design.

  • Every business model: an owned hotel group (group P&L, intercompany, rate push), franchises (agreements, territories, brand audits, royalty statements, the marketing fund), a partner network (applications, KYC, listing approval, wallets, settlements, payouts), referrers (tracked links, conversions, commissions) and SaaS (plans, subscriptions, billing, checkout).
  • Every kind of stay: properties, units, a drag-and-drop tape chart, seasons, rate plans and a rate simulator; bookings, quotes, enquiries and front desk; and modules for the suite's own products - ski passes and rentals, water park attractions, kids club care plans and enrolments, empty legs and jet cards, chauffeur dispatch and retail.
  • Every state designed: empty, no-results, loading and error states on every list, form errors and success toasts, confirm dialogs with Undo, the 403, 404, 419, 500 and maintenance pages, six print views and twelve emails.
  • Working interface: a command palette (Ctrl/Cmd + K), pinned pages, a voice and text assistant, sortable tables with a floating bulk bar, kanban boards and a drag-and-drop rota, calendars, uploads, a rich-text editor and a picker of 500 icons.

A WebGL Scene In Every Template

  • Hibotel: sun glitter on the bay - gold glints that twinkle and drift with the swell.
  • Hiboxa: sunlight through the rainforest canopy - flecks of sun that open and close.
  • Hiboski: frost on the chalet glass - ice crystals that grow in from the edges.
  • Hibojet: the night sky at cruise altitude - three depths of drifting stars.
  • Hibolimo: the city at night as a long exposure - streams of head and tail lights.
  • Hibotour: sky lanterns rising over the festivals section.
  • Hibomar: pool caustics - the net of light a pool throws on its floor.
  • Hibokids: soap bubbles floating up with a shifting rainbow film.
  • Hibomerch: folded silk in sand and champagne behind the welcome.
  • Hiboncierge: a three.js route globe in the hero.
  • Hiboboard: the suite's four-colour light behind the sign-in and onboarding pages.
  • The landing page: the four pillar colours flowing as light behind the content, folding round the pointer.

The Suite Landing Page

A landing page presents the whole suite: a hero slider, a mega menu with every template and its home pages, the four pillars (Hospitality, Intelligence, Business, Operations), a showcase of every template, the Engine Room - eight of the suite's pricing engines running live on one page (private jet, black car, hotel suites, spa, journeys, ski passes, water park and kids club) - a page for each template, a section for Hiboboard with its dark and light themes side by side under a moving divide, the full component kit and the standards every template shares.

Screenshots

Hibotel - Luxury Hotel & Resort

Home 01
Hibotel - Home 01

Home 02
Hibotel - Home 02

Home 03
Hibotel - Home 03

Room Details
Hibotel - Room Details

Booking
Hibotel - Booking

Hiboxa - Rainforest Resort & Eco Lodge

Home 01
Hiboxa - Home 01

Home 02
Hiboxa - Home 02

Home 03
Hiboxa - Home 03

Stay Builder
Hiboxa - Stay Builder

Spa Rituals
Hiboxa - Spa Rituals

Hiboski - Ski Resort & Chalet Booking

Home 01
Hiboski - Home 01

Home 02
Hiboski - Home 02

Home 03
Hiboski - Home 03

Lift Passes
Hiboski - Lift Passes

Pistes & Snow Report
>

Hibojet - Private Jet Charter

Home 01
Hibojet - Home 01

Home 02
Hibojet - Home 02

Home 03
Hibojet - Home 03

Charter Quote
Hibojet - Charter Quote

Jet Card
Hibojet - Jet Card

Hibolimo - Black Car & Chauffeur

Home 01
Hibolimo - Home 01

Home 02
Hibolimo - Home 02

Home 03
Hibolimo - Home 03

Book A Ride
Hibolimo - Book A Ride

Rates
Hibolimo - Rates

Hibotour - Tours & Travel Agency

Home 01
Hibotour - Home 01

Home 02
Hibotour - Home 02

Home 03
Hibotour - Home 03

Trip Planner
Hibotour - Trip Planner

Tour Details
Hibotour - Tour Details

Hibomar - Water Park & Beach Resort

Home 01
Hibomar - Home 01

Home 02
Hibomar - Home 02

Home 03
Hibomar - Home 03

Day Passes
Hibomar - Day Passes

Attractions
Hibomar - Attractions

Hibokids - Kindergarten & Nursery

Home 01
Hibokids - Home 01

Home 02
Hibokids - Home 02

Home 03
Hibokids - Home 03

Enrolment
Hibokids - Enrolment

Care Plans
Hibokids - Care Plans

Hibomerch - Resort Boutique & Fashion Store

Home 01
Hibomerch - Home 01

Home 02
Hibomerch - Home 02

Home 03
Hibomerch - Home 03

Product Details
Hibomerch - Product Details

Cart
Hibomerch - Cart

Hiboncierge - Luxury Concierge Desk

Day
Hiboncierge - Day

Night
Hiboncierge - Night

Hiboboard - Hospitality Operations Dashboard

Network Overview - Dark
Hiboboard - Network Overview - Dark

Network Overview - Light
Hiboboard - Network Overview - Light

Bookings
Hiboboard - Bookings

Tape Chart
Hiboboard - Tape Chart

Property 360
Hiboboard - Property 360

Referrers
Hiboboard - Referrers

Analytics
Hiboboard - Analytics

Guest Portal
Hiboboard - Guest Portal

Features

  • 11 templates - 10 complete sites and an operations dashboard - with 29 home pages, 466 HTML pages and 12 email templates, plus the suite landing page
  • W3C validated HTML and CSS, zero console errors
  • Real logic in every site: seasonal rates, distance-based fares and quotes, passes by date and age, fees, a shop bag and a concierge itinerary
  • A 192-page operations dashboard in dark and light: ApexCharts, a drag-and-drop tape chart, kanban boards and rota, a command palette, and every list and form in all of its states
  • A custom WebGL scene in every template and on the landing page, plus a three.js globe in Hiboncierge
  • Currency switchers that repaint every price in eight of the templates
  • One code standard: numbered CSS table of contents, a JS index, CSS-variable design tokens for fast re-theming
  • GSAP + ScrollTrigger reveals, counters and parallax, each template with its own motion
  • Swiper sliders, Fancybox lightbox galleries and three-level navigation on every multi-page template
  • Working PHP form handler in every site template, with optional invisible reCAPTCHA v3
  • Font Awesome Free 6.7.2 and a niche icon font in each template
  • RTL-ready: every site template ships RTL stylesheets, and its sliders, marquees and animations mirror
  • prefers-reduced-motion support for accessibility
  • Fully responsive with a desktop-first breakpoint system
  • One documentation for the whole suite

Credits

Bootstrap 5.3.3, jQuery 3.7.1, Swiper 11.2.10, GSAP 3.12.5 with ScrollTrigger, Fancybox 3.5.7, three.js r128, Font Awesome Free 6.7.2, Flaticon icon fonts, flag-icons (MIT).

Hiboboard adds: ApexCharts 3.42.0, FullCalendar 5.11.5, Swiper 8.4.7, flatpickr 4.6.13, Choices.js 9.1.0, FilePond 4.30.4 with its plugins, Quill 1.3.7, Pickr 1.8.2, Cleave.js 1.6.0, noUiSlider with wNumb, Dragula, GLightbox 3.1.0, jsVectorMap, SimpleBar 5.3.9.

Fonts: Schibsted Grotesk, Onest, Bodoni Moda, Jost, Fraunces, Figtree, Archivo, Barlow, Sora, Hanken Grotesk, Instrument Serif, Urbanist, Kurale, Mukta, Baloo 2, Mulish, Grandstander, Karla, Playfair Display, DM Serif Display.

Note

All images are used for preview purposes only and are not included in the download package - they are replaced with neutral placeholders of the same size. The logo files, brand marks, review platform logos, flags, icon fonts and the templates' own artwork (snow, clouds, pool decor, leaves, patterns) are included.

============================================================ FORM FIELDS ============================================================ TITLE: Hibo - Hospitality Suite HTML5 Templates SHORT DESCRIPTION: Eleven hospitality HTML5 templates: 10 sites with 29 home pages, an operations dashboard, 466 pages and WebGL scenes. REQUIREMENTS:

To edit and publish the templates you need:

  • A code editor such as VS Code, Sublime Text or Notepad++
  • Basic working knowledge of HTML and CSS
  • A modern browser - Chrome, Firefox, Safari or Edge
  • Any web host, or local hosting, to publish the files - no database required
  • PHP 7.4 or newer on the server, only if you want the included contact form handler to send mail
  • An image editor is optional, for swapping the placeholder images for your own

INSTRUCTIONS:

  1. Unzip the download. You get two folders: hibo - the suite landing page and the eleven templates - and Documentation.
  2. Open Documentation/index.html in a browser first. It covers the folder structure, the eleven templates, the Hiboboard dashboard, colours and fonts, the pricing engines and how to change their values, RTL, the JavaScript guide, images and the contact form.
  3. Inside hibo, index.html is the suite landing page. Each template sits in its own folder - hibotel, hiboxa, hiboski, hibojet, hibolimo, hibotour, hibomar, hibokids, hibomerch, hiboncierge and hiboboard - with its own pages and assets folder, so each one works on its own. In hiboboard, index.html is the Network Overview, the guest portal starts at account.html and the email templates are in its emails folder.
  4. Open a template's folder in your code editor and start from its index.html. Every page is plain HTML - edit the text and images directly in the markup.
  5. Colours live as CSS variables at the top of each template's assets/css/style.css, in the :root block. Change those values and that template re-themes.
  6. Each template's prices and rules - seasons, fares, passes and fees - are set in its assets/js/main.js; the Pricing Engines section of the documentation shows where each value sits and how to change it.
  7. Swap the placeholder images in each assets/img/ folder for your own, keeping the same file names and aspect ratios, or point the img tags at your new files.
  8. To enable a contact form, upload the template to a PHP host and set your own email address inside its sendmail.php. If you want the spam filter, add your reCAPTCHA v3 secret key in the same file; leave it as it is to run without one.
  9. To run a template right to left, follow the RTL section of the documentation: set dir="rtl" on the page and swap three stylesheets for their RTL versions.
  10. Hiboboard is front-end only: its lists, forms and charts carry demo data and read their figures from data attributes, ready for your back end to fill. Switch its theme with data-theme="dark" or "light" on the html tag; its colours are the --hbd- variables at the top of hiboboard/assets/css/style.css.
  11. Upload a template's folder, or the whole hibo folder, to your web server's public directory. There is no build step, no database and no installer.

TAGS: luxury hotel, hotel booking, eco lodge, ski resort, private jet, jet charter, limousine service, travel agency, tour operator, beach resort, water park, nursery school, resort boutique, concierge service, admin dashboard

Related Websites