Hibotel — Luxury Hotel & Resort HTML5 Template

Thank you for purchasing Hibotel. This guide covers everything you need to set the template up, re-theme it and adapt the booking logic to your own property. If something is not answered here, the support link at the top of this page reaches us directly.

What Is In The Box

Getting Started

Hibotel is plain HTML, CSS and JavaScript. There is nothing to install and nothing to compile.

1. Unzip And Open

Unzip Hibotel-HTML5-Main-File.zip. Inside you will find the hibotel/ folder (the template) and Documentation/ (this guide). Open hibotel/index.html in a browser to check everything is present.

2. Run It Through A Local Server

Opening the files directly with file:/// works for most of the template, but the contact and booking forms need a server to reach sendmail.php. Any of these will do:

# Python 3 (built in on macOS and most Linux)
python -m http.server 8000

# Node
npx serve .

# PHP, which also runs the mail handler
php -S localhost:8000

3. Upload

Copy the contents of hibotel/ to your web root. The template is entirely static apart from sendmail.php, so any host that serves PHP will run all of it.

File Structure

hibotel/
├── index.html                 Home 01 - split editorial hero
├── homepage-2.html            Home 02 - cinematic slider hero
├── homepage-3.html            Home 03 - topbar + boxed header
├── rooms.html                 Room grid with live filters
├── rooms-list.html            Room list view
├── room-details.html          Single room, specification and rates
├── search-results.html        Availability results for a date range
├── booking.html               Reservation form with a live total
├── offers.html                Seasonal packages
├── dining.html                The four venues
├── menu.html                  Tabbed restaurant menu
├── spa.html                   Spa and treatment price list
├── experiences.html           Experience grid
├── experience-details.html    Single experience with an itinerary
├── gallery.html               Filterable gallery with lightbox
├── about.html                 The house, its story and values
├── team.html                  The people
├── blog.html                  Journal index with sidebar
├── blog-details.html          Single post, author box and comments
├── blog-details-gallery.html  A journal post in the gallery format
├── blog-details-video.html    A journal post in the video format
├── blog-details-audio.html    A journal post in the audio format
├── blog-details-quote.html    A journal post in the quote format
├── blog-details-link.html     A journal post in the link format
├── contact.html               Contact cards, form and map
├── login.html                 Account sign in
├── register.html              Account creation
├── forgot-password.html       Password reset
├── coming-soon.html           Countdown and sign-up
├── 404.html                   Not found
├── sendmail.php               Contact form handler
└── assets/
    ├── css/
    │   ├── plugins/           bootstrap, swiper, fancybox
    │   ├── fontawesome-all.css
    │   ├── style.css          main stylesheet, numbered sections
    │   └── responsive.css     desktop-first breakpoint ladder
    ├── js/
    │   ├── plugins/           jquery, bootstrap, swiper, fancybox, gsap, scrolltrigger
    │   └── main.js            all custom behaviour, numbered blocks
    ├── img/                   grouped by section
    └── webfonts/              Font Awesome 6 Free

How The Stylesheet Is Organised

assets/css/style.css opens with a numbered table of contents. Every section in that list has a matching banner comment in the body, in the same order, so you can jump straight to the part you want:

/*======================
6. Hero
========================*/

All breakpoint rules live in responsive.css rather than being scattered through the main file. It is desktop-first and steps down through 1399, 1199, 991, 767 and 575 pixels.

Colors & Fonts

Every colour and font in the template comes from CSS custom properties declared once at the top of style.css. Change them there and the whole template follows — there is no need to search and replace hex values.

Re-Theming In Five Minutes

Open assets/css/style.css, find the :root block, and change the four colours that matter. Every button, hairline, eyebrow and hover state updates at once.

:root {
  --hb-color-ink: #14110E;          /* headings, dark sections   */
  --hb-color-gold: #C2A46A;         /* buttons, rules, accents   */
  --hb-color-gold-deep: #9A7C45;    /* links and hover states    */
  --hb-color-sand: #F7F3EC;         /* alternating section wash  */
}

Each colour also has an -rgb companion (for example --hb-color-gold-rgb: 194, 164, 106) used wherever the design needs transparency. If you change a colour, change its companion to match.

Typography

The template ships exactly two families. Both load from Google Fonts in the <head> of every page; swap that one link and the two tokens to change the whole typographic voice.

Heading sizes are fluid. --hb-fs-h1 through --hb-fs-h6 use clamp(), so they scale with the viewport without a single media query.

The Rate Engine

The booking maths in Hibotel is real, not decorative. It lives in one place — block 16. Rate Engine in assets/js/main.js — and every other part of the template asks it for numbers.

How A Night Is Priced

Each night of a stay is priced by the season that night falls in, then added up. A stay that straddles two seasons is therefore priced honestly rather than averaged.

Changing The Rules

Everything you are likely to want to change sits at the top of the engine:

var RESORT_FEE  = 38;    // per room, per night
var TAX_RATE    = 0.11;  // on room + surcharge + resort fee
var EXTRA_GUEST = 60;    // per guest above two, per night

var SEASONS = [
  // [startMonth, startDay, endMonth, endDay, multiplier, label]
  [1,  6,  3, 31, 0.78, 'Low Season'],
  [4,  1,  5, 31, 1.00, 'Shoulder'],
  ...
];

The shoulder-season offer (four nights or more arriving between 1 October and 20 December takes the cheapest night off) is a single function called fourthNightFree() in the same block. Delete it or change the window without touching anything else.

Where Rooms And Rates Are Defined

Room facts live in the HTML as data attributes, so there is no separate data file to keep in sync:

<div class="room-card" data-slug="cliffside-suite" data-bed="king"
     data-view="panoramic" data-guests="3" data-rate="720" data-size="78">

The filters on rooms.html, the availability results and the booking summary all read these attributes. To add a room, copy an existing card and change the attributes and the copy.

How A Stay Travels Between Pages

The search bar posts to search-results.html as a plain query string, which every later page reads:

search-results.html?arrive=2026-10-14&depart=2026-10-19&guests=3&rooms=1
booking.html?room=cliffside-suite&arrive=2026-10-14&depart=2026-10-19&guests=3&rooms=1

Nothing is stored in cookies or local storage. If you connect a real booking system, this is the one place you need to hand over to it.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a single jQuery IIFE. The file opens with a numbered index and every block below it is self-contained: each one checks that its element exists before doing anything, so the same file loads safely on every page.

/*-------------------------------------------------
16. Rate Engine
-------------------------------------------------*/
function doSomething() {
  if (!$('.thing').length) { return; }   // nothing to do on this page
  ...
}

The Cursor

The square cursor lives in block 29 and in section 42 of the stylesheet. It only starts on a device with a fine pointer that has not asked for reduced motion, so touch screens and reduced-motion visitors keep the ordinary cursor. To remove it, delete doCursor(); from the ready block — nothing else depends on it. To let the real cursor through somewhere else, add that selector to NATIVE in the same block and to the matching rule in section 42.

Reduced Motion

Every animated block checks prefers-reduced-motion first. When a visitor has asked their system to reduce motion, the content is shown immediately in its final state rather than being animated in — nothing is ever left hidden. If you add your own animations, follow the same pattern:

if (reducedMotion) {
  gsap.set(items, { autoAlpha: 1, clearProps: 'transform' });
  return;
}

Adding Your Own Code

Add a new numbered block at the end of the file, add the matching line to the index at the top, and call it from the $(document).ready() list at the bottom. Keeping the index and the blocks in step is the only rule.

Images

Images are grouped by where they are used, and every placeholder carries its dimensions so you know what to supply:

Flags

assets/img/flags/ holds one SVG per country, named by its two-letter ISO code (fr.svg, it.svg). The Houses section on Home 01 references six of them. To add a house, drop its row into .houses-grid, point data-map at a Google Maps embed URL and name its flag file.

Crops

Portrait crops are anchored to the top (object-position: center top) so that heads are never cut off, and hover zooms use the same origin. If you supply images at the sizes above, no further adjustment is needed.

Contact Form

The contact form on contact.html, the booking request on booking.html and the comment form on blog-details.html all post to sendmail.php over AJAX and report back in place, without a page reload.

1. Set Your Address

Open sendmail.php and change the first line:

// Your email here
$email = 'example@example.com';

2. Upload To A PHP Host

The handler needs PHP. If you open the template from your desktop the form will tell the visitor so rather than failing silently — that message is deliberate, and disappears once the files are on a real host.

3. reCAPTCHA v3 (Optional)

The handler ships with invisible reCAPTCHA v3 support, switched off by default.

1. Register your domain at google.com/recaptcha/admin and choose reCAPTCHA v3. You will be given a site key and a secret key.
2. In sendmail.php, set the switch and paste your secret key:

   $use_recaptcha = true;
   define("RECAPTCHA_V3_SECRET_KEY", 'your-secret-key-here');

3. Add the reCAPTCHA script to the page that carries the form, just above the closing </body> tag, using your site key:

   <script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
   <script>
   grecaptcha.ready(function () {
     grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
       document.querySelector('.hb-contact-form')
         .insertAdjacentHTML('beforeend',
           '<input type="hidden" name="token" value="' + token + '">');
     });
   });
   </script>

4. Submit the form once and check that mail arrives. If it does not, the most common causes are a mismatched domain in the reCAPTCHA console or a host that blocks PHP's mail().

Credits

All libraries are self-hosted in assets/js/plugins/ and assets/css/plugins/. The only external requests the template makes are Google Fonts and, on the contact page, an OpenStreetMap embed.

Support

If something here has not answered your question, or you have found a bug, please open a support request through our ThemeForest profile. Item support covers answering questions about the template's features, bug fixes and help with included third-party assets.

Contact Metropolitanthemes

Thank you again for choosing Hibotel. If the template has been useful, a rating on your ThemeForest downloads page genuinely helps.