Documentation

Moliva - Travel & Tours Bootstrap HTML Template

  • Version: 1.1
  • Author: Themenix
  • Created: Aug 03 2024
  • Update: Sep 06 2024

If you have any questions that aren't covered in this help file, please feel free to reach out via the Contact Form.

1. Getting Started

1.1. Installation

Unzip the downloaded package and open the moliva-1.1/html folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.

Note: You need to upload the files according to the structure in the moliva-1.1/html directory. You can upload all files or specific .html files as per your requirements.

1.2. Project Structure

  • 📁 moliva-1.1 Contains all directories and files
    • 📁 docs Contains documentation files
    • 📂 html Contains project directories and files
      • 📁 assets Contains the asset directories and files
        • 📁 css Contains the css files
        • 📁 fonts Contains the font files
        • 📁 img Contains the image files
        • 📁 js Contains the js files
        • 📁 media Contains the video files
        • 📁 php Contains the php files
      • 📄index.html - Homepage 1
      • 📄home-2.html - Homepage 2
      • 📄home-3.html - Homepage 3
      • 📄about.html - About us page
      • 📄contact.html - Contact us page
      • 📄destinations-1.html - Destinations page 1
      • 📄destinations-2.html - Destinations page 2
      • 📄destinations-3.html - Destinations page 3
      • 📄tour-packages-1.html - Tour packages page 1
      • 📄tour-packages-2.html - Tour packages page 2
      • 📄tour-packages-3.html - Tour packages page 3
      • 📄single-tour-1.html - Single tour page 1
      • 📄single-tour-2.html - Single tour page 2
      • 📄single-tour-3.html - Single tour page 3
      • 📄post-list.html - post list page
      • 📄single-post.html - single post page
      • 📄shopping-cart.html - Shopping cart page
      • 📄checkout.html - Checkout page
      • 📄completed.html - completed page
      • 📄dashboard.html - dashboard page
      • 📄booking.html - booking list page
      • 📄booking-details.html - Booking detail page
      • 📄wishlist.html - Wishlist page
      • 📄settings.html - Homepage
      • 📄security.html - Security page
      • 📄login.html - Login page
      • 📄register.html - Register page
      • 📄forgot-password.html - Forgot password page
      • 📄new-password.html - Create new password page
      • 📄404.html - Error 404 page
      • 📄coming-soon.html - Coming soon page

1.3. HTML Structure

Moliva follows a simple and easy to customize coding structure.

<!DOCTYPE html>
<html lang="en">

<!-- Head -->
<head>
    ...
</head>
<!-- /Head -->

<body>

    <!-- Preloader -->
    <div id="preloader">
        ...
    </div>
    <!-- /Preloader -->

    <!-- Header -->
    <header id="header" data-aos="fade">
        ...
    </header>
    <!-- /Header -->

    <!-- Main -->
    <main>
        ...
    </main>
    <!-- /Main -->

    <!-- Footer -->
    <footer class="footer p-top-90 p-bottom-90" data-aos="fade">
        ...
    </footer>
    <!-- /Footer -->

    <!-- JavaScript -->
    ...
    <!-- /JavaScript -->

</body>

</html>

1.4. Customization

To customize the web template, you can edit:

  • The .html files in the moliva-1.1/html directory,
  • The main.css or main.scss file can be found in the moliva-1.1/html/assets/css/ directory. If you modify the main.scss file to compile into the main.css file, you can use various tools. However, in this project, I am using Visual Studio Code with the Live SASS Compiler extension. If you want to use this tools, you can download Visual Studio Code development environment from this link: https://code.visualstudio.com/download. You can find a guide on how to use the Live SASS Compiler extension at this link: https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass.
  • The main.js file in the moliva-1.1/html/assets/js/ directory.

1.5. Logo Settings

To change the logo, you can find it in the <header> and <footer> tags

Main logo
<a class="navbar-brand" href="./index.html">
    <img src="./assets/img/logos/logo.png" srcset="./assets/img/logos/logo@2x.png 2x" alt="">
</a>
Mobile Menu Logo
<a href="./index.html" class="d-inline-block">
    <img src="./assets/img/logos/menu-logo.png" srcset="./assets/img/logos/menu-logo@2x.png 2x" alt="">
</a>
Footer Logo
<a href="./index.html" class="brand-img">
    <img class="me-4" src="./assets/img/logos/footer-logo.png" srcset="./assets/img/logos/footer-logo@2x.png 2x" alt="">
</a>

1.6. Email sending configuration

Note: The send email feature in Demo has been turned off to prevent misuse for harmful purposes!

To receive Email from contact page, you need to replace email example@yourdomain.com with your email in moliva-1.1/html/assets/php/mail.php file.

You can see the code of the mail.php file below:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $mail_to = "example@yourdomain.com";
    $subject = trim($_POST["subject"]);
    $yourname = trim($_POST["yourname"]);
    $email = trim($_POST["email"]);
    $message = trim($_POST["message"]);

    $content = "Name: $yourname\nEmail: $email\nMessage:\n$message\n";
    $headers = "From: $yourname <$email>";

    $success = mail($mail_to, $subject, $content, $headers);

    $code = $success ? '200' : '500';
    header("Location: ../../contact.html?code=$code");
    exit;
} else {
    header("Location: ../../contact.html?code=403");
    exit;
}
?>

Next, add the action attribute with the path assets/php/mail.php to the form tag in the contact.html page.

You can see the form tag code below:

<form class="needs-validation" method="post" novalidate="" action="assets/php/mail.php">
    <div class="border-bottom pb-4 mb-4">
        <h2 class="text-white mb-0">Looking for any help?</h2>
    </div>
    <div class="alert d-none" role="alert" id="msg_alert"></div>
    <div class="form-floating mb-4">
        <input id="txtYourName" type="text" name="yourname" class="form-control shadow-sm" placeholder="Your Name" required>
        <label for="txtYourName">Your Name *</label>
    </div>
    <div class="form-floating mb-4">
        <input id="txtEmail" type="email" name="email" class="form-control shadow-sm" placeholder="Email" required>
        <label for="txtEmail">Your Email *</label>
    </div>
    <div class="form-floating mb-4">
        <input id="txtSubject" type="text" name="subject" class="form-control shadow-sm" placeholder="Subject" required>
        <label for="txtSubject">Subject *</label>
    </div>
    <div class="form-floating mb-4">
        <textarea id="txtMessage" name="message" class="form-control shadow-sm" placeholder="Message" style="height: 150px" required></textarea>
        <label for="txtMessage">Message *</label>
    </div>
    <button type="submit" class="btn btn-light mnw-180">
        <i class="hicon hicon-email-envelope"></i>
        <span> Send message</span>
    </button>
    <div class="row">
        <div class="col-12">
        </div>
    </div>
</form>

2. Styles

2.1. Theme color

To customize the theme color, you need to modify the --bs-primary and --bs-primary-rgb variables in the main.css file located in the moliva-1.1/assets/css/ directory. 

--bs-primary: #6cb015;
--bs-primary-rgb: 108, 176, 21;

2.2. Fonts

Moliva uses the Google Font Outfit. To change the font, you need to modify the import line @import url(https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap) and update the variable --bs-font-sans-serif: "Outfit", sans-serif in the main.css file located in the moliva-1.1/assets/css/ directory. 

/* Import Fonts*/
@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap);

/* Font variable */
--bs-font-sans-serif: "Outfit", sans-serif;
Learn more about Outfit Font

3. Layout

Below are the main components of the page layout such as the header, navbar, main, and footer.

3.1. Header

<!-- Header -->
<header id="header" data-aos="fade">

    <!-- Header Topbar -->
    <div class="header-topbar">
        ...
    </div>
    <!-- /Header Topbar -->

    <!-- Header Navbar -->
    <div class="header-navbar">
        ...
    </div>
    <!-- /Header Navbar -->

</header>
<!-- /Header -->

3.2. Navbar

<!-- Header Navbar -->
<div class="header-navbar">
    <nav class="navbar navbar-expand-xl">
        ...
    </nav>
</div>
<!-- /Header Navbar -->

3.3. Main

<!-- Main content -->
<main>
    ...
</main>
<!-- /Main content -->

4. Content

4.1. Image info

Image Info is a content container, consisting of an image and several small info boxes. These small info boxes can be positioned differently in relation to the image.

Here are the four positions:

4.1.1. Info box on the top right.

Combine using classes .image-info, .image-info-right, .info-top-right 

<div class="image-info image-info-right">                    
    <div class="image-center">
        <img src="./assets/img/about/a2.jpg" srcset="./assets/img/about/a2@2x.jpg 2x" class="rounded w-100" alt="">
    </div>
    <div class="info-top-right">
        <div class="vertical-award rounded shadow-sm">
            <div class="award-content">
                <img src="./assets/img/logos/trip-best.png" srcset="./assets/img/logos/trip-best@2x.png 2x" class="w-100" alt="">
            </div>
            <div class="award-footer">
                <small>Tripadvisor</small>
            </div>
        </div>
    </div>
</div>
4.1.2. Info box on the right bottom.

Combine using classes .image-info, .image-info-right, .info-right-bottom 

<div class="image-info image-info-right">                    
    <div class="image-center">
        <img src="./assets/img/about/a2.jpg" srcset="./assets/img/about/a2@2x.jpg 2x" class="rounded w-100" alt="">
    </div>
    <div class="info-right-bottom">
        <div class="vertical-award rounded shadow-sm">
            <div class="award-content">
                <img src="./assets/img/logos/trip-best.png" srcset="./assets/img/logos/trip-best@2x.png 2x" class="w-100" alt="">
            </div>
            <div class="award-footer">
                <small>Tripadvisor</small>
            </div>
        </div>
    </div>
</div>
4.1.3. Info box on the bottom left.

Combine using classes .image-info, .image-info-right, .info-bottom-left 

<div class="image-info image-info-left">                    
    <div class="image-center">
        <img src="./assets/img/about/a2.jpg" srcset="./assets/img/about/a2@2x.jpg 2x" class="rounded w-100" alt="">
    </div>
    <div class="info-bottom-left">
        <div class="vertical-award rounded shadow-sm">
            <div class="award-content">
                <img src="./assets/img/logos/trip-best.png" srcset="./assets/img/logos/trip-best@2x.png 2x" class="w-100" alt="">
            </div>
            <div class="award-footer">
                <small>Tripadvisor</small>
            </div>
        </div>
    </div>
</div>
4.1.4. Info box on the left top.

Combine using classes .image-info, .image-info-right, .info-left-top 

<div class="image-info image-info-left">                    
    <div class="image-center">
        <img src="./assets/img/about/a2.jpg" srcset="./assets/img/about/a2@2x.jpg 2x" class="rounded w-100" alt="">
    </div>
    <div class="info-left-top">
        <div class="vertical-award rounded shadow-sm">
            <div class="award-content">
                <img src="./assets/img/logos/trip-best.png" srcset="./assets/img/logos/trip-best@2x.png 2x" class="w-100" alt="">
            </div>
            <div class="award-footer">
                <small>Tripadvisor</small>
            </div>
        </div>
    </div>
</div>

4.2. Image Hover

Image Hover is an effect that occurs when hovering over an image. You can choose to either zoom in on the image, display an overlay and show an icon when hovering over the image.

<figure class="image-hover image-hover-overlay image-hover-scale rounded">
    <img src="./assets/img/tours/t1.jpg" srcset="./assets/img/tours/t1@2x.jpg 2x" alt="">
    <i class="hicon hicon-plus-thin image-hover-icon fs-5"></i>
</figure>

.image-hover-scale: class for the zoom-in effect on the image.

.image-hover-overlay: class for the overlay effect on the image.

4.3. Hover Effect

Hover Effect is an effect where, when the mouse is moved over an element, the element will move upwards.

Add the class .hover-effect to elements to apply the hover effect.

<div class="hover-effect">
    <img src="./assets/img/tours/t1.jpg" srcset="./assets/img/tours/t1@2x.jpg 2x" alt="">
</div>

4.4. Bottom overlay

Bottom Overlay is a content container that includes an image and a content section displayed as an overlay at the bottom of the image.

Combine using classes .bottom-overlay, .bottom-overlay-content 

<a href="./tours.html" class="bottom-overlay hover-effect rounded">
    <figure class="image-hover image-hover-overlay">
        <img src="./assets/img/destinations/d4.jpg" srcset="./assets/img/destinations/d4@2x.jpg 2x" alt="">
        <i class="hicon hicon-plus-thin image-hover-icon"></i>
    </figure>
    <div class="bottom-overlay-content">
        <div class="d-flex flex-column me-auto">
                <h3 class="mb-0">Card title</h3>
                <span>Description</span>
            </div>
    </div>
</a>

4.5. Info Card

Info Card is a content container that includes an icon and elements such as a title, description, and link. It also features a hover effect: when you hover over the Info Card, its background color changes from white to the theme color.

To apply the hover effect to an Info Card, you need to add the class .card-hover.

<a href="#" class="info-card card-hover shadow-sm rounded">
    <div class="card-icon">
        <i class="hicon hicon-family-with-teens"></i>
    </div>
    <h3 class="h4 card-title">Group tours</h3>
    <p class="card-desc">
        Join our group tours to explore stunning destinations
        with like-minded travelers. Fun and camaraderie guaranteed.
    </p>
    <span class="card-link">
        <span>View tours</span>
        <i class="hicon hicon-flights-one-ways"></i>
    </span>
</a>

4.6. Mini Card

Mini Card is a small content container that includes an icon and elements such as a title and description. It also features a hover effect: when you hover over the Mini Card, its background color changes from white to the theme color.

To apply the hover effect to an Mini Card, you need to add the class .card-hover.

<a href="#" class="mini-card card-hover shadow-sm rounded">
    <span class="card-icon">
        <i class="hicon hicon-regular-valley hicon-250"></i>
    </span>
    <div class="card-content">
        <h3 class="h5 card-title">Ecotourism &amp; Resort</h3>
        <small class="card-desc">124 tours</small>
    </div>
</a>

4.7. Transparent Card

Transparent Card is a content container with a transparent background and white border. It includes an icon and elements such as a title, description, and link.

<div class="transparent-card rounded hover-effect">
    <div class="card-icon">
        <i class="hicon hicon-family-with-teens"></i>
    </div>
    <h3 class="h5 card-title">Leading travel agency in Moliva</h3>
    <p class="card-desc">
        Top-rated agency in Moliva is renowned for exceptional service and unforgettable travel experiences.
    </p>
</div>

4.8. Float Card

Float Card is a content container that includes an image and a content section that floats below the image.

<div class="float-card">
    <a href="#">
        <figure class="image-hover image-hover-overlay rounded">
            <img src="./assets/img/blog/b1.jpg" srcset="./assets/img/blog/b1@2x.jpg 2x" alt="">
            <i class="hicon hicon-plus-thin image-hover-icon"></i>
        </figure>
    </a>
    <div class="card-content shadow-sm rounded">
        <h3 class="h5 mb-2">Card title</h3>
        <p class="mb-0">
           Description
        </p>
    </div>
</div>

4.9. Hero

Hero is a content container that includes a background image with a dark transparent overlay. It contains elements such as a title, subtitle, description...

4.9.1. Simple

<section class="hero aos-init" data-aos="fade">
    <div class="hero-bg">
        <img src="./assets/img/destinations/d7.jpg" srcset="./assets/img/destinations/d7@2x.jpg 2x" alt="">
    </div>
    <div class="bg-content container">
        <div class="hero-page-title">
            <span class="hero-sub-title">Moliva tours</span>
            <h1 class="display-3 hero-title">
                Destinations
            </h1>
        </div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="./index.html">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Destinations 1</li>
            </ol>
        </nav>
    </div>
</section>

4.9.2. Carousel

Hero Carousel is a combination of a Hero container and a Bootstrap Carousel.

Style 1
<section class="hero" data-aos="fade">
    <h1 class="d-none">Moliva</h1>
    <!-- Carousel -->
    <div id="heroCarousel" class="hero-carousel carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
            <!-- Carousel item -->
            <div class="hero-item carousel-item active">
                <div class="hero-bg">
                    <img src="./assets/img/hero/h2.jpg" srcset="./assets/img/hero/h2@2x.jpg 2x" alt="">
                </div>
                <div class="hero-caption text-sm-start">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 col-xxl-6 col-xl-7 col-md-10">
                                <div class="hero-sub-title">
                                    <span>Explore Moliva</span>
                                </div>
                                <h2 class="display-3 hero-title">
                                    Enjoy the beautiful and romantic nature
                                </h2>
                                <div class="hero-action">
                                    <a href="./destinations-1.html" class="btn btn-outline-light btn-uppercase mnw-180 me-4">
                                        <span>Explore</span>
                                        <i class="hicon hicon-flights-one-ways"></i>
                                    </a>
                                    <a class="btn-video-play btn-video-play-sm media-glightbox" href="./assets/media/v1.mp4"><span></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Carousel item -->
            <!-- Carousel item -->
            <div class="hero-item carousel-item">
                <div class="hero-bg">
                    <img src="./assets/img/hero/h3.jpg" srcset="./assets/img/hero/h3@2x.jpg 2x" alt="">
                </div>
                <div class="hero-caption text-sm-start">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 col-xxl-6 col-xl-7 col-md-10">
                                <div class="hero-sub-title">
                                    <span>Explore Moliva</span>
                                </div>
                                <h2 class="display-3 hero-title">
                                    Explore majestic mountain ranges
                                </h2>
                                <div class="hero-action">
                                    <a href="./tour-packages-1.html" class="btn btn-outline-light btn-uppercase mnw-180 me-4">
                                        <span>Explore</span>
                                        <i class="hicon hicon-flights-one-ways"></i>
                                    </a>
                                    <a class="btn-video-play btn-video-play-sm media-glightbox" href="./assets/media/v1.mp4"><span></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Carousel item -->
            <!-- Carousel item -->
            <div class="hero-item carousel-item">
                <div class="hero-bg">
                    <img src="./assets/img/hero/h1.jpg" srcset="./assets/img/hero/h1@2x.jpg 2x" alt="">
                </div>
                <div class="hero-caption text-sm-start">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 col-xxl-6 col-xl-7 col-md-10">
                                <div class="hero-sub-title">
                                    <span>Explore Moliva</span>
                                </div>
                                <h2 class="display-3 hero-title">
                                    Experience the unique local culture
                                </h2>
                                <div class="hero-action">
                                    <a href="./tour-packages-1.html" class="btn btn-outline-light btn-uppercase mnw-180 me-4">
                                        <span>Explore</span>
                                        <i class="hicon hicon-flights-one-ways"></i>
                                    </a>
                                    <a class="btn-video-play btn-video-play-sm media-glightbox" href="./assets/media/v1.mp4"><span></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Carousel item -->
        </div>
        <div class="carousel-control">
            <button class="carousel-control-next prev-custom" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-prev next-custom" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
        <div class="carousel-indicators hero-indicators-right">
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
    </div>
    <!-- Carousel -->
</section>
Style 2
<section class="hero" data-aos="fade">
    <h1 class="d-none">Moliva</h1>
    <!-- Carousel -->
    <div id="heroCarousel" class="hero-carousel carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <!-- Carousel item -->
            <div class="hero-item carousel-item active">
                <div class="hero-bg">
                    <img src="./assets/img/hero/h2.jpg" srcset="./assets/img/hero/h2@2x.jpg 2x" alt="">
                </div>
                <div class="hero-caption">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-12 col-xl-7 col-md-10">
                                <div class="hero-sub-title">
                                    <span>Explore Moliva</span>
                                </div>
                                <h2 class="display-3 hero-title">
                                    Enjoy the beautiful and romantic nature
                                </h2>
                                <div class="hero-action">
                                    <a href="./destinations-1.html" class="btn btn-outline-light btn-uppercase mnw-180 me-4">
                                        <span>Explore</span>
                                        <i class="hicon hicon-flights-one-ways"></i>
                                    </a>
                                    <a class="btn-video-play btn-video-play-sm media-glightbox" href="./assets/media/v1.mp4"><span></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Carousel item -->
            <!-- Carousel item -->
            <div class="hero-item carousel-item">
                <div class="hero-bg">
                    <img src="./assets/img/hero/h3.jpg" srcset="./assets/img/hero/h3@2x.jpg 2x" alt="">
                </div>
                <div class="hero-caption">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-12 col-xl-7 col-md-10">
                                <div class="hero-sub-title">
                                    <span>Explore Moliva</span>
                                </div>
                                <h2 class="display-3 hero-title">
                                    Explore majestic mountain ranges
                                </h2>
                                <div class="hero-action">
                                    <a href="./destinations-1.html" class="btn btn-outline-light btn-uppercase mnw-180 me-4">
                                        <span>Explore</span>
                                        <i class="hicon hicon-flights-one-ways"></i>
                                    </a>
                                    <a class="btn-video-play btn-video-play-sm media-glightbox" href="./assets/media/v1.mp4"><span></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Carousel item -->
            <!-- Carousel item -->
            <div class="hero-item carousel-item">
                <div class="hero-bg">
                    <img src="./assets/img/hero/h1.jpg" srcset="./assets/img/hero/h1@2x.jpg 2x" alt="">
                </div>
                <div class="hero-caption">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-12 col-xl-7 col-md-10">
                                <div class="hero-sub-title">
                                    <span>Explore Moliva</span>
                                </div>
                                <h2 class="display-3 hero-title">
                                    Experience the unique local culture
                                </h2>
                                <div class="hero-action">
                                    <a href="./destinations-1.html" class="btn btn-outline-light btn-uppercase mnw-180 me-4">
                                        <span>Explore</span>
                                        <i class="hicon hicon-flights-one-ways"></i>
                                    </a>
                                    <a class="btn-video-play btn-video-play-sm media-glightbox" href="./assets/media/v1.mp4"><span></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Carousel item -->
        </div>
        <button class="carousel-control-prev d-none d-md-flex" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next d-none d-md-flex" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
        <div class="hero-indicators carousel-indicators">
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
    </div>
    <!-- Carousel -->
</section>

4.9.3. Video

<section class="hero" data-aos="fade">
    <div class="hero-video">
        <div class="bg-video bg-overlay ratio ratio-16x9 z-0">
            <video class="object-fit-cover" poster="./assets/img/background/b5.jpg" src="./assets/media/v1.mp4" autoplay loop playsinline muted></video>
            <div class="bg-content hero-caption">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-12 col-xl-7 col-md-10">
                            <div class="hero-sub-title">
                                <span>Explore Moliva</span>
                            </div>
                            <h2 class="display-3 hero-title">
                                Enjoy the beautiful and romantic nature
                            </h2>
                            <div class="hero-action">
                                <a href="./tour-packages-1.html" class="btn btn-outline-light btn-uppercase mnw-180">
                                    <span>Explore</span>
                                    <i class="hicon hicon-flights-one-ways"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

4.10. Testimonial

Testimonial is a customer review container. It includes the customer's avatar, name, review text, star rating, and review date.

Style 1
<div class="testimonial-box shadow-sm rounded mb-1 hover-effect">
    <span class="icon">
        <i class="hicon hicon-message-right"></i>
    </span>
    <div class="testimonial-client">
        <img src="./assets/img/avatars/a1.jpg" srcset="./assets/img/avatars/a1@2x.jpg 2x" alt="">
        <div class="testimonial-name">
            <h3 class="h5 mb-0">John Doe</h3>
            <span>Venice, Italy</span>
        </div>
    </div>
    <div class="testimonial-content">
        <blockquote class="testimonial-review">
            Our trip to Moliva was amazing! Moliva Travel Agency organized everything perfectly,
            from the hotels to the sightseeing spots. I was very impressed and will definitely return!
        </blockquote>
        <div class="testimonial-star">
            <span class="star-rate-view star-rate-size-sm"><span class="star-value rate-45"></span></span>
            <span class="testimonial-date rounded-1">Jun 25 24</span>
        </div>
    </div>
</div>
Style 2
<div class="testimonial-inline">
    <div class="testimonial-avatar">
        <img src="./assets/img/avatars/a1.jpg" srcset="./assets/img/avatars/a1@2x.jpg 2x" alt="">
        <span class="testimonial-icon">
            <i class="hicon hicon-message-right"></i>
        </span>
    </div>
    <div class="testimonial-content">
        <blockquote class="testimonial-review">
            Our trip to Moliva was amazing! Moliva Travel Agency organized everything perfectly,
            from the hotels to the sightseeing spots. I was very impressed!
        </blockquote>
        <div class="testimonial-star">
            <span class="star-rate-view star-rate-size-sm"><span class="star-value rate-45"></span></span>
            <span class="testimonial-date rounded-1">Jun 25 2024</span>
        </div>
    </div>
    <div class="testimonial-user">
        <h3 class="h5 mb-0">John Doe</h3>
        <span>Venice, Italy</span>
    </div>
</div>
Style 3
<div class="testimonial-above">
    <div class="testimonial-content rounded shadow-sm">
        <div class="testimonial-star">
            <span class="star-rate-view star-rate-size-sm"><span class="star-value rate-45"></span></span>
        </div>
        <blockquote class="testimonial-review">
            Our trip to Moliva was amazing! Moliva Travel Agency organized everything perfectly,
            from the hotels to the sightseeing spots. I was very impressed and will definitely return!
        </blockquote>
        <div class="testimonial-name">
            <h3 class="h5 mb-0">John Doe</h3>
            <span>Venice, Italy</span>
        </div>
    </div>
    <div class="testimonial-avatar shadow-sm">
        <img src="./assets/img/avatars/a1.jpg" srcset="./assets/img/avatars/a1@2x.jpg 2x" alt="">
        <span class="testimonial-icon">
            <i class="hicon hicon-message-right"></i>
        </span>
    </div>
</div>

4.11 Team

Team is a content container that includes an avatar image, name, position, and social media links.

<div class="team shadow-sm rounded">
    <img src="./assets/img/team/t4.jpg" srcset="./assets/img/team/t4@2x.jpg 2x" alt="">
    <div class="team-info">
        <h3 class="h5 team-name">Anna Lee</h3>
        <span class="team-city">Tour Operator</span>
        <ul class="social-list d-inline-block mb-0">
            <li class="social-item">
                <a href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="none" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
                    </svg>
                </a>
            </li>
            <li class="social-item">
                <a href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="none" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
                        <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
                    </svg>
                </a>
            </li>
            <li class="social-item">
                <a href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
                        <path d="M8 11l0 5"></path>
                        <path d="M8 8l0 .01"></path>
                        <path d="M12 16l0 -5"></path>
                        <path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
                    </svg>
                </a>
            </li>
            <li class="social-item">
                <a href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="none" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M8 20l4 -9"></path>
                        <path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7"></path>
                        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                    </svg>
                </a>
            </li>
        </ul>
    </div>
</div>

4.12. Review & rate

4.12.1. Star rate

<!-- Small -->
<span class="star-rate-view star-rate-size-sm"><span class="star-value rate-50"></span></span>

<!-- Normal -->
<span class="star-rate-view"><span class="star-value rate-50"></span></span>

<!-- Large-->
<span class="star-rate-view star-rate-size-lg"><span class="star-value rate-50"></span></span>

4.12.2. Award (vertical)

<div class="vertical-award rounded shadow-sm">
    <div class="award-content">
        <img src="./assets/img/logos/trip-best.png" srcset="./assets/img/logos/trip-best@2x.png 2x" class="w-100" alt="">
    </div>
    <div class="award-footer">
        <small>Tripadvisor</small>
    </div>
</div>

<div class="vertical-award rounded shadow">
    <div class="award-content">
        <img src="./assets/img/logos/trip-top.png" srcset="./assets/img/logos/trip-top@2x.png 2x" alt="">
        <span class="award-title">Attractive Destinations</span>
    </div>
    <div class="award-footer">
        <small>Tripadvisor</small>
    </div>
</div>

4.12.3. Experience (vertical)

<div class="vertical-experience rounded shadow-sm">
    <h3 class="experience-year">+30</h3>
    <small class="experience-title">Years of experience</small>
</div>

4.12.4. Review (vertical)

<div class="vertical-review rounded shadow-sm">
    <div class="review-content">
        <h3 class="review-score">4.9</h3>
        <span class="star-rate-view star-rate-size-sm"><span class="star-value rate-50"></span></span>
        <small class="review-total"><strong>2394</strong> reviews</small>
        <small class="review-label ">Excellent</small>
    </div>
    <div class="review-footer">
        <small>Tripadvisor</small>
    </div>
</div>

4.12.5. Review (horizontal)

<div class="horizontal-review rounded">
    <h2 class="h3 review-title">Overall rating</h2>
    <div class="review-content">
        <h3 class="review-score">4.9</h3>
        <div class="review-total">
            <span class="star-rate-view"><span class="star-value rate-50"></span></span>
            <span><strong class="text-body">2,394</strong> reviews</span>
        </div>
    </div>
    <div class="review-label">
        <small>Excellent</small>
    </div>
</div>

<div class="horizontal-review rounded">
    <div class="review-content">
        <h3 class="review-score">4.9</h3>
        <div class="review-total">
            <span class="star-rate-view"><span class="star-value rate-50"></span></span>
            <span><strong class="text-body">2,394</strong> reviews</span>
        </div>
    </div>
    <div class="review-link">
        <small><a href="#reviews" class="link-dark link-hover">Read all tourist reviews <i class="hicon hicon-sm hicon-flights-one-ways"></i></a></small>
    </div>
    <div class="review-label">
        <small>Excellent</small>
    </div>
</div>

4.12.6. Review (Inline)

<div class="inline-review">
    <span class="review-score">4.9</span>
    <span class="star-rate-view star-rate-size-sm me-2"><span class="star-value rate-50"></span></span>
    <small class="review-total"><span>(231 reviews)</span></small>
</div>

4.13 Social Icons

Social media icons are used from the Tabler-icons library. View other icons from Tabler Icons.

<!-- Facebook -->
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="1.75" stroke="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
    </svg>
</a>

<!-- Twitter -->
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="none" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
        <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
    </svg>
</a>

<!-- Instagram -->
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" />
        <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
        <path d="M16.5 7.5l0 .01" />
    </svg>
</a>

<!-- Youtube -->
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="none" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M3 5m0 4a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v6a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z"></path>
        <path d="M10 9l5 3l-5 3z"></path>
    </svg>
</a>

<!-- Pinterest -->
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="none" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M8 20l4 -9"></path>
        <path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
    </svg>
</a>

<!-- Tripadvisor -->
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="none" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M6.5 13.5m-1.5 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0"></path>
        <path d="M17.5 13.5m-1.5 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0"></path>
        <path d="M17.5 9a4.5 4.5 0 1 0 3.5 1.671l1 -1.671h-4.5z"></path>
        <path d="M6.5 9a4.5 4.5 0 1 1 -3.5 1.671l-1 -1.671h4.5z"></path>
        <path d="M10.5 15.5l1.5 2l1.5 -2"></path>
        <path d="M9 6.75c2 -.667 4 -.667 6 0"></path>
    </svg>
</a>

<!-- Linkedin -->
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
        <path d="M8 11l0 5" />
        <path d="M8 8l0 .01" />
        <path d="M12 16l0 -5" />
        <path d="M16 16v-3a2 2 0 0 0 -4 0" />
    </svg>
</a>

<!-- Reddit -->
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M12 8c2.648 0 5.028 .826 6.675 2.14a2.5 2.5 0 0 1 2.326 4.36c0 3.59 -4.03 6.5 -9 6.5c-4.875 0 -8.845 -2.8 -9 -6.294l-1 -.206a2.5 2.5 0 0 1 2.326 -4.36c1.646 -1.313 4.026 -2.14 6.674 -2.14z" />
        <path d="M12 8l1 -5l6 1" />
        <path d="M19 4m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
        <circle cx="9" cy="13" r=".5" fill="currentColor" />
        <circle cx="15" cy="13" r=".5" fill="currentColor" />
        <path d="M10 17c.667 .333 1.333 .5 2 .5s1.333 -.167 2 -.5" />
    </svg>
</a>

<!-- VK -->
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 0a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" />
    </svg>
</a>

<!-- Telegram -->
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" />
    </svg>
</a>

<!-- Tiktok -->
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M21 7.917v4.034a9.948 9.948 0 0 1 -5 -1.951v4.5a6.5 6.5 0 1 1 -8 -6.326v4.326a2.5 2.5 0 1 0 4 2v-11.5h4.083a6.005 6.005 0 0 0 4.917 4.917z" />
    </svg>
</a>

5. Form

Moliva is built on the Bootstrap framework, inheriting all Bootstrap forms. You can learn more about Bootstrap Forms.

5.1. Form control with icon

<div class="input-icon-group">
    <label class="input-icon hicon hicon-email-envelope" for="txtEmail"></label>
    <input id="txtEmail" type="text" class="form-control shadow-sm">
</div>

5.1. Form Select

Form Select follows the Bootstrap 5 dropdown style, using the use-bootstrap-select plugin. Learn more about Use Bootstrap Select.

<!-- html -->
<select class="form-select shadow-sm dropdown-select">
    <option selected>All categories</option>
    <option value="1">Ecotourism & Resort (56)</option>
    <option value="2">Cultural & Foods (75)</option>
    <option value="3">Explorer & Adventure (82)</option>
    <option value="4">Festival & Events (91)</option>
    <option value="5">Museums & Exhibitions (59)</option>
    <option value="6">Hiking & Trekking (72)</option>
    <option value="7">Motor & Bicycles (91)</option>
    <option value="8">Ships & boats (23)</option>
    <option value="9">Family Activities (67)</option>
</select>
// Javascript
// Path: moliva-1.1/html/assets/js/main.js
const dropdownSelects = document.querySelectorAll('.dropdown-select');
dropdownSelects.forEach(element => {
    new UseBootstrapSelect(element, {
        maxHeight: '15.35rem',
    });
});

5.1. Date Picker

<div class="input-icon-group tour-date">
    <label class="input-icon hicon hicon-menu-calendar hicon-bold" for="txtCheckDate2"></label>
    <input id="txtCheckDate2" type="text" class="form-select shadow-sm" placeholder="Departure date" data-input placeholder="" readonly>
</div>
// Javascript
// Path: moliva-1.1/html/assets/js/main.js
new flatpickr(".tour-date", {
    allowInput: false,
    minDate: "today",
    static: true,
    position: "right center",
    wrap: true,
    disableMobile: "true",
    dateFormat: "M d Y",
});

5.4. Search form (half)

<div class="search-tours search-hero search-hero-half">
    <form class="search-tour-form" method="post">
        <div class="search-tour-input">
            <div class="row g-3 g-xl-2">
                <div class="col-12 col-md-6">
                    <div class="input-icon-group">
                        <label for="txtKeyword" class="input-icon hicon hicon-flights-pin"></label>
                        <input id="txtKeyword" type="text" class="form-control shadow-sm" placeholder="Where are you going?">
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="flatpickr-wrapper"><div class="input-icon-group tour-date">
                        <label class="input-icon hicon hicon-menu-calendar hicon-bold" for="txtCheckDate2"></label>
                        <input id="txtCheckDate2" type="text" class="form-select shadow-sm flatpickr-input" placeholder="Tour date" data-input="" readonly="readonly">
                    </div><div class="flatpickr-calendar animate static" tabindex="-1"><div class="flatpickr-months"><span class="flatpickr-prev-month flatpickr-disabled"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17"><g></g><path d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z"></path></svg></span><div class="flatpickr-month"><div class="flatpickr-current-month"><select class="flatpickr-monthDropdown-months" aria-label="Month" tabindex="-1"><option class="flatpickr-monthDropdown-month" value="8" tabindex="-1">September</option><option class="flatpickr-monthDropdown-month" value="9" tabindex="-1">October</option><option class="flatpickr-monthDropdown-month" value="10" tabindex="-1">November</option><option class="flatpickr-monthDropdown-month" value="11" tabindex="-1">December</option></select><div class="numInputWrapper"><input class="numInput cur-year" type="number" tabindex="-1" aria-label="Year" min="2024"><span class="arrowUp"></span><span class="arrowDown"></span></div></div></div><span class="flatpickr-next-month"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17"><g></g><path d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"></path></svg></span></div><div class="flatpickr-innerContainer"><div class="flatpickr-rContainer"><div class="flatpickr-weekdays"><div class="flatpickr-weekdaycontainer">
<span class="flatpickr-weekday">
Sun</span><span class="flatpickr-weekday">Mon</span><span class="flatpickr-weekday">Tue</span><span class="flatpickr-weekday">Wed</span><span class="flatpickr-weekday">Thu</span><span class="flatpickr-weekday">Fri</span><span class="flatpickr-weekday">Sat
</span>
</div></div><div class="flatpickr-days" tabindex="-1"><div class="dayContainer"><span class="flatpickr-day flatpickr-disabled" aria-label="September 1, 2024">1</span><span class="flatpickr-day flatpickr-disabled" aria-label="September 2, 2024">2</span><span class="flatpickr-day flatpickr-disabled" aria-label="September 3, 2024">3</span><span class="flatpickr-day flatpickr-disabled" aria-label="September 4, 2024">4</span><span class="flatpickr-day today" aria-label="September 5, 2024" aria-current="date" tabindex="-1">5</span><span class="flatpickr-day" aria-label="September 6, 2024" tabindex="-1">6</span><span class="flatpickr-day" aria-label="September 7, 2024" tabindex="-1">7</span><span class="flatpickr-day" aria-label="September 8, 2024" tabindex="-1">8</span><span class="flatpickr-day" aria-label="September 9, 2024" tabindex="-1">9</span><span class="flatpickr-day" aria-label="September 10, 2024" tabindex="-1">10</span><span class="flatpickr-day" aria-label="September 11, 2024" tabindex="-1">11</span><span class="flatpickr-day" aria-label="September 12, 2024" tabindex="-1">12</span><span class="flatpickr-day" aria-label="September 13, 2024" tabindex="-1">13</span><span class="flatpickr-day" aria-label="September 14, 2024" tabindex="-1">14</span><span class="flatpickr-day" aria-label="September 15, 2024" tabindex="-1">15</span><span class="flatpickr-day" aria-label="September 16, 2024" tabindex="-1">16</span><span class="flatpickr-day" aria-label="September 17, 2024" tabindex="-1">17</span><span class="flatpickr-day" aria-label="September 18, 2024" tabindex="-1">18</span><span class="flatpickr-day" aria-label="September 19, 2024" tabindex="-1">19</span><span class="flatpickr-day" aria-label="September 20, 2024" tabindex="-1">20</span><span class="flatpickr-day" aria-label="September 21, 2024" tabindex="-1">21</span><span class="flatpickr-day" aria-label="September 22, 2024" tabindex="-1">22</span><span class="flatpickr-day" aria-label="September 23, 2024" tabindex="-1">23</span><span class="flatpickr-day" aria-label="September 24, 2024" tabindex="-1">24</span><span class="flatpickr-day" aria-label="September 25, 2024" tabindex="-1">25</span><span class="flatpickr-day" aria-label="September 26, 2024" tabindex="-1">26</span><span class="flatpickr-day" aria-label="September 27, 2024" tabindex="-1">27</span><span class="flatpickr-day" aria-label="September 28, 2024" tabindex="-1">28</span><span class="flatpickr-day" aria-label="September 29, 2024" tabindex="-1">29</span><span class="flatpickr-day" aria-label="September 30, 2024" tabindex="-1">30</span><span class="flatpickr-day nextMonthDay" aria-label="October 1, 2024" tabindex="-1">1</span><span class="flatpickr-day nextMonthDay" aria-label="October 2, 2024" tabindex="-1">2</span><span class="flatpickr-day nextMonthDay" aria-label="October 3, 2024" tabindex="-1">3</span><span class="flatpickr-day nextMonthDay" aria-label="October 4, 2024" tabindex="-1">4</span><span class="flatpickr-day nextMonthDay" aria-label="October 5, 2024" tabindex="-1">5</span><span class="flatpickr-day nextMonthDay" aria-label="October 6, 2024" tabindex="-1">6</span><span class="flatpickr-day nextMonthDay" aria-label="October 7, 2024" tabindex="-1">7</span><span class="flatpickr-day nextMonthDay" aria-label="October 8, 2024" tabindex="-1">8</span><span class="flatpickr-day nextMonthDay" aria-label="October 9, 2024" tabindex="-1">9</span><span class="flatpickr-day nextMonthDay" aria-label="October 10, 2024" tabindex="-1">10</span><span class="flatpickr-day nextMonthDay" aria-label="October 11, 2024" tabindex="-1">11</span><span class="flatpickr-day nextMonthDay" aria-label="October 12, 2024" tabindex="-1">12</span></div></div></div></div></div></div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="input-icon-group">
                        <label class="input-icon hicon hicon-menu-calendar hicon-bold" for="txtCheckDate2"></label>
                        <select class="form-select dropdown-select shadow-sm use-bootstrap-select-target" id="selAdults" tabindex="-1">
                            <option selected="">All categories</option>
                            <option value="1">Ecotourism &amp; Resort</option>
                            <option value="2">Cultural &amp; Foods</option>
                            <option value="3">Explorer &amp; Adventure</option>
                            <option value="4">Festival &amp; Events</option>
                            <option value="5">Museums &amp; Exhibitions</option>
                            <option value="6">Hiking &amp; Trekking</option>
                            <option value="7">Motor &amp; Bicycles</option>
                            <option value="8">Ships &amp; boats</option>
                            <option value="9">Family Activities</option>
                        </select><div class="use-bootstrap-select-wrapper w-100"><div class="dropdown use-bootstrap-select"><div class="d-flex align-items-center gap-1 form-select dropdown-select shadow-sm "><div class="d-flex align-items-center gap-1 flex-wrap flex-grow-1 w-100 overflow-hidden">All categories<div class="input-wrapper"><span>i</span><input type="text" placeholder="" readonly=""></div></div></div><div data-bs-popper="" class="dropdown-menu slideIn w-100" style="max-height: 15.35rem;"><div><div class="dropdown-item selected active" data-value="All categories">All categories</div><div class="dropdown-item" data-value="1">Ecotourism &amp; Resort</div><div class="dropdown-item" data-value="2">Cultural &amp; Foods</div><div class="dropdown-item" data-value="3">Explorer &amp; Adventure</div><div class="dropdown-item" data-value="4">Festival &amp; Events</div><div class="dropdown-item" data-value="5">Museums &amp; Exhibitions</div><div class="dropdown-item" data-value="6">Hiking &amp; Trekking</div><div class="dropdown-item" data-value="7">Motor &amp; Bicycles</div><div class="dropdown-item" data-value="8">Ships &amp; boats</div><div class="dropdown-item" data-value="9">Family Activities</div></div></div></div></div>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <button type="submit" class="btn btn-primary btn-uppercase w-100">
                        <i class="hicon hicon-bold hicon-search-box"></i>
                        <span>Search</span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

5.5. Search form (Fullwidth)

<div class="search-tours search-hero">
    <form class="search-tour-form" method="post">
        <div class="search-tour-input">
            <div class="row g-3 g-xl-2">
                <div class="col-12 col-xl-4 col-md-6">
                    <div class="input-icon-group">
                        <label for="txtKeyword" class="input-icon hicon hicon-flights-pin"></label>
                        <input id="txtKeyword" type="text" class="form-control shadow-sm" placeholder="Where are you going?">
                    </div>
                </div>
                <div class="col-12 col-xl-3 col-md-6">
                    <div class="flatpickr-wrapper"><div class="input-icon-group tour-date">
                        <label class="input-icon hicon hicon-menu-calendar hicon-bold" for="txtCheckDate2"></label>
                        <input id="txtCheckDate2" type="text" class="form-select shadow-sm flatpickr-input" placeholder="Tour date" data-input="" readonly="readonly">
                    </div><div class="flatpickr-calendar animate static" tabindex="-1"><div class="flatpickr-months"><span class="flatpickr-prev-month flatpickr-disabled"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17"><g></g><path d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z"></path></svg></span><div class="flatpickr-month"><div class="flatpickr-current-month"><select class="flatpickr-monthDropdown-months" aria-label="Month" tabindex="-1"><option class="flatpickr-monthDropdown-month" value="8" tabindex="-1">September</option><option class="flatpickr-monthDropdown-month" value="9" tabindex="-1">October</option><option class="flatpickr-monthDropdown-month" value="10" tabindex="-1">November</option><option class="flatpickr-monthDropdown-month" value="11" tabindex="-1">December</option></select><div class="numInputWrapper"><input class="numInput cur-year" type="number" tabindex="-1" aria-label="Year" min="2024"><span class="arrowUp"></span><span class="arrowDown"></span></div></div></div><span class="flatpickr-next-month"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17"><g></g><path d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"></path></svg></span></div><div class="flatpickr-innerContainer"><div class="flatpickr-rContainer"><div class="flatpickr-weekdays"><div class="flatpickr-weekdaycontainer">
<span class="flatpickr-weekday">
Sun</span><span class="flatpickr-weekday">Mon</span><span class="flatpickr-weekday">Tue</span><span class="flatpickr-weekday">Wed</span><span class="flatpickr-weekday">Thu</span><span class="flatpickr-weekday">Fri</span><span class="flatpickr-weekday">Sat
</span>
</div></div><div class="flatpickr-days" tabindex="-1"><div class="dayContainer"><span class="flatpickr-day flatpickr-disabled" aria-label="September 1, 2024">1</span><span class="flatpickr-day flatpickr-disabled" aria-label="September 2, 2024">2</span><span class="flatpickr-day flatpickr-disabled" aria-label="September 3, 2024">3</span><span class="flatpickr-day flatpickr-disabled" aria-label="September 4, 2024">4</span><span class="flatpickr-day today" aria-label="September 5, 2024" aria-current="date" tabindex="-1">5</span><span class="flatpickr-day" aria-label="September 6, 2024" tabindex="-1">6</span><span class="flatpickr-day" aria-label="September 7, 2024" tabindex="-1">7</span><span class="flatpickr-day" aria-label="September 8, 2024" tabindex="-1">8</span><span class="flatpickr-day" aria-label="September 9, 2024" tabindex="-1">9</span><span class="flatpickr-day" aria-label="September 10, 2024" tabindex="-1">10</span><span class="flatpickr-day" aria-label="September 11, 2024" tabindex="-1">11</span><span class="flatpickr-day" aria-label="September 12, 2024" tabindex="-1">12</span><span class="flatpickr-day" aria-label="September 13, 2024" tabindex="-1">13</span><span class="flatpickr-day" aria-label="September 14, 2024" tabindex="-1">14</span><span class="flatpickr-day" aria-label="September 15, 2024" tabindex="-1">15</span><span class="flatpickr-day" aria-label="September 16, 2024" tabindex="-1">16</span><span class="flatpickr-day" aria-label="September 17, 2024" tabindex="-1">17</span><span class="flatpickr-day" aria-label="September 18, 2024" tabindex="-1">18</span><span class="flatpickr-day" aria-label="September 19, 2024" tabindex="-1">19</span><span class="flatpickr-day" aria-label="September 20, 2024" tabindex="-1">20</span><span class="flatpickr-day" aria-label="September 21, 2024" tabindex="-1">21</span><span class="flatpickr-day" aria-label="September 22, 2024" tabindex="-1">22</span><span class="flatpickr-day" aria-label="September 23, 2024" tabindex="-1">23</span><span class="flatpickr-day" aria-label="September 24, 2024" tabindex="-1">24</span><span class="flatpickr-day" aria-label="September 25, 2024" tabindex="-1">25</span><span class="flatpickr-day" aria-label="September 26, 2024" tabindex="-1">26</span><span class="flatpickr-day" aria-label="September 27, 2024" tabindex="-1">27</span><span class="flatpickr-day" aria-label="September 28, 2024" tabindex="-1">28</span><span class="flatpickr-day" aria-label="September 29, 2024" tabindex="-1">29</span><span class="flatpickr-day" aria-label="September 30, 2024" tabindex="-1">30</span><span class="flatpickr-day nextMonthDay" aria-label="October 1, 2024" tabindex="-1">1</span><span class="flatpickr-day nextMonthDay" aria-label="October 2, 2024" tabindex="-1">2</span><span class="flatpickr-day nextMonthDay" aria-label="October 3, 2024" tabindex="-1">3</span><span class="flatpickr-day nextMonthDay" aria-label="October 4, 2024" tabindex="-1">4</span><span class="flatpickr-day nextMonthDay" aria-label="October 5, 2024" tabindex="-1">5</span><span class="flatpickr-day nextMonthDay" aria-label="October 6, 2024" tabindex="-1">6</span><span class="flatpickr-day nextMonthDay" aria-label="October 7, 2024" tabindex="-1">7</span><span class="flatpickr-day nextMonthDay" aria-label="October 8, 2024" tabindex="-1">8</span><span class="flatpickr-day nextMonthDay" aria-label="October 9, 2024" tabindex="-1">9</span><span class="flatpickr-day nextMonthDay" aria-label="October 10, 2024" tabindex="-1">10</span><span class="flatpickr-day nextMonthDay" aria-label="October 11, 2024" tabindex="-1">11</span><span class="flatpickr-day nextMonthDay" aria-label="October 12, 2024" tabindex="-1">12</span></div></div></div></div></div></div>
                </div>
                <div class="col-12 col-xl-3 col-md-6">
                    <div class="input-icon-group">
                        <label class="input-icon hicon hicon-menu-calendar hicon-bold" for="txtCheckDate2"></label>
                        <select class="form-select dropdown-select shadow-sm use-bootstrap-select-target" id="selAdults" tabindex="-1">
                            <option selected="">All categories</option>
                            <option value="1">Ecotourism &amp; Resort</option>
                            <option value="2">Cultural &amp; Foods</option>
                            <option value="3">Explorer &amp; Adventure</option>
                            <option value="4">Festival &amp; Events</option>
                            <option value="5">Museums &amp; Exhibitions</option>
                            <option value="6">Hiking &amp; Trekking</option>
                            <option value="7">Motor &amp; Bicycles</option>
                            <option value="8">Ships &amp; boats</option>
                            <option value="9">Family Activities</option>
                        </select><div class="use-bootstrap-select-wrapper w-100"><div class="dropdown use-bootstrap-select"><div class="d-flex align-items-center gap-1 form-select dropdown-select shadow-sm "><div class="d-flex align-items-center gap-1 flex-wrap flex-grow-1 w-100 overflow-hidden">All categories<div class="input-wrapper"><span>i</span><input type="text" placeholder="" readonly=""></div></div></div><div data-bs-popper="" class="dropdown-menu slideIn w-100" style="max-height: 15.35rem;"><div><div class="dropdown-item selected active" data-value="All categories">All categories</div><div class="dropdown-item" data-value="1">Ecotourism &amp; Resort</div><div class="dropdown-item" data-value="2">Cultural &amp; Foods</div><div class="dropdown-item" data-value="3">Explorer &amp; Adventure</div><div class="dropdown-item" data-value="4">Festival &amp; Events</div><div class="dropdown-item" data-value="5">Museums &amp; Exhibitions</div><div class="dropdown-item" data-value="6">Hiking &amp; Trekking</div><div class="dropdown-item" data-value="7">Motor &amp; Bicycles</div><div class="dropdown-item" data-value="8">Ships &amp; boats</div><div class="dropdown-item" data-value="9">Family Activities</div></div></div></div></div>
                    </div>
                </div>
                <div class="col-12 col-xl-2 col-md-6">
                    <button type="submit" class="btn btn-primary btn-uppercase w-100">
                        <i class="hicon hicon-bold hicon-search-box"></i>
                        <span>Search</span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

5.6. Price range

<div class="price-range">
  <div class="row g-2 price-input">
      <div class="col-6">
          <label for="txtMinPrice" class="form-label">Min price</label>
          <div class="input-group mb-3">
              <span class="input-group-text bg-white">$</span>
              <input type="text" class="form-control input-min shadow-sm" aria-label="Min price" value="0" id="txtMinPrice">
          </div>
      </div>
      <div class="col-6">
          <label for="txtMaxPrice" class="form-label">Max price</label>
          <div class="input-group mb-3">
              <span class="input-group-text bg-white">$</span>
              <input type="text" class="form-control input-max shadow-sm" aria-label="Max price" value="1000" id="txtMaxPrice">
          </div>
      </div>
  </div>
  <div class="price-slider">
      <div class="progress"></div>
      <div class="range-input">
          <input type="range" class="range-min" min="0" max="1000" value="0" step="1">
          <input type="range" class="range-max" min="0" max="1000" value="1000" step="1">
      </div>
  </div>
</div>
// Javascript
// Path: moliva-1.1/html/assets/js/main.js

priceRange: () => {

    // Select all range input elements within the .price-range class
    const rangeInput = document.querySelectorAll(".price-range .range-input input");

    // Select all price input elements within the .price-range class
    const priceInput = document.querySelectorAll(".price-range .price-input input");

    // Select the progress bar element within the .price-slider class
    const range = document.querySelector(".price-range .price-slider .progress");

    // Define the minimum gap between the two price values
    let priceGap = 100;

    // Add an event listener to each price input field to enforce numeric-only input
    priceInput.forEach((input) => {
        input.addEventListener("input", (e) => {
            // Replace any non-digit characters with an empty string to allow only numbers
            e.target.value = e.target.value.replace(/\D/g, '');

            // Parse the values of the two price inputs as integers
            let minPrice = parseInt(priceInput[0].value),
                maxPrice = parseInt(priceInput[1].value);

            // Ensure the price difference is at least the specified gap and within the maximum limit
            if (maxPrice - minPrice >= priceGap && maxPrice <= rangeInput[1].max) {
                // If the minimum price input is being adjusted, update the corresponding range input and progress bar
                if (e.target.className === "input-min") {
                    rangeInput[0].value = minPrice;
                    range.style.left = (minPrice / rangeInput[0].max) * 100 + "%";
                }
                // If the maximum price input is being adjusted, update the corresponding range input and progress bar
                else {
                    rangeInput[1].value = maxPrice;
                    range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%";
                }
            }
        });
    });

    // Add an event listener to each range input to synchronize the values with the price inputs
    rangeInput.forEach((input) => {
        input.addEventListener("input", (e) => {
            // Parse the values of the two range inputs as integers
            let minVal = parseInt(rangeInput[0].value),
                maxVal = parseInt(rangeInput[1].value);

            // Ensure the range difference is at least the specified gap
            if (maxVal - minVal < priceGap) {
                // If the minimum range input is being adjusted and violates the gap, correct it
                if (e.target.className === "range-min") {
                    rangeInput[0].value = maxVal - priceGap;
                }
                // If the maximum range input is being adjusted and violates the gap, correct it
                else {
                    rangeInput[1].value = minVal + priceGap;
                }
            }
            // If the range difference is valid, update the corresponding price inputs and progress bar
            else {
                priceInput[0].value = minVal;
                priceInput[1].value = maxVal;
                range.style.left = (minVal / rangeInput[0].max) * 100 + "%";
                range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
            }
        });
    });

},

6. Components

Moliva is built on the Bootstrap framework, inheriting all Bootstrap Components. You can learn more about Bootstrap Components.

6.1. button

6.1.2. Primary button

<button type="button" class="btn btn-primary">
    <span>Read more</span>
    <i class="hicon hicon-flights-one-ways"></i>
</button>

6.2. Play video button

<!-- Normal -->
<a class="btn-video-play media-glightbox" href="./assets/media/v1.mp4"><span></span></a>

<!-- Small -->
<a class="btn-video-play btn-video-play-sm media-glightbox" href="./assets/media/v1.mp4"><span></span></a>

6. Accordion

6.1. Why choose us

<div class="accordion accordion-flush accordion-why mb-4" id="acdWhy">
    <div class="accordion-item bg-transparent">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acdContent1" aria-expanded="false" aria-controls="acdContent1">
                <i class="hicon hicon-bold hicon-positive"></i>
                <span>Leading travel agency in Moliva</span>
            </button>
        </h2>
        <div id="acdContent1" class="accordion-collapse collapse" data-bs-parent="#acdWhy">
            <div class="accordion-body">
                Top-rated agency in Moliva is renowned for exceptional service and unforgettable travel experiences.
            </div>
        </div>
    </div>
    <div class="accordion-item bg-transparent">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acdContent2" aria-expanded="false" aria-controls="acdContent2">
                <i class="hicon hicon-bold hicon-positive"></i>
                <span>Years of experience in tour operations</span>
            </button>
        </h2>
        <div id="acdContent2" class="accordion-collapse collapse" data-bs-parent="#acdWhy">
            <div class="accordion-body">
                With years of expertise, we excel at organizing seamless, enjoyable, and memorable tours for every traveler.
            </div>
        </div>
    </div>
    <div class="accordion-item bg-transparent">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acdContent3" aria-expanded="false" aria-controls="acdContent3">
                <i class="hicon hicon-bold hicon-positive"></i>
                <span>Flexible tour packages and bookings</span>
            </button>
        </h2>
        <div id="acdContent3" class="accordion-collapse collapse" data-bs-parent="#acdWhy">
            <div class="accordion-body">
                We offer customizable trips with flexible packages and convenient booking options tailored to your needs.
            </div>
        </div>
    </div>
    <div class="accordion-item bg-transparent">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acdContent4" aria-expanded="false" aria-controls="acdContent4">
                <i class="hicon hicon-bold hicon-positive"></i>
                <span>Best prices with attractive Offers</span>
            </button>
        </h2>
        <div id="acdContent4" class="accordion-collapse collapse" data-bs-parent="#acdWhy">
            <div class="accordion-body">
                Enjoy unbeatable prices and exclusive offers, ensuring you receive great value and memorable vacation experiences.
            </div>
        </div>
    </div>
</div>

6.2. Tour itinerary

<div class="accordion accordion-flush accordion-itinerary" id="acdItinerary">
    <div class="accordion-item bg-transparent">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acdContent1" aria-expanded="false" aria-controls="acdContent1">
                <strong class="rounded-1">Day 1:</strong>
                <span>Enjoy the Natural Scenery in the Bay</span>
            </button>
        </h2>
        <div id="acdContent1" class="accordion-collapse collapse" data-bs-parent="#acdItinerary">
            <div class="accordion-body">
                Start your adventure by soaking in the stunning natural beauty of the bay.
                Take a scenic boat tour, explore hidden coves, and relax on pristine beaches.
                Enjoy the tranquil waters and breathtaking views, perfect for unwinding and
                capturing unforgettable photos.
            </div>
        </div>
    </div>
    <div class="accordion-item bg-transparent">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acdContent2" aria-expanded="false" aria-controls="acdContent2">
                <strong class="rounded-1">Day 2:</strong>
                <span>Hiking and Climbing the Majestic Mountains</span>
            </button>
        </h2>
        <div id="acdContent2" class="accordion-collapse collapse" data-bs-parent="#acdItinerary">
            <div class="accordion-body">
                Embark on an exhilarating hiking and climbing journey through the majestic mountains.
                Tackle challenging trails and ascend to breathtaking viewpoints.
                Experience the rugged beauty and panoramic vistas of the mountains,
                offering a rewarding adventure for outdoor enthusiasts.
            </div>
        </div>
    </div>
    <div class="accordion-item bg-transparent">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acdContent3" aria-expanded="false" aria-controls="acdContent3">
                <strong class="rounded-1">Day 3:</strong>
                <span>Swim and Experience Adventurous Games</span>
            </button>
        </h2>
        <div id="acdContent3" class="accordion-collapse collapse" data-bs-parent="#acdItinerary">
            <div class="accordion-body">
                Dive into a day full of aquatic fun and adventure. Swim in crystal-clear lakes,
                try thrilling water sports, and engage in beach games. Enjoy activities such as
                kayaking and paddleboarding in a vibrant, energetic setting, perfect for an active and exciting day.
            </div>
        </div>
    </div>
    <div class="accordion-item bg-transparent">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acdContent4" aria-expanded="false" aria-controls="acdContent4">
                <strong class="rounded-1">Day 4:</strong>
                <span>Explore Primeval Tropical Forests and Wildlife</span>
            </button>
        </h2>
        <div id="acdContent4" class="accordion-collapse collapse" data-bs-parent="#acdItinerary">
            <div class="accordion-body">
                Discover the wonders of ancient tropical forests on a guided exploration.
                Trek through lush vegetation, encounter diverse wildlife, and learn about
                the unique ecological systems. This immersive experience offers a deep dive
                into the untouched beauty and biodiversity of the region.
            </div>
        </div>
    </div>
</div>

7. Font icons

7.1. Sample code:

<i class="hicon hicon-menu-calendar"></i>

7.2. Bold:

<i class="hicon hicon-bold hicon-menu-calendar"></i>

7.3. Sizes:

Available Font icons size options:

.hicon-sm, .hicon-md, .hicon-lg, .hicon-60, .hicon-70, .hicon-80, .hicon-90, .hicon-100, .hicon-110, .hicon-120, .hicon-130, .hicon-140, .hicon-150, .hicon-175, .hicon-200, .hicon-225, .hicon-250, .hicon-275, .hicon-300, .hicon-325, .hicon-350, .hicon-375, .hicon-400

  • <i class="hicon hicon-sm hicon-menu-calendar"></i>
  • <i class="hicon hicon-md hicon-menu-calendar"></i>
  • <i class="hicon hicon-lg hicon-menu-calendar"></i>
  • <i class="hicon hicon-60 hicon-menu-calendar"></i>
  • <i class="hicon hicon-70 hicon-menu-calendar"></i>
  • <i class="hicon hicon-80 hicon-menu-calendar"></i>
  • <i class="hicon hicon-90 hicon-menu-calendar"></i>
  • <i class="hicon hicon-100 hicon-menu-calendar"></i>
  • <i class="hicon hicon-110 hicon-menu-calendar"></i>
  • <i class="hicon hicon-120 hicon-menu-calendar"></i>
  • <i class="hicon hicon-130 hicon-menu-calendar"></i>
  • <i class="hicon hicon-140 hicon-menu-calendar"></i>
  • <i class="hicon hicon-150 hicon-menu-calendar"></i>
  • <i class="hicon hicon-175 hicon-menu-calendar"></i>
  • <i class="hicon hicon-200 hicon-menu-calendar"></i>
  • <i class="hicon hicon-225 hicon-menu-calendar"></i>
  • <i class="hicon hicon-250 hicon-menu-calendar"></i>
  • <i class="hicon hicon-275 hicon-menu-calendar"></i>
  • <i class="hicon hicon-300 hicon-menu-calendar"></i>
  • <i class="hicon hicon-325 hicon-menu-calendar"></i>
  • <i class="hicon hicon-350 hicon-menu-calendar"></i>
  • <i class="hicon hicon-375 hicon-menu-calendar"></i>
  • <i class="hicon hicon-400 hicon-menu-calendar"></i>

list of font icons:

  • hicon-24-hour-finess-center
  • hicon-24hour-check-in
  • hicon-24hour-frontdesk
  • hicon-24hour-room-service
  • hicon-24hour-security
  • hicon-5-star-deal
  • hicon-installment-payment
  • hicon-internet
  • hicon-iron
  • hicon-add-a-website
  • hicon-additional-bathroom
  • hicon-additional-fee-for-pets
  • hicon-additional-information
  • hicon-additional-toilet
  • hicon-adults-line
  • hicon-after-hours
  • hicon-afternoon-tea
  • hicon-agoda-price-guarante
  • hicon-air-bath-access
  • hicon-air-conditioning
  • hicon-air-purifier
  • hicon-airport-transfer-oneway
  • hicon-airport-transfer-roundtrip
  • hicon-airport-transfer
  • hicon-airports
  • hicon-alarm-clock
  • hicon-already-booking
  • hicon-american-express
  • hicon-apartment
  • hicon-aps-lock
  • hicon-assembly-restaurant-line
  • hicon-atm-cash-machine-on-site
  • hicon-avatar-hotel
  • hicon-avatar-property
  • hicon-baby-cot
  • hicon-babysitting
  • hicon-back-to-top
  • hicon-badge-insider
  • hicon-badminton-court
  • hicon-balcony-terrace
  • hicon-bathrobes
  • hicon-bathroom-basics
  • hicon-bathroom-phone
  • hicon-bathrooms
  • hicon-bathtub
  • hicon-bbq-facilities
  • hicon-bc-global-card
  • hicon-beach
  • hicon-bed
  • hicon-bedroom-door
  • hicon-bedroom
  • hicon-bell-alerts
  • hicon-bicycle-rental
  • hicon-billiards
  • hicon-blackout-curtains
  • hicon-blizzard
  • hicon-blowing-drifting-snow
  • hicon-blowing-dust-sandstorm
  • hicon-blowing-spray-windy
  • hicon-boat
  • hicon-bold-baby-diaper
  • hicon-bold-baby
  • hicon-bold-bath-materials
  • hicon-bold-bath-temperature
  • hicon-bold-bath-water
  • hicon-bold-capacity
  • hicon-bold-change-flight
  • hicon-bold-child-meal-a
  • hicon-bold-child-meal-b
  • hicon-bold-children-yukata
  • hicon-bold-family-with-teens-new
  • hicon-bold-female-only
  • hicon-bold-first-aid
  • hicon-bold-floor-plan
  • hicon-bold-gender
  • hicon-bold-group-travelers
  • hicon-bold-hot-spring-access
  • hicon-bold-hot-spring-bath
  • hicon-bold-infant
  • hicon-bold-itinerary
  • hicon-bold-male-only
  • hicon-bold-meal
  • hicon-bold-modify-search
  • hicon-bold-mountain-view
  • hicon-bold-package-savings
  • hicon-bold-package
  • hicon-bold-preselected-flight
  • hicon-bold-price-fluctuates
  • hicon-bold-salt
  • hicon-bold-spa-sauna
  • hicon-bold-tap-water
  • hicon-bold-time-icon
  • hicon-bold-travel-protection
  • hicon-bold-walkability
  • hicon-book-now-pay-later
  • hicon-book-without-a-creditcard
  • hicon-bottle-of-sparkling-wine
  • hicon-bottle-of-wine
  • hicon-bowling-alley
  • hicon-breakfast-buffet
  • hicon-breakfast-one-person
  • hicon-breakfast
  • hicon-breezy
  • hicon-budget
  • hicon-bungalow
  • hicon-bunk-bed
  • hicon-bus-and-rail-stations
  • hicon-bus-station
  • hicon-business-center
  • hicon-business-facilities
  • hicon-business
  • hicon-buzzer-wireless-intercom
  • hicon-c-coupon
  • hicon-cable-car-station
  • hicon-calendar-onmap
  • hicon-callcenter-24hour
  • hicon-callcenter-line
  • hicon-callcenter
  • hicon-camera-hover
  • hicon-cancel-anytime
  • hicon-cancel-booking
  • hicon-cancellation-policy-non-refund-special-condition
  • hicon-canoe
  • hicon-capsule
  • hicon-car-hire
  • hicon-car-park-charges
  • hicon-car-park-free-charge
  • hicon-car-park-nearby
  • hicon-car-park-onsite
  • hicon-car-park
  • hicon-car-power-charging-station
  • hicon-carbon-monoxide-detector
  • hicon-carpeting
  • hicon-carrouselarrow-left
  • hicon-carrouselarrow-right
  • hicon-cash-a-line-new
  • hicon-cash
  • hicon-casino
  • hicon-cats-allowed
  • hicon-chapel
  • hicon-chat
  • hicon-check-circle-o
  • hicon-check-in
  • hicon-check-out
  • hicon-check-valid-state
  • hicon-check
  • hicon-checkin-hover-date
  • hicon-checkout-hover-date
  • hicon-child-icon
  • hicon-child-line
  • hicon-children-high-chair
  • hicon-children-playground
  • hicon-china-event
  • hicon-china-only
  • hicon-circle-05
  • hicon-circle-1
  • hicon-circle-15
  • hicon-circle-2
  • hicon-circle-25
  • hicon-circle-3
  • hicon-circle-35
  • hicon-circle-4
  • hicon-circle-45
  • hicon-circle-5
  • hicon-circle-arrow-left
  • hicon-circle-arrow-right
  • hicon-city-buses
  • hicon-city-view
  • hicon-cleaning-products
  • hicon-clear-sky-b
  • hicon-clear-sky
  • hicon-clear
  • hicon-close-popup
  • hicon-closest-bar
  • hicon-closest-market
  • hicon-closet
  • hicon-clothes-dryer-pay
  • hicon-clothes-rack
  • hicon-clothes-washer-free
  • hicon-cloudy
  • hicon-club-lounge-access
  • hicon-coffee-shop
  • hicon-coffee-tea-maker
  • hicon-complimentary-bottled-water
  • hicon-complimentary-instant-coffee
  • hicon-complimentary-tea
  • hicon-concierge
  • hicon-confirmation-instant
  • hicon-confirmation-later
  • hicon-confirmation
  • hicon-continental-breakfast
  • hicon-cookie
  • hicon-couple
  • hicon-coupon-card-no-circle
  • hicon-coupon-promo
  • hicon-credit-card-bf
  • hicon-culture
  • hicon-currency-exchange
  • hicon-daily-housekeeping
  • hicon-daily-newspaper
  • hicon-dart-board
  • hicon-dashboard
  • hicon-data-at-your-fingertips
  • hicon-deal-insider
  • hicon-default-feedback
  • hicon-desk
  • hicon-diners-clubs-card
  • hicon-dinner
  • hicon-discover-card
  • hicon-dishwasher
  • hicon-distance-from-city-center
  • hicon-distance-to-airport
  • hicon-diving
  • hicon-document
  • hicon-dog-allowed
  • hicon-domestic-rates
  • hicon-dot-seperater
  • hicon-double-bed
  • hicon-double-super-king-queen
  • hicon-download-apps
  • hicon-download
  • hicon-dressing-room
  • hicon-drinks
  • hicon-drizzle
  • hicon-drug-stores
  • hicon-dryer
  • hicon-dvd-cd-player
  • hicon-dynamic-banner
  • hicon-early-bird-deal
  • hicon-early-check-in
  • hicon-easy-integration
  • hicon-edge-arrow-left
  • hicon-edge-arrow-right
  • hicon-edit
  • hicon-electric-blanket
  • hicon-elevator
  • hicon-email-envelope
  • hicon-emo-dislike-ani1
  • hicon-emo-dislike-ani2
  • hicon-emo-dislike-ani3
  • hicon-emo-dont-care-ani1
  • hicon-emo-dont-care-ani2
  • hicon-emo-dont-care-ani3
  • hicon-emo-great-ani1
  • hicon-emo-great-ani2
  • hicon-emo-great-ani3
  • hicon-emo-nice-ani1
  • hicon-emo-nice-ani2
  • hicon-emo-nice-ani3
  • hicon-emo-sad-ani1
  • hicon-emo-sad-ani2
  • hicon-emo-sad-ani3
  • hicon-emo-sad-click
  • hicon-entire-place
  • hicon-essentials
  • hicon-everybody-fits
  • hicon-exclusive-sale
  • hicon-executive-floor
  • hicon-executive-lounge-access
  • hicon-export-calendar
  • hicon-express-check-in-check-out
  • hicon-exterior
  • hicon-extra-bed
  • hicon-extra-long-beds
  • hicon-facebook-logo
  • hicon-facilities-for-disabled-guests
  • hicon-failed-o
  • hicon-fair-mostly-clear
  • hicon-fair-mostly-sunny
  • hicon-family-friendly
  • hicon-family-fun
  • hicon-family-line
  • hicon-family-room
  • hicon-family-special-deal
  • hicon-family-with-teens
  • hicon-fan
  • hicon-faq
  • hicon-favorite-filled
  • hicon-favorite
  • hicon-fax-machine
  • hicon-fax-or-photo
  • hicon-feedback
  • hicon-female-capsule
  • hicon-few-clouds
  • hicon-filter-line
  • hicon-fire-extinguisher
  • hicon-fireplace
  • hicon-first-aid-kit
  • hicon-fishing
  • hicon-fitness-center-charge
  • hicon-fitness-center
  • hicon-fitness-club
  • hicon-flash-deal-solid
  • hicon-flash-sale
  • hicon-flight-earn
  • hicon-flights-airplane
  • hicon-flights-destination-line
  • hicon-flights-hotel-line
  • hicon-flights-layover-exchange-line
  • hicon-flights-one-ways
  • hicon-flights-pin
  • hicon-flights-round-trip
  • hicon-flights-stop-layover-line
  • hicon-foggy
  • hicon-forgot-pass
  • hicon-free-bicycle
  • hicon-free-breakfast-line
  • hicon-free-breakfast
  • hicon-free-cancellation
  • hicon-free-fitness-center
  • hicon-free-night-stay-circle
  • hicon-free-night-stay-solid
  • hicon-free-night-stay
  • hicon-free-night
  • hicon-free-welcome-drink
  • hicon-free-wifi-in-all-rooms
  • hicon-freezing-drizzle
  • hicon-freezing-rain
  • hicon-frequent-traveler
  • hicon-fresh-newly-built-property
  • hicon-frigid-ice-crystals
  • hicon-g-giftcard
  • hicon-garden
  • hicon-gca-wreath-left
  • hicon-gca-wreath-right
  • hicon-get-extra-space
  • hicon-gift-souvenir-shop
  • hicon-giftcard-instant
  • hicon-giftcard
  • hicon-give-us-feedback
  • hicon-global
  • hicon-golf-course-on-site
  • hicon-golf-course-within-3k
  • hicon-grocery-deliveries
  • hicon-ground-floor
  • hicon-group-travelers
  • hicon-guest-house
  • hicon-gym
  • hicon-hail
  • hicon-hair-dryer
  • hicon-halal-restaurant-b
  • hicon-halal-restaurant
  • hicon-half-full-board
  • hicon-hamburger-dote
  • hicon-hamburger-menu
  • hicon-hangers
  • hicon-haze-windy
  • hicon-heart-of-the-city
  • hicon-heating
  • hicon-heavy-rain
  • hicon-heavy-snow
  • hicon-high-floor
  • hicon-high-to-low
  • hicon-hiking-trails
  • hicon-holiday-house
  • hicon-homestay
  • hicon-horse-riding
  • hicon-hospitals-clinics
  • hicon-hot-spring-access
  • hicon-hot-spring-bath
  • hicon-hot-tub
  • hicon-hot
  • hicon-hotel-benefit
  • hicon-hotel-book-last
  • hicon-hotel-data
  • hicon-hotel-great-location
  • hicon-hotel-star-half
  • hicon-hotel-star
  • hicon-hotel-wifi
  • hicon-hover-details
  • hicon-human-large
  • hicon-humidifier
  • hicon-hurricane
  • hicon-ic-filter-bestseller
  • hicon-iftar
  • hicon-import-calendar
  • hicon-in-room-safe
  • hicon-in-room-tablet
  • hicon-in-room-video-games
  • hicon-indoor-poor
  • hicon-infirmary
  • hicon-info-alert
  • hicon-info-with-circle
  • hicon-inhouse-movies
  • hicon-installment-graph
  • hicon-installment-line
  • hicon-instant-booking
  • hicon-instant
  • hicon-interconnecting-room-available
  • hicon-invalided-file
  • hicon-ipod-docking-station
  • hicon-islamic-prayer-room
  • hicon-isolated-thunderstorms
  • hicon-jacuzzi-bathtub
  • hicon-japanese-futon
  • hicon-jcb
  • hicon-karaoke
  • hicon-keyless-access
  • hicon-kids-club
  • hicon-king-bed
  • hicon-kitchen-new
  • hicon-kitchen
  • hicon-kitchenette-bold
  • hicon-kitchenette
  • hicon-kitchenware
  • hicon-kosher-restaurant
  • hicon-lake-view
  • hicon-laptop-friendly-workspace
  • hicon-laptop-safe-box
  • hicon-last-minute-deal-2
  • hicon-last-minute-deal
  • hicon-last-viewed
  • hicon-late-check-out
  • hicon-laundromat
  • hicon-laundry-service
  • hicon-length-of-stay
  • hicon-library
  • hicon-light-rain
  • hicon-light-snow
  • hicon-lightbox
  • hicon-limited-access-floor
  • hicon-line-close
  • hicon-line-empty-circle
  • hicon-linens
  • hicon-link-out-bold
  • hicon-link-out
  • hicon-lobby
  • hicon-lockers
  • hicon-long-stay-deal
  • hicon-long-stays-promotion
  • hicon-long-stays
  • hicon-low-floor
  • hicon-low-to-high
  • hicon-luggage-storage
  • hicon-luggage
  • hicon-lunch
  • hicon-luxury
  • hicon-male-capsule-b
  • hicon-male-capsule
  • hicon-mandarin
  • hicon-map-airport
  • hicon-map-night
  • hicon-map-room
  • hicon-map-transportation
  • hicon-map-view
  • hicon-map-entry
  • hicon-massage
  • hicon-mastercard
  • hicon-max-occupancy-plus
  • hicon-max-occupancy
  • hicon-meeting-banquet
  • hicon-meeting-facilities
  • hicon-menu-about
  • hicon-menu-account
  • hicon-menu-bookings
  • hicon-menu-bug
  • hicon-menu-calendar
  • hicon-menu-contact-us
  • hicon-menu-favorite
  • hicon-menu-inbox
  • hicon-menu-listings
  • hicon-menu-overviews
  • hicon-menu-price-display
  • hicon-menu-reservations
  • hicon-menu-reviews
  • hicon-menu-today-deals
  • hicon-message-left
  • hicon-message-right
  • hicon-metro-subway-station
  • hicon-microwave
  • hicon-mini-bar
  • hicon-minibar-b
  • hicon-minus-thin
  • hicon-minus-with-circle
  • hicon-mirror
  • hicon-mist
  • hicon-mixed-rain-hail
  • hicon-mmb-account
  • hicon-mmb-booking
  • hicon-mmb-g-giftcard
  • hicon-mmb-gift-cards
  • hicon-mmb-inbox
  • hicon-mmb-my-booking
  • hicon-mmb-my-rewards
  • hicon-mmb-payment-methods
  • hicon-mmb-pointsmax
  • hicon-mmb-refer-a-friend
  • hicon-mmb-reviews-b
  • hicon-mmb-reviews
  • hicon-mmb-vip
  • hicon-more-bedrooms
  • hicon-more-money
  • hicon-mosquitonet
  • hicon-most-popular-destinations
  • hicon-mostly-cloudy-day
  • hicon-mostly-cloudy-night
  • hicon-motorbike
  • hicon-mountain-view
  • hicon-mse-icon
  • hicon-museum-arts
  • hicon-nav-back
  • hicon-nav-down-bold
  • hicon-nav-down-thin
  • hicon-nav-left-bold
  • hicon-nav-left-thin
  • hicon-nav-right-bold
  • hicon-nav-right-thin
  • hicon-nav-up-bold
  • hicon-nav-up-thin
  • hicon-negative
  • hicon-neighborhood-line
  • hicon-new-property
  • hicon-nha-icon
  • hicon-nha-logo
  • hicon-nightclub
  • hicon-nightlife
  • hicon-no-breakfast-a
  • hicon-no-breakfast-b
  • hicon-no-cc-fee
  • hicon-no-cc
  • hicon-no-children-allowed
  • hicon-non-smoking-room
  • hicon-non-smoking
  • hicon-not-available
  • hicon-number-of-floors
  • hicon-number-of-rooms
  • hicon-number-reviews
  • hicon-number1
  • hicon-occupancy
  • hicon-ocean-view
  • hicon-one-click
  • hicon-open-a-new-tab
  • hicon-outdoor-pool
  • hicon-paperclip
  • hicon-partly-cloudy-day
  • hicon-partly-cloudy-night
  • hicon-password
  • hicon-pay-at-hotel-in-cash
  • hicon-pay-at-the-place
  • hicon-pay-on-checkin
  • hicon-payment-option-no-credit-card
  • hicon-payments
  • hicon-pending-bold
  • hicon-pending
  • hicon-personal-cheque
  • hicon-personal-details
  • hicon-pet-allowed-room
  • hicon-pets-allowed
  • hicon-photo-uploader
  • hicon-photocopying
  • hicon-pin-airport
  • hicon-pin-beach
  • hicon-pin-business
  • hicon-pin-casino
  • hicon-pin-culture
  • hicon-pin-family-fun
  • hicon-pin-heart-of-city-mind
  • hicon-pin-heart-of-the-city
  • hicon-pin-mountain-view
  • hicon-pin-museum-arts
  • hicon-pin-nightlife
  • hicon-pin-poi
  • hicon-pin-religious
  • hicon-pin-restaurant
  • hicon-pin-romance
  • hicon-pin-shopping-markets
  • hicon-pin-sightseeing
  • hicon-pin-skiing
  • hicon-pin-spas
  • hicon-pin-tennis-courts
  • hicon-pin-transportation-hub
  • hicon-pin
  • hicon-plus-thin
  • hicon-plus-with-circle
  • hicon-poi-text-search
  • hicon-poi
  • hicon-pointsmax-line-logo
  • hicon-pointsmax-placeholder
  • hicon-pointsmax
  • hicon-police
  • hicon-pool-kids
  • hicon-pool
  • hicon-poolside-bar
  • hicon-portable-wifi-rental
  • hicon-positive
  • hicon-postal-service
  • hicon-price-drop
  • hicon-price-messaging
  • hicon-price-seen-user
  • hicon-printer
  • hicon-privacy-policy
  • hicon-private-bath
  • hicon-private-beach
  • hicon-private-entrance
  • hicon-private-pool
  • hicon-profiles
  • hicon-promo-code
  • hicon-properties
  • hicon-property-owner
  • hicon-property-tooltip
  • hicon-property-upgrades-line
  • hicon-queen-bed-bold
  • hicon-queen-bed
  • hicon-questions
  • hicon-rain-sleet
  • hicon-rain-to-snow-showers
  • hicon-rain
  • hicon-ratings
  • hicon-recently
  • hicon-reception
  • hicon-recommendations
  • hicon-refresh-bold
  • hicon-refresh
  • hicon-refrigerator
  • hicon-regular-in-room-emergency-alarm
  • hicon-regular-in-room-toilet-and-bathtub-with-handrails
  • hicon-regular-internet-access-connecting-port-only
  • hicon-regular-accept-guide-dog-in-guest-room
  • hicon-regular-accept-guide-dog
  • hicon-regular-aesthetic-salon
  • hicon-regular-airline-counter
  • hicon-regular-amusement-arcade
  • hicon-regular-amusement-park
  • hicon-regular-ana-crowne-plaza
  • hicon-regular-annex
  • hicon-regular-archery
  • hicon-regular-aromatherapy
  • hicon-regular-automatic-mahjong
  • hicon-regular-baby-diaper
  • hicon-regular-baby-food-prepared
  • hicon-regular-baby-kids-room
  • hicon-regular-baby
  • hicon-regular-barber-shop
  • hicon-regular-baseball
  • hicon-regular-bath-materials
  • hicon-regular-bath-temperature
  • hicon-regular-bath-water
  • hicon-regular-beauty-salon
  • hicon-regular-bicycle-rental-for-kids
  • hicon-regular-big-dog-allowed
  • hicon-regular-botanical-observation
  • hicon-regular-braille-support-in-rooms-and-public-spaces
  • hicon-regular-braille-support
  • hicon-regular-capacity
  • hicon-regular-change-flight
  • hicon-regular-chargeable-internet-access
  • hicon-regular-child-meal-a
  • hicon-regular-child-meal-b
  • hicon-regular-children-yukata
  • hicon-regular-chinese-cuisine
  • hicon-regular-clam-digging
  • hicon-regular-complimentary-shuttle-service-reservation-required
  • hicon-regular-complimentary-shuttle-service
  • hicon-regular-computer
  • hicon-regular-cormorant-fishing
  • hicon-regular-cosmetics
  • hicon-regular-countryside
  • hicon-regular-craft-workshop
  • hicon-regular-cycling
  • hicon-regular-dance-hall
  • hicon-regular-electric-hot-water-pot
  • hicon-regular-elevator-for-wheelchair
  • hicon-regular-emergency-alarm-for-hearing-impaired
  • hicon-regular-emergency-alarm
  • hicon-regular-english
  • hicon-regular-exposition-hall
  • hicon-regular-family-bath
  • hicon-regular-family-with-teens-new
  • hicon-regular-farm-fish-tourism
  • hicon-regular-female-only
  • hicon-regular-first-aid
  • hicon-regular-fishing-gear-rental
  • hicon-regular-gallery
  • hicon-regular-gateball-field
  • hicon-regular-gateball
  • hicon-regular-gender
  • hicon-regular-go-game
  • hicon-regular-gravel-path-at-entrance
  • hicon-regular-gymnasium
  • hicon-regular-handrails-in-stairs-and-hallways
  • hicon-regular-hang-gliding
  • hicon-regular-hiking
  • hicon-regular-hot-spring-access
  • hicon-regular-hot-spring-bath
  • hicon-regular-hotel-chain
  • hicon-regular-hotel-inside-accessible-by-wheelchair
  • hicon-regular-hunting
  • hicon-regular-in-room-emergency-alarm-for-hearing-impaired
  • hicon-regular-infant
  • hicon-regular-insect-collection
  • hicon-regular-internet-access-from-all-rooms
  • hicon-regular-internet-access-limited-number-of-rooms
  • hicon-regular-itinerary
  • hicon-regular-japanese-cuisine
  • hicon-regular-japanese-style-tea-room
  • hicon-regular-japanese-style-toilet-squat-type
  • hicon-regular-large-indoor-bath
  • hicon-regular-light-meal-corner
  • hicon-regular-local-event
  • hicon-regular-mahjong
  • hicon-regular-male-only
  • hicon-regular-martial-arts-gym
  • hicon-regular-meal
  • hicon-regular-meditation-hall
  • hicon-regular-modify-search
  • hicon-regular-mountain-view
  • hicon-regular-multipurpose-sports-ground
  • hicon-regular-night
  • hicon-regular-noh-stage
  • hicon-regular-open-air-bath-mixed-gender
  • hicon-regular-open-air-bath-none-mixed
  • hicon-regular-open-air-workshop
  • hicon-regular-orienteering
  • hicon-regular-package-savings
  • hicon-regular-package
  • hicon-regular-pet-can-bath-in-room
  • hicon-regular-pet-can-eat-in-room
  • hicon-regular-pharmacy
  • hicon-regular-pool-seasonal-opening
  • hicon-regular-pool-year-round
  • hicon-regular-prayer-room
  • hicon-regular-preselected-flight
  • hicon-regular-price-fluctuates
  • hicon-regular-private-open-air-bath
  • hicon-regular-queen-bed
  • hicon-regular-razor
  • hicon-regular-reading-room
  • hicon-regular-rooms-with-kotatsu
  • hicon-regular-ropes-course
  • hicon-regular-rugby
  • hicon-regular-salt
  • hicon-regular-scuba-diving
  • hicon-regular-seat-with-leg-room
  • hicon-regular-seine-fishing
  • hicon-regular-shared-acccessible-toilet
  • hicon-regular-shared-private-hot-bath-accessible-by-wheelchair
  • hicon-regular-shared-western-style-toilets
  • hicon-regular-shogi
  • hicon-regular-show-more
  • hicon-regular-shower-booth
  • hicon-regular-sign-language-support-at-reception
  • hicon-regular-skating
  • hicon-regular-ski-clothes-rental
  • hicon-regular-ski-equipment-rentals-for-kids
  • hicon-regular-ski-rental
  • hicon-regular-ski-shoes-rental
  • hicon-regular-ski-slope
  • hicon-regular-skin-diving
  • hicon-regular-skylounge
  • hicon-regular-sled-rental-for-kids
  • hicon-regular-slippers-for-kids
  • hicon-regular-slope-at-entrance
  • hicon-regular-small-dog-allowed-indoor-dogs
  • hicon-regular-snowboard-rental
  • hicon-regular-soccer
  • hicon-regular-spa-sauna
  • hicon-regular-sudate
  • hicon-regular-tap-water
  • hicon-regular-tea-lounge
  • hicon-regular-tennis-racket-rental
  • hicon-regular-tennis
  • hicon-regular-theatre
  • hicon-regular-time-icon
  • hicon-regular-toilet-and-bathtub-with-handrails
  • hicon-regular-toilet-with-bidet
  • hicon-regular-toilet
  • hicon-regular-toothbrush
  • hicon-regular-travel-agency
  • hicon-regular-travel-protection
  • hicon-regular-travelers
  • hicon-regular-valley
  • hicon-regular-voleyball
  • hicon-regular-walkability
  • hicon-regular-wedding-venue
  • hicon-regular-western-cuisine
  • hicon-regular-wheel-chair-friendly-rooms
  • hicon-regular-wheelchair-accessible-rooms
  • hicon-regular-wild-bird-observation
  • hicon-regular-workshop
  • hicon-regular-yachting
  • hicon-regular-yukata-for-kids
  • hicon-regular-yukata-japanese-pajamas
  • hicon-religious
  • hicon-reporting-property
  • hicon-reporting
  • hicon-reservation
  • hicon-residence
  • hicon-resort-property-plan
  • hicon-restaurant-credit
  • hicon-restaurant
  • hicon-review-line
  • hicon-ribbon-card-no-circle
  • hicon-ribbon-card
  • hicon-romance
  • hicon-room-plan
  • hicon-room-promotion-for-flashdeal
  • hicon-room-promotion-for-mobiledeal
  • hicon-room-promotion-for-otherdeal
  • hicon-room-promotion-for-smartdeal
  • hicon-room-promotion-super-savedeal
  • hicon-room-promotion
  • hicon-room-service
  • hicon-room-size
  • hicon-room-voltage
  • hicon-round-trip
  • hicon-safety-deposit-boxes
  • hicon-salon
  • hicon-satellite-cable-channels
  • hicon-satellite-television
  • hicon-sauna
  • hicon-save-to-pdf
  • hicon-scale
  • hicon-scattered-clouds
  • hicon-scattered-flurries
  • hicon-scattered-showers
  • hicon-scattered-snow-showe
  • hicon-scattered-thunderstorms
  • hicon-scissor
  • hicon-search-box
  • hicon-search-icon
  • hicon-seating-area
  • hicon-self-parking
  • hicon-semi-double-bed-b
  • hicon-semi-double-bed
  • hicon-separate-dining-area
  • hicon-separate-dinning-area-regular
  • hicon-separate-living-room
  • hicon-separate-shower-and-tub
  • hicon-seriously-multilingual
  • hicon-sewing-kit
  • hicon-shampoo
  • hicon-share
  • hicon-shared-bath
  • hicon-shared-kitchen
  • hicon-shoeshine-kit
  • hicon-shopping-markets
  • hicon-shops
  • hicon-show-more
  • hicon-shower-and-bathtub
  • hicon-shower-rain
  • hicon-shower
  • hicon-shrine
  • hicon-shuttle-service
  • hicon-sightseeing
  • hicon-single-bed-b
  • hicon-single-bed
  • hicon-ski-equipment-rentals
  • hicon-ski-lessons
  • hicon-skiing
  • hicon-sleet
  • hicon-slippers
  • hicon-smoke-detector
  • hicon-smoke-windy
  • hicon-smoking-allowed
  • hicon-smoking-area
  • hicon-smorking-yes-no
  • hicon-snorkeling
  • hicon-snow
  • hicon-sofa-bed
  • hicon-sofa
  • hicon-solarium
  • hicon-solo
  • hicon-sort-line
  • hicon-soundproofing
  • hicon-spa-credit
  • hicon-spa-sauna
  • hicon-spas
  • hicon-special-condition
  • hicon-spoken-1
  • hicon-spoken-10
  • hicon-spoken-11
  • hicon-spoken-12
  • hicon-spoken-13
  • hicon-spoken-2
  • hicon-spoken-20
  • hicon-spoken-22
  • hicon-spoken-23
  • hicon-spoken-24
  • hicon-spoken-25
  • hicon-spoken-26
  • hicon-spoken-27
  • hicon-spoken-28
  • hicon-spoken-29
  • hicon-spoken-3
  • hicon-spoken-30
  • hicon-spoken-31
  • hicon-spoken-32
  • hicon-spoken-33
  • hicon-spoken-34
  • hicon-spoken-35
  • hicon-spoken-36
  • hicon-spoken-37
  • hicon-spoken-38
  • hicon-spoken-39
  • hicon-spoken-4
  • hicon-spoken-40
  • hicon-spoken-43
  • hicon-spoken-46
  • hicon-spoken-47
  • hicon-spoken-48
  • hicon-spoken-49
  • hicon-spoken-5
  • hicon-spoken-50
  • hicon-spoken-6
  • hicon-spoken-7
  • hicon-spoken-8
  • hicon-spoken-9
  • hicon-sqm
  • hicon-squash-courts
  • hicon-stack-of-square-papers
  • hicon-star-1
  • hicon-star-15
  • hicon-star-2
  • hicon-star-25
  • hicon-star-3
  • hicon-star-35
  • hicon-star-4
  • hicon-star-45
  • hicon-star-5
  • hicon-steamroom
  • hicon-strong-storms
  • hicon-subways
  • hicon-suitable-for-events
  • hicon-sunny
  • hicon-super-king-bed
  • hicon-surfing-lessons
  • hicon-swimming-pool-access
  • hicon-table-tennis
  • hicon-tamil
  • hicon-tax-id
  • hicon-tax-receipt-available
  • hicon-taxi-service
  • hicon-telephone
  • hicon-television-plasma
  • hicon-tennis-courts
  • hicon-text-area
  • hicon-text-links
  • hicon-theme-park
  • hicon-thin-arrow-down
  • hicon-thin-arrow-left
  • hicon-thin-arrow-right
  • hicon-thin-arrow-up
  • hicon-thin-circle-arrow-left
  • hicon-thin-sub-arrow
  • hicon-thumb-down-line
  • hicon-thumb-up-line
  • hicon-thunder-and-hail
  • hicon-thunderstorm
  • hicon-ticket-service
  • hicon-time-clock
  • hicon-time-icon
  • hicon-time-to-airport
  • hicon-toiletries
  • hicon-tonight-only
  • hicon-tools
  • hicon-tooltip-details
  • hicon-tooltip
  • hicon-top-floor
  • hicon-tornado
  • hicon-total-savings
  • hicon-total-support
  • hicon-tours
  • hicon-towels
  • hicon-train-new
  • hicon-train-station
  • hicon-tram-station
  • hicon-transfer-both-ways
  • hicon-transfer-one-ways
  • hicon-transportation-hub
  • hicon-transportation
  • hicon-trash-b
  • hicon-trash
  • hicon-travelers
  • hicon-trending-up
  • hicon-tropical-storm
  • hicon-trouser-press
  • hicon-tv-area
  • hicon-tv-flat-screen
  • hicon-tv
  • hicon-twin-bed
  • hicon-umbrella
  • hicon-unionpay
  • hicon-unlock
  • hicon-upload-your-logo
  • hicon-user-font-icon
  • hicon-valet-parking
  • hicon-vending-machine
  • hicon-view-point
  • hicon-views
  • hicon-villa
  • hicon-vip
  • hicon-visa-stamp
  • hicon-visa
  • hicon-wake-up-service
  • hicon-want-to-talk
  • hicon-washer
  • hicon-watch
  • hicon-water-park
  • hicon-water-sports-motorized
  • hicon-water-sports-non-motorized
  • hicon-watersports-equipment-rentals
  • hicon-weekend-discount
  • hicon-wheelchair-accessible
  • hicon-wifi-additional-charge
  • hicon-wifi-in-public-areas
  • hicon-wifi
  • hicon-wind-surfing
  • hicon-wintry-mix-snow-sleet
  • hicon-wired-internet
  • hicon-wooden-parqueted-flooring
  • hicon-x-icon
  • hicon-ycs-channels
  • hicon-ycs-dashboard
  • hicon-ycs-doc-csv
  • hicon-ycs-doc-excel
  • hicon-ycs-doc-pdf
  • hicon-ycs-doc-update
  • hicon-ycs-generic
  • hicon-ycs-no-show
  • hicon-year-hotel-built
  • hicon-year-hotel-last-renovated
  • hicon-yoga-room
  • hicon-zoom-bold

8. Source & Credits

8.1. Images/Video:

Note: The images and videos in the Demo version are not included in the download file.

8.2. Fonts:

8.3. Library:

9. Support

If this documentation doesn't answer your questions, So, Please send us Email via Contact Form

We are located in GMT +7:00 time zone and we answer all questions within 12-24 hours in weekdays.

Don’t forget to Rate this template

10. Changelog

10.1. Version 1.0 (Aug 03 2024)

Initial Release

10.2. Version 1.1 (Sep 06 2024)

Modified:
  1. Modified website width.
  2. Modified pages to fit new page width.
  3. Modified tours search (added search field).
  4. Modified hero captions to center.
  5. Modified page titles to center.
  6. Modified logo center on mobile.
  7. Modified border radius of elements.
  8. Modified post style.
  9. Modified breadcrumb position.
  10. Modified about us page.
  11. Modified video popup click box (removed white border).
Added:
  1. Added SCSS file.
  2. Added tour search style (full width).
  3. Added destination section style (homepages).
  4. Added tour category section style (homepages).
  5. Added testimonial section style (homepage and about pages).
  6. Added post style (homepage 1)
  7. Added hero background video (Homepage 2).
  8. Added homepage 2.
  9. Added homepage 3.
  10. Added destination page 2.
  11. Added destination page 3.
  12. Added tour package page 2 (grid view, with tour filtering feature).
  13. Added tour package page 3 (list view, with tour filtering feature).
  14. Added single tour page 2.
  15. Added single tour page 3.