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:
Pexels.com
Freepik.com
Unsplash.com
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:
<?php
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.
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");
}
?>