Getting started

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.

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

5. Email sending configuration

<?php
    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.
            http_response_code(200);
            # 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.
            http_response_code(500);
            # 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.
        http_response_code(403);
        # echo "There was a problem with your submission, please try again.";   
        # Back to contact
        header("Location: ../contact.html?code=403");

    }
?>

<script>
    //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
        document.getElementById('msg_alert').classList.remove("d-none");

        //If the message is sent successfully
        if (code == '200') {
            document.getElementById('msg_alert').classList.add("alert-success");
            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').classList.add("alert-danger");
            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').classList.add("alert-danger");
            document.getElementById('msg_alert').innerHTML = "There was a problem with your submission, please try again.";
        }
    }
</script>

6. Changelog