I. Get Started

I.1. Document Version

Document version: 1.2

Updated: Sep 06 2023

I.2. Overview

I.2.1. Sarila - Luxury Hotel Bootstrap Template

The Sarila is a luxury, modern and clean hotel template. This template is suitable for building Hotels, Resorts, Hostel, Homestay, Spa, and Restaurant websites.

This template includes 22 demo pages, written in valid HTML & CSS3 code based on Bootstrap Framework and used the plugins: AOS, Bootstrap, flatpickr, hotel-datepicker, imagesLoaded, kursor, masonry, plyr, Masonry, swiper... (See more in Credits).

I.2.2. Template Features

  • 22 demo pages
  • Animations on scroll
  • Booking Form
  • Book Services Modal popup
  • Check room form
  • Clean Code Structure
  • Color options
  • Easy to Customize
  • Free updates
  • Font icons
  • Fully Responsive & Mobile Friendly
  • Google fonts
  • Image/Video background options
  • Lightbox for images and videos
  • Modern Image/Video Gallery
  • Retina-ready
  • SEO optimized
  • Sticky header
  • Valid HTML5 & CSS3
  • Video player HTML5, YouTube and Vimeo
  • Well Documentation

I.3. Credits

I.3.1. Plugins & Library

Name Description
Aos Animate On Scroll Library
Bootstrap The most popular CSS, JS Framework for developing websites
Flatpickr The lightweight and powerful datetime picker.
GLightbox The lightbox with mobile and video support
Hotel Datepicker A pure Javascript date range picker for hotels
imagesLoaded Detect when images have been loaded
Kursor Cursor style with javascript and css
Masonry The JavaScript grid layout library
Plyr The media player for Html5 Video, Audio, YouTube and Vimeo
swiper The Most Modern Mobile Touch Slider

I.3.2. Fonts

Google Fonts: Albert Sans and Caudex

I.3.3. Icon fonts

<i class="ficon ficon-24hour-frontdesk"></i>

<i class="ficon ficon-24hour-room-service"></i>

<i class="ficon ficon-24hour-security"></i>

<i class="ficon ficon-iron"></i>

<i class="ficon ficon-adults-line"></i>

<i class="ficon ficon-air-conditioning"></i>

<i class="ficon ficon-alarm-clock"></i>

<i class="ficon ficon-bed"></i>

<i class="ficon ficon-calendar-onmap"></i>

<i class="ficon ficon-camera-hover"></i>

<i class="ficon ficon-chat"></i>

<i class="ficon ficon-check-valid-state"></i>

<i class="ficon ficon-child-line"></i>

<i class="ficon ficon-city-view"></i>

<i class="ficon ficon-closet"></i>

<i class="ficon ficon-clothes-washer-free"></i>

<i class="ficon ficon-coffee-tea-maker"></i>

<i class="ficon ficon-complimentary-bottled-water"></i>

<i class="ficon ficon-continental-breakfast"></i>

<i class="ficon ficon-daily-housekeeping"></i>

<i class="ficon ficon-extra-bed"></i>

<i class="ficon ficon-fan"></i>

<i class="ficon ficon-first-aid-kit"></i>

<i class="ficon ficon-flights-pin"></i>

<i class="ficon ficon-free-welcome-drink"></i>

<i class="ficon ficon-free-wifi-in-all-rooms"></i>

<i class="ficon ficon-gym"></i>

<i class="ficon ficon-hair-dryer"></i>

<i class="ficon ficon-hamburger-menu"></i>

<i class="ficon ficon-kitchenette"></i>

<i class="ficon ficon-line-close"></i>

<i class="ficon ficon-linens"></i>

<i class="ficon ficon-lockers"></i>

<i class="ficon ficon-luggage-storage"></i>

<i class="ficon ficon-microwave"></i>

<i class="ficon ficon-mini-bar"></i>

<i class="ficon ficon-minus-thin"></i>

<i class="ficon ficon-mirror"></i>

<i class="ficon ficon-plus-thin"></i>

<i class="ficon ficon-pool"></i>

<i class="ficon ficon-private-bath"></i>

<i class="ficon ficon-refrigerator"></i>

<i class="ficon ficon-regular-cosmetics"></i>

<i class="ficon ficon-restaurant"></i>

<i class="ficon ficon-satellite-television"></i>

<i class="ficon ficon-search-box"></i>

<i class="ficon ficon-shower-and-bathtub"></i>

<i class="ficon ficon-shower"></i>

<i class="ficon ficon-smoke-detector"></i>

<i class="ficon ficon-smoking-allowed"></i>

<i class="ficon ficon-spas"></i>

<i class="ficon ficon-sqm"></i>

<i class="ficon ficon-telephone"></i>

<i class="ficon ficon-thin-arrow-down"></i>

<i class="ficon ficon-thin-arrow-left"></i>

<i class="ficon ficon-thin-arrow-right"></i>

<i class="ficon ficon-thin-arrow-up"></i>

<i class="ficon ficon-thin-circle-arrow-left"></i>

<i class="ficon ficon-time-icon"></i>

<i class="ficon ficon-toiletries"></i>

<i class="ficon ficon-towels"></i>

<i class="ficon ficon-umbrella"></i>

<i class="ficon ficon-wake-up-service"></i>

<i class="ficon ficon-wooden-parqueted-flooring"></i>

<i class="ficon ficon-x-icon"></i>

<i class="ficon ficon-zoom-bold"></i>

I.3.4. Images & Videos

All images in Sarila can be used only on demo version. You will need to upload your own images for your site.

We used the demo images/videos in the Sarila from:
Behance.net (Nemanja Mijatovic and raum 228)

I.4. Installation & Customization

Sarila is a static HTML template. If you want to publish as HTML, you can edit and publish with any editor (Visual Studio Code, Notepad++...). If you want to publish as a dynamic website, you can use this template to build websites with popular website technologies such as PHP, ASP.NET, JSP or Wordpress Platform...

Note! Publishing a static website or building a dynamic website requires you to have knowledge of website technologies (HTML, CSS, Javascript, PHP, ASP.NET...etc)

I.5. Email sending configuration

To receive Email from contact page, you need to replace email booking@example.com with your email in 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 = "booking@example.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");


II. Structure

II.1. Folders

  • Sarila All files (html template & document files)
    • Docs Contains Technical Documentation and User Manual
    • html Html template files
      • assets Contains CSS (CSS files), Js (JS files), Img (Website Images), Vendor (Vendor files) folders
        • css Contains Custom CSS files
        • img Contains Website Images
          • about Contains about images
          • avatars Contains avatars images
          • gallery Contains gallery images
          • hero Contains hero images
          • News Contains news images
          • rooms Contains rooms images
          • services Contains services images (restaurant, spa...)
          • team Contains team images
          • tours Contains tours images
          • videos Contains videos
        • js Contains main js files
        • vendor Contains vendor's CSS, JS files
          • aos Contains Aos plugin files
          • bootstrap Contains Bootstrap files
          • flatpickr Contains flatpickr plugin files
          • glightbox Contains gLightbox plugin files
          • hotel-datepicker Contains hotel datepicker plugin files
          • hotel-icon Contains hotel icons files
          • imagesLoaded Contains ImagesLoaded plugin files
          • kursor Contains kursor files
          • masonry Contains Masonry plugin files
          • plyr Contains Plyr Player plugin files
          • social-icon Contains Socialicon files
          • swiper Contains swiper plugin files

II.2. Pages

Pages Description
Homepage 1, 2, 3
About.html About Us page
Rooms and Detail rooms page
Reservation, Customer information, Confirm, successful page
Spa.html Spa & wellness page
Restaurant.html Restaurant page
Tour categories, Tour list, detail tour page
News list, detail post page
Gallery.html Photo/Video gallery page
Contact.html Contact us page
400.html Error 404 page

II.3. Main Blocks

Here are the main blocks on the pages

II.3.1. Header

<header id="header" class="header">
    <div class="header-box">
        <!-- Top Bar -->
        <div class="clearfix top-bar pd-left-right-50px">
        <!-- Top Bar -->
        <!-- Logo & Nav -->
        <div class="clearfix logo-nav-box pd-left-right-50px">
        <!-- Logo & Nav -->

II.3.2. Main page

<main id="main">

II.3.3. Footer

<footer id="footer" class="footer pd-left-right-50px">
    <div class="container-fluid">
        <!-- Footer top -->
        <div class="footer-top">
        <!-- Footer top -->
        <!-- Footer Bottom -->
        <div class="footer-bottom">
        <!-- Footer Bottom -->

II.4. CSS & JS Files

II.4.1. CSS

Files Paths Description
main.css assets/css The main css file of the website
responsive.css assets/css The responsive css file
aos.min.css assets/vendor/aos The aos css file
bootstrap.min.css assets/vendor/bootstrap The bootstrap css file
flatpickr.min.css assets/vendor/flatpickr The flatpickr css file
glightbox.min.css assets/vendor/glightbox The glightbox css file
hotel-datepicker.min.css assets/vendor/hotel-datepicker The hotel datepicker css file
kursor.min.css assets/vendor/kursor The kursor css file
plyr.min.css assets/vendor/plyr The plyr player css file
pe-icon-social.min.css assets/vendor/social-icons The social icons css file
swiper-bundle.min.css assets/vendor/swiper The swiper css file

II.4.2. JS

Files Paths Description
main.js assets/js The main js file of the website
bootstrap.bundle.min.js assets/vendor/bootstrap The bootstrap js file
fecha.min.js assets/vendor/hotel-datepicker The fecha js file
flatpickr.min.js assets/vendor/flatpickr The flatpickr js files
glightbox.min.js assets/vendor/glightbox The glightbox js file
hotel-datepicker.min.js assets/vendor/hotel-datepicker The hotel datepicker js file
imagesloaded.min assets/vendor/imagesloaded The images loaded js file
kursor.min.js assets/vendor/kursor The kursor js file
masonry.min.js assets/vendor/masonry The masonry js file
plyr.min.js assets/vendor/plyr The plyr player js file
swiper-bundle.min.js assets/vendor/swiper The swiper js file

III. Changelog

III.1. Initial release

Oct 03 2023