Documentation.

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

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">

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>

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>

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
},

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]
    }
});
...

• 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>

• 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>

• 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 -->

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

• 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>

• 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>

• 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>

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>

• 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 + 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 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>

• 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

• 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>

• 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>

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"/>