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 Marota. All the information regarding file structure, build tools, components and credits can be found here.

Note: Requests sent during weekends or on holidays will be replied on business days. We only provide support for the issues related to the features that are included in the template. Debugging or providing guides on how to make custom modifications are not part of our support. Thank you for understanding.

2. Overview

Marota - Luxury Hotel Bootstrap HTML Template

Marota is a premium hotel website template that comes with a full range of features to create a professional hotel website. This template is coded in HTML5/CSS3/JS following W3C standards. All the code is well-documented, and the directory structure and code are neatly arranged so it’s easy to modify.

Marota is based on Bootstrap 5 and makes the most of the available Bootstrap features, allowing programmers to edit the code easily and quickly. The template uses Javascript but does not depend on jQuery or jQuery-based plugins, resulting in faster page loading times and simple integration with other platforms.

Marota includes 43 skillfully designed HTML pages, such as Room Page, Tours Page, Booking/Reservation Page, Customer Account Page, and more, meeting the essential requirements for building a professional hotel website.

This template uses tools for building: Node.js/Gulp/SASS, including the package.json, Gulpfile.js, and SCSS files.

Marota Features
  • 43 HTML pages for hotels/resorts/homestays/hostels.
  • 10 color theme options
  • Customer accounts with modal login/register.
  • 3 room pages and 2 room details.
  • Modern room/availability check form.
  • 4-page booking form with steps.
  • 3 tour pages.
  • 4 extra services pages.
  • 5-page service booking form.
  • 3 banner options: Carousel, image, video.
  • Sticky header.
  • 2 navbar options: dropdown and mega menu.
  • Modal language and currency selection.
  • Minimalist photo gallery.
  • Image and video background options.
  • Image and video lightbox.
  • Video player (HTML video/Youtube/Vimeo).
  • Node.js, Gulp/SASS tools.
  • package.json, Gulpfile.js, SCSS files included.
  • Bootstrap Framework (v.5.3).
  • HTML5/CSS3 W3C standard code.
  • Pure JavaScript (no jQuery).
  • High SEO standards met.
  • Mobile responsive.
  • SEO optimized.
  • Scroll animations.
  • hotel-icons set used.
  • Google fonts (Jost, Red Hat Display, Cinzel) used.
  • Clean code with comments, easy to customize.
  • Well-documented with free support 24/7.
  • Free update support.

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. More Information Gulp docs
  3. Unzip the template package and cd to Marota 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 08 2023)

  1. Initial release