Getting started

Important: This is not a Wordpress theme but an HTML template. Before you buy it, make sure you need the HTML version. We are not liable for wrong purchases and we will not issue any refunds for mistakes in buying.

1. Document

This document will help you get started with Monte. All the information regarding file structure, build tools, components and credits can be found here. If you have any questions that are beyond the scope of this help documentation, please feel free to contact us.

2. Overview

Monte - Luxury Hotel Bootstrap Template

Mote is a premium and contemporary hotel website template, carefully crafted to deliver users a stunning experience. The template includes 23 HTML Pages with 2 choices Dark Mode/Light Mode and 12 Theme Colors, covering homepages, about, rooms, services, news, contact, and various other pages. Developed with HTML5, CSS3, and pure Javascript and (complies with W3C standards). The template only uses pure Javascript plugins without dependencies, resulting in fast and lightweight code. Based on Bootstrap 5.3, the most popular website interface framework nowadays, the template ensures a beautiful and responsive design.

The Mote template is ideal for building hotel, resort, and homestay websites. With its attractive design, user-friendly interface, and simplicity, the template provides a comprehensive user guide, making it easy for both users and developers to create a refined, elegant, and modern hotel website.

The source code of the template is well-commented, making it very simple to customize and integrate. Built with tools like Gulp, Nodejs, and SASS, the source code is highly adaptable, upgradable, and easily scalable. While these tools are not required, they are highly suggested for use to enable deeper customization, upgrades, and expansive development.

Monte Features:

  • 23 HTML pages
  • 2 dark/light modes
  • 12 theme colors
  • 3 homepages
  • 3 hero banner styles (carousel, image, video)
  • Fullscreen and fullwidth banners
  • 3 room listing and 2 room detail layouts
  • Service pages (restaurant, spa, events)
  • Sticky header with smooth effect
  • Check room form
  • Hotel icon fonts
  • Carousels for various sections
  • Google Maps with Snazzymaps
  • Image/video backgrounds
  • Contact form with PHP email
  • Bootstrap dropdown menu and offcanvas mobile menu
  • Elegant image gallery and lightbox
  • Video player for HTML5, YouTube, and Vimeo
  • Gulp, Nodejs, SASS support
  • Package.json and Gulpfile.js included
  • SASS source code
  • Bootstrap 5.3.x framework
  • HTML5 and CSS3 compliant
  • Pure JavaScript code
  • Retina ready
  • SEO friendly
  • Mobile responsive
  • Scrolling animations
  • Offcanvas quick contact slider
  • Google Fonts (Cinzel, Jost, Red Hat Text)
  • Clean and commented code
  • Well documented
  • Free support and updates

3. Prerequisites

Make sure you are familiar with the following technologies below:

  • HTML/CSS/JS (required)
  • Bootstrap 5.3 (required)
  • Sass/Scss (recommended): Using SCSS will make it easier for you to edit Templates.
  • Gulp (optional): Gulp is a task runner and automation tool. It will help you to compile SCSS, bundle JS modules, minifies output files, etc.
  • Npm (optional): Npm is a package manager for Node.js. With Npm can manage (install, update, delete) your project dependencies much easier.

4. Installation

Note: This is an optional step for advanced users who want to develop faster using Gulp/node.js. If you want to customize this template more simply and don't need SCSS/Gulp/Node.js knowledge you can use the files in the dev folder

4.1. Install Node.js and Gulp

  1. Make sure you have Node.js installed. If you don't have it installed, visit nodejs.org to download and install.
  2. Run npm install gulp-cli -g to install Gulp CLI globally if you haven't already installed Gulp CLI before.
  3. Unzip the template package and cd to Monte root folder. Run npm install to install the dependencies from package.json file.
  4. You are now ready to work with the project files and npm packages.

4.2. Gulp tasks

  • gulp This is the default task that does the following: creates dist folder, starts BrowserSync, merges vendor libraries, minifies JS, compiles SASS/HTML, and watches for changes.
  • gulp serve This task starts watch and BrowserSync. It watches your HTML/SCSS/CSS/JS files and compiles them automatically..
  • gulp build:dist This task creates dist folder with all template files and minified CSS/JS.
  • gulp build:dev This will create dev which includes all template files with unminified CSS/JS.

When you want to kill the server just hit Control + C

For more information about Node.js/Gulp tools, visit https://nodejs.org and https://gulpjs.com.

5. Email sending configuration

Note: The send email feature in Demo has been turned off to prevent misuse for harmful purposes!

To receive Email from contact page, you need to replace email example@yourdomain.com with your email in assets/php/mail.php file.

You can see the code of the mail.php file below:

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        # FIX: Replace this email with recipient email
        $mail_to = "example@yourdomain.com";
        # Sender Data
        $subject = trim($_POST["subject"]);
        $firstname = str_replace(array("\r","\n"),array(" "," ") , strip_tags(trim($_POST["firstname"])));
        $lastname = str_replace(array("\r","\n"),array(" "," ") , strip_tags(trim($_POST["lastname"])));
        $email = trim($_POST["email"]);
        $phone = trim($_POST["phone"]);
        $message = trim($_POST["message"]);
        # Mail Content
        $content = "First Name: $firstname\n";
        $content .= "Last Name: $lastname\n";
        $content .= "Email: $email\n\n";
        $content .= "Phone: $phone\n";
        $content .= "Message:\n$message\n";
        # email headers.
        $headers = "From: $firstname $lastname <$email>";
        # Send the email.
        $success = mail($mail_to, $subject, $content, $headers);
        if ($success) {
            # Set a 200 (okay) response code.
            # echo "Thank You! Your message has been sent.";
            # Back to contact
            header("Location: ../contact.html?code=200");
        } else {
            # Set a 500 (internal server error) response code.
            # echo "Oops! Something went wrong, we couldn't send your message.";   
            # Back to contact
            header("Location: ../contact.html?code=500");
    } else {
        # Not a POST request, set a 403 (forbidden) response code.
        # echo "There was a problem with your submission, please try again.";   
        # Back to contact
        header("Location: ../contact.html?code=403");


To use the email feature from the form on the contact page, you need to use the sample HTML file named contact-sample.html (You remember! rename it to contact.html and overwrite the existing contact.html file.). This file contains some extra Javascript code that displays a message when users send emails successfully or unsuccessfully.

    //Getting page URL
    const get_url = window.location.search;
    const url_param = new URLSearchParams(get_url);

    //get code parameter value from URL
    const code = url_param.get('code');

    //If Code is not Null
    if (code.length) {

        //Show message

        //If the message is sent successfully
        if (code == '200') {
            document.getElementById('msg_alert').innerHTML = "<strong>Your message has been sent</strong>.<br/>We have received your message and will contact you as soon as possible!<br/>Thank you for contact!";
        //If sending message failed
        else if (code == '500') {
            document.getElementById('msg_alert').innerHTML = "Oops! Something went wrong, we couldn't send your message.";
        //If there is an error
        else {
            document.getElementById('msg_alert').innerHTML = "There was a problem with your submission, please try again.";

6. Changelog

VERSION 1.0 (Oct 01 2023)

  1. Initial release