Getting started

1. Document

This document will help you get started with Lavita. 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 with the Email Themenix.com@gmail.com.

2. Overview

Lavita - Luxury Hotel Bootstrap Template

Lavita is a modern and luxurious Hotel HTML Template. It has a valid HTML & CSS3 code with clear comments, which makes it easy to edit the code (you can use Node.js/Gulp/SASS). Lavita also uses the Bootstrap Framework, which makes it fully adaptable and compatible with all devices.

The Lavita Template has 33 well-designed HTML pages, with various options for customization. It does not use Jquery, but a Pure Javascript Plugin that makes the website load faster. Even without Jquery, Lavila has all the features you need in HTML pages to create a professional hotel website.

Lavita uses pure Javascript frameworks and plugins: Bootstrap, Dselect, Flatpickr, Glightbox, Plyr, TinySlider, Hotel-datePicker, Fecha, Scrollcue, and Hotelicon…

Lavita Features

• 33 HTML pages for a luxury hotel website
• 10 Color options (Brown, Blue, Indigo, Purple, Pink, Red, Orange, Yellow, Green, Teal, Cyan)
• For hotel, resort, and homestay websites
• Guest account (Register, Login, Dashboard, Booking/Details, Profile)
• Modal style forms (Login/Register/Forgot password)
• 3 styles of room pages (Classic, Modern, Luxury)
• 2 options of room details (Luxury and Minimalist)
• Check room/availability form (Checkin/Checkout and Guests)
• Step-by-step booking form (4 steps)
• Tour pages (Categories, List, Single)
• Extra services pages (Meetings & events, Restaurant & bar, Spa & wellness, Airport pickup)
• Service booking form (Tour, Spa, Table, Service)
• Hero banner with 3 options (Carousel, Image, Video)
• Carousel for rooms, posts, services, and testimonials (Tiny-slider)
• Sticky header (Light/Dark)
• Dropdown/Mega menu (Light/Dark options)
• Language and Currency modal
• Full blog/post pages
• Modern photo gallery
• Image/Video background options
• Lightbox for images and videos (gLightbox)
• Video player for HTML5, YouTube, and Vimeo (Plyr)
• Node.js, Gulp, Bootstrap 5.3, and SASS
• Package.json/Gulpfile.js/SCSS files included
• Bootstrap Framework based code (Bootstrap 5.3)
• Maximum Bootstrap features inherited
• Valid HTML5 & CSS3
• No Jquery/Zero Dependency (Pure Javascript Plugins)
• Standard SEO optimization
• Fully Responsive & Mobile Friendly
• Offcanvas mobile menu and contact info
• Scroll animations with Scrollcue
• Font icons (Hotel font icons)
• Google fonts (Jost, Raleway)
• Clean and commented code structure
• Easy to customize
• Well documented
• 24/7 free support
• Free 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