Getting started

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

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