## Features.

The main advantages that you will get.

#### Trendy Design

Clean, minimalist and ultra-modern design.

#### Amazing animation

Beautiful effects and smooth animation will make your site even better.

#### Detailed UI

Attention and care to the details of the interface.

#### Retina Ready

Impeccable view of retina screen.

#### Blog Include

A beautiful and elegant blog for your events and news.

#### Coding

Modern coding technologies: SASS, BEM – will make your project flexible.

## Customizing.

Some template settings that will easily help you customize it.

##### How to change calendar localizatione?

Open the html pages where the calendar is used (home.html, home_v2.html, rooms.html, rooms_v2.html, room_details.html, room_details_v2.html, reservations.html) in any code editor and at the end after the line:

    <script src="assets/js/common.js"></script>

Add this line:

    <script src="https://npmcdn.com/flatpickr/dist/l10n/en.js"></script>

You can find the localization file here

Next, open the common.js file and find section 11. DatePicker. In this section, find two lines:

    "locale": "en"

Change the language code "en" to your

##### How to change the max number of adults and kids?

Open the html page where there is a choice of the number of people (home.html, home_v2.html, rooms.html, rooms_v2.html, room_details.html, room_details_v2.html, reservations.html) in any code editor and find the lines:

- `min="1"` – This is the minimum number of people.
- `max="8"` – The maximum number of people.

    <input type="number" class="inputText js-quantity-input" id="person-adult" name="person-adalt" value="0" min="1" max="8" readonly="readonly">
    <input type="number" class="inputText js-quantity-input" id="person-kids" name="person-kids" value="0" min="0" max="8" readonly="readonly">

##### How to change video in popup (home)?

Open the home.html page in any code editor and find the line at the end:

- `HSsqzzuGTPo` – This is a unique code for youtube video.

    <div class="youtube-popup" data-yt-url="https://www.youtube.com/embed/HSsqzzuGTPo?autoplay=1&"></div>

##### How to add a review block on the home page?

Open the home.html, home_v2.html page in any code editor and find the blocks with reviews, as in the example below. Copy it and paste after the last block.

- `Short title` – Short review title.
- `Text review...` – Detailed review text.
- `assets/images/photo-author.jpg` – The path to the photo of the author of the review.
- `Review author` – Reviewer's full name.
- `from Location` – Author country.

    <!-- Testimonials item -->
    <div class="testimonials-item swiper-slide">
        <h4 class="title title--h4">Short title</h4>
        <p class="testimonials-item__caption">— Text review...</p>
        <div class="author-wrap">
            <div class="author-picture"><img class="cover" src="assets/images/photo-author.jpg" alt="Review author" /></div>
            <div>
                <div class="author-name">Review author</div>
                <div class="author-country">from Location</div>
            </div>
        </div>
    </div>

##### Slider setup on home v2 page

Open the home_v2.html page in any code editor and at the beginning find the section <! - Slider ->

The slider consists of two blocks: text and image.

- `Short title` – The title of the slide. If you have bling headers, then the font size will need to be reduced in the style.css file, class .intro-slider__caption .title
- `Description` – Some description for the slide

    <!-- Caption 1 -->
    <div class="swiper-slide">
        <h1 class="title js-text-wave">Short title</h1>
        <p class="description down-up"><span>Description</span></p>
    </div>

- `assets/images/image_slide.jpg` – Path to slide image

    <!-- Image 1 -->
    <div class="swiper-slide">
        <div class="coverSlider js-parallax js-image" data-image="assets/images/image_slide.jpg"></div>
    </div>

If you want to change the autoplay slide delay time, open the common.js file and find section 15. Slider, subsection // Intro slider. Find the parameter delay: 4000 a little lower and change the number 4000 to any other (4000 = 4 seconds).

If you want to disable autoplay, simply delete these lines:

    autoplay: {
        disableOnInteraction: false,
        delay: 4000
    },

##### How to set up a price filter?

Open common.js file and find section 07. Slider price

- `prefix: '$ '` – Here you can change the currency prefix.
- `start: [49, 129],` – Starting price range (default).
- `'min': [49], 'max': [259]` – Minimum and maximum price

    ...
    var priceFormat = wNumb({
        decimals: 0,
        mark: '.',
        prefix: '$ '
    });

    noUiSlider.create(sliderPrice, {
        start: [49, 129],
        step: 1,
        connect: true,
        format: priceFormat,
        range: {
            'min': [49],
            'max': [259]
        }
    });
    ...

##### Item room

- `image_room.jpg` – The path to the image of the room.
- `Room name` – Room Name
- `$0 night` – Price for one night.
- `Location` – Room location
- `0 sq.ft.` – Room Area
- `0 Bedrooms` – The number of bathrooms in the room.
- `Label` – If necessary, you can use the label, for example, "Popular", "Sale", etc.

    <!-- ItemRoom extended -->
    <div class="itemRoom itemRoom__extended">
        <span class="badge">Label</span>
        <figure class="itemRoom__img-wrap">
            <a class="itemRoom__link" href="room_details.html">
                <img class="cover lazyload" src="assets/images/image_room.jpg" alt="room" />
            </a>
            <div class="itemRoom__details">
                <h4 class="title title--h4">Room name</h4>
                <div class="itemRoom__price">$0<span>night</span></div>
            </div>
        </figure>

        <div class="itemRoom__details-extended">
            <div class="item-extended"><i class="icon-map-pin"></i>Location</div>
            <div class="item-extended mr-4"><i class="icon-maximize"></i>0 sq.ft.</div>
            <div class="item-extended"><i class="icon-bed"></i>0 Bedrooms</div>
        </div>
    </div>

##### Ratings on the room detail page

- `aria-valuenow="100"` – 100 is 100% of the rating scale. Minimum value 0%, maximum 100%
- `Name progressbar` – The name for the rating, for example: Comfort, Location, Staff, etc.
- `Number/Percent` – The number or percentage of the current rating for this category.

    <!-- Progress bar -->
    <div class="col-12 col-md-6 progressBar">
        <div class="progressBar__label">Name progressbar<span class="">Number/Percent</span></div>
        <div class="progressBar__wrap">
            <div class="progressBar__current" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>

##### Review block on room detail page

- `Short title` – Short review title.
- `Text review...` – Detailed review text.
- `assets/images/photo-author.jpg` – The path to the photo of the author of the review.
- `Review author` – Reviewer's full name.
- `from Location` – Author country.

    <!-- Review item -->
    <div class="testimonials-item testimonials-item--v2 js-scroll-show">
        <h4 class="title title--h5">Short title</h4>
        <p class="testimonials-item__caption">Text review...</p>
        <div class="author-wrap">
            <div class="author-picture"><img class="cover" src="assets/images/photo-author.jpg" alt="Review author" /></div>
            <div>
                <div class="author-name">Review author</div>
                <div class="author-country">from Location</div>
            </div>
        </div>
    </div>
    <!-- /Review item -->

##### Setting on Map

1. Register with Mapbox and get "Access tokens"

2. Open the mapbox.init.js file and paste your "Access Token" into the line (YOUR-ACCESS-TOKEN):

    mapboxgl.accessToken = 'YOUR-ACCESS-TOKEN';

3. To configure your coordinates on the map, use the online mapbox maker

##### Item service on the page about us

- `01` – Service number (decorative element).
- `Service Name` – Service name
- `Description` – Service name

    <!-- Item Approach -->
    <div class="row item-approach" data-approach="01">
        <div class="col-12 col-lg-6">
    		<h3 class="title title--h3 js-lines">Service Name</h3>
    	</div>
    	<div class="col-12 col-lg-6">
    		<p class="paragraph js-scroll-show">Description</p>
        </div>
    </div>

##### Item staff on the page about us

- `Full Name` – Full name of company employee.
- `Position` – Position of company employee
- `assets/images/photo-person.jpg` – The path to a photograph of a company employee.

    <!-- Item person -->
    <div class="col-12 col-md-6 col-lg-4 js-scroll-show">
        <div class="itemPerson">
            <figure class="itemPerson__img-wrap">
                <img class="cover lazyload" src="assets/images/photo-person.jpg" alt="Full Name" />
            </figure>
            <div class="itemPerson__details">
                <h4 class="title title--h4">Full Name</h4>
                <span class="title title--overhead-small">Position</span>
            </div>
        </div>
    </div>

##### Item blog

- `Title` – Title news.
- `Category` – Category news.
- `Date` – Date news.
- `assets/images/image_news.jpg` – The path to the news image.

    <!-- itemNews -->
    <div class="itemNews category-adventure js-scroll-opacity">
        <figure class="itemNews__img-wrap">
            <a class="itemNews__link" href="#">
                <div class="itemNews__date">Category <span>- Date</span></div>
                <img class="cover lazyload" src="assets/images/image_news.jpg" alt="" />
            </a>
        </figure>
        <div class="itemNews__details">
            <h4 class="title title--h4 js-lines">Title</h4>
        </div>
    </div>

##### Sort blog/gallery pages

Content sorting system available on blog.html and gallery.html

- `data-filter=".category-name-1"` – Unique class for category.
- `Category Name` – The name of the corresponding category, for example, "News", "Events", etc.

    ...
    <ul class="filter">
        <li class="filter__item active" data-filter="*"><a class="filter__link active" href="#filter">All</a></li>
        <li class="filter__item" data-filter=".category-name-1"><a class="filter__link" href="#filter">Category Name</a></li>
        <li class="filter__item" data-filter=".category-name-2"><a class="filter__link" href="#filter">Category Name</a></li>
        <li class="filter__item" data-filter=".category-name-3"><a class="filter__link" href="#filter">Category Name</a></li>
        <li class="filter__item" data-filter=".category-name-4"><a class="filter__link" href="#filter">Category Name</a></li>
    </ul>
    ...

After adding or editing filters, you also need to add or update a class for item's

- `category-name-1` – The class that we added to the filter.

    <!-- itemNews -->
    <div class="itemNews category-name-1 js-scroll-opacity">
        <figure class="itemNews__img-wrap">
            <a class="itemNews__link" href="#">
                <div class="itemNews__date">Category <span>- Date</span></div>
                <img class="cover lazyload" src="assets/images/image_news.jpg" alt="" />
            </a>
        </figure>
        <div class="itemNews__details">
            <h4 class="title title--h4 js-lines">Title</h4>
        </div>
    </div>

##### Item gallery

- `Title` – The name of the image.
- `Category` – Category of image.
- `assets/images/original_image.jpg` – The path to the original image (high resolution image).
- `assets/images/preview_image.jpg` – The path to the preview image.
- `1920x1080` – Resolution of the original image. This is an important parameter.

    <!-- ItemGallery -->
    <figure class="itemGallery category-name-1 js-scroll-opacity">
        <a class="itemGallery__link" href="assets/images/original_image.jpg" data-size="1920x1080">
            <img class="cover lazyload" src="assets/images/preview_image.jpg" alt="Title" />
        </a>
        <div class="itemGallery__details">
            <span class="title title--overhead">Category</span>
            <h4 class="title title--h4">Title</h4>
        </div>
    </figure>

##### Input field

##### Input field + icon

- `Input Label` – Name for input field.
- `type="text"` – The type of the field can be: text, email, number, tel, etc. See the full set on the Internet.
- `inputText__icon` – The class for the input field containing the icon. In this case, it is mandatory.
- `id="name"` – Unique identifier associated with the label associated with it through the "for" attribute.
- `placeholder="Text"` – Placeholder for the input field. This is the text that we see by default in an empty input field. For example: "Enter your name ..."
- `required="required"` – If the input field is required - use this attribute, otherwise it is not needed.
- `autocomplete="off"` – This attribute helps to fill in the form fields with the text that was entered in them earlier. Valid Values: "on" / "off"
- `icon-user` – class for displaying a specific icon in the input field. Full set of icons.

    <div class="form-group">
        <label class="label" for="name">Input Label</label>
        <div class="position-relative">
            <input type="text" class="inputText inputText__icon" id="name" name="name" placeholder="Text" required="required" autocomplete="off">
            <span class="input-icon icon-user"></span>
        </div>
    </div>

##### Simple Input field

    <div class="form-group">
        <label class="label" for="name">Input Label</label>
        <input type="text" class="inputText" id="name" name="name" placeholder="Text" required="required" autocomplete="off">
    </div>

##### Dual Input field

    <div class="form-group">
        <label class="label" for="value-1">Input Label</label>
        <div class="form-dual">
            <div class="form-dual__left">
                <input type="text" class="inputText" id="value-1" name="name-1" placeholder="Text" autocomplete="off">
            </div>
            <div class="form-dual__right">
                <input type="text" class="inputText" id="value-2" name="name-2" placeholder="Text" autocomplete="off">
            </div>
        </div>
    </div>

##### Textarea

- `Textarea Label` – Name for textarea.
- `id="value-1"` – Unique identifier associated with the label associated with it through the "for" attribute.
- `placeholder="Text"` – Placeholder for the textarea. This is the text that we see by default in an empty textarea. For example: "Enter your message..."
- `rows="4"` – The height of the text field, which is determined by the number of lines displayed without scrolling the content.
- `required="required"` – If the textarea is required - use this attribute, otherwise it is not needed.

    <div class="form-group">
        <label class="label" for="value-1">Textarea Label</label>
        <textarea class="textarea form-control" id="value-1" name="name" placeholder="Text" rows="4" required="required"></textarea>
    </div>

##### Select

- `Label select` – Name for select.
- `id="value-1"` – Unique identifier associated with the label associated with it through the "for" attribute.

    <div class="form-group">
        <label class="label" for="value-1">Label select</label>
        <select id="value-1" class="custom-select">
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </div>

##### Checkbox & Radio buttons

##### Checkbox

- `Label checkbox` – Name for checkbox.
- `for="defaultCheck1"` – Unique identifier associated with the label associated with it through the "for" attribute.

    <div class="custom-control custom-checkbox">
        <input class="custom-control-input" type="checkbox" value="" id="defaultCheck1">
        <label class="custom-control-label" for="defaultCheck1"> Label checkbox</label>
    </div>

##### Radio

    <div class="custom-control custom-radio">
      <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
      <label class="custom-control-label" for="customRadio1"> Label radio</label>
    </div>

##### Buttons

- `btn__large` – A class defining a large button size.
- `btn__medium` – A class that defines the average size of a button.
- `btn__small` – A class defining a small button size.
- `btn__second` – A class for secondary buttons.
- `btn--white` – A class making a white button.

    <button type="submit" class="btn btn__medium">Button</button>

##### Icon button

- `btn-icon-right` – The class determines that the icon is located on the right side. If the icon is on the left, then the class should be: "btn-icon-left" and, accordingly, the tag "i" should be in front of the button text.
- `icon-arrow-special` – The class that defines the icon Full set of icons.

    <button type="submit" class="btn btn__large">Button <i class="btn-icon-right icon-arrow-special"></i></button>

##### Enable RTL

1. To activate RTL in the template, open the assets/style/vendors/rtl folder and copy the contents to the assets/style/vendors/ folder with a replacement.

2. Open all html pages in the editor (Sublime Text 3, Notepad ++ b etc.). After the line:

    <link rel="stylesheet" type="text/css" href="style/style.css"/>

Paste:

    <link rel="stylesheet" type="text/css" href="style/style-rtl.css"/>

## 16 Pages Included.

Let's see what we have. Go!

##### 01. Homepage

##### 02. Homepage v2

##### 03. About Us

##### 04. Rooms

##### 05. Rooms v2

##### 06. Room Details

##### 07. Room Details v2

##### 08. Reservations

##### 09. Payment

##### 10. Reservations confirm

##### 11. Blog

##### 12. Post

##### 13. Gallery

##### 14. Contact

##### 15. 404

##### 16. Text page

## Credit.

Libraries and plugins that were used for the template.

Plugin | Description
--- | ---
jQuery | jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
Bootstrap | Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
flatpickr | flatpickr is a lightweight and powerful datetime picker.
object-fit-images | Polyfill object-fit/object-position on img: IE9, IE10, IE11, Edge, Safari, ...
lazysizes | High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
PhotoSwipe | JavaScript gallery, no dependencies.
Countimator | Animated counter
nouislider | JavaScript Range Slider
wNumb | JavaScript Number & Money formatting
Sticky-kit | A jQuery plugin for creating smart sticky elements
Validator | The Validator plugin offers automatic form validation configurable via mostly HTML5 standard attributes. It also provides an unobtrusive user experience, because nobody likes a naggy form.
Autosize | A small, stand-alone script to automatically adjust textarea height.
Swiper | Is most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.
Masonry | Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
imagesLoaded | Detect when images have been loaded.
ScrollMagic | The javascript library for magical scroll interactions.
Jarallax | Smooth parallax scrolling effect for background images, videos and inline elements.

Other | Description
--- | ---
Bootstrap 4 (CSS) | Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Google Fonts | Making the web more beautiful, fast, and open through great typography.
Unsplash | Free high-resolution photos.

## Changelog.

All changes and updates you can learn from the Changelog.

    /* Version 1.1 - Mar 04th, 2020 */
    - Add working reservations form

    /* Version 1.0 - Feb 10th, 2020 */
    - Initialization release