# Hotel, cab, flight & tour experience

Get the best prices on 2,000,000+ properties, worldwide

    <!-- =======================
    Main banner START -->
    <section class="pt-0">
    	<!-- Background and title -->
    	<div class="container-fluid" style="background-image:url(assets/images/bg/08.jpg); background-position: center left; background-size: cover;">
    		<div class="row">
    			<!-- Title -->
    			<div class="col-md-6 mx-auto text-center pt-7 pb-9">
    				<h1 class="text-white">Hotel, cab, flight & tour experience</h1>
    				<p class="lead text-white mb-0">Get the best prices on 2,000,000+ properties, worldwide</p>
    			</div>
    		</div> <!-- Row END -->
    	</div>

    	<!-- Search START -->
    	<div class="container mt-n8">
    		<div class="row">
    			<!-- Tabs START -->
    			<div class="col-11 col-lg-8 col-xl-6 mx-auto">
    				<ul class="nav nav-tabs nav-bottom-line nav-justified nav-responsive bg-mode rounded-top z-index-9 position-relative pt-2 pb-0 px-4">
    					<li class="nav-item">
    						<a class="nav-link mb-0 active" data-bs-toggle="tab" href="#tab-1-1"><i class="fa-solid fa-hotel fa-fw me-2"></i>Hotel</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link mb-0" data-bs-toggle="tab" href="#tab-1-2"><i class="fa-solid fa-plane fa-fw me-2"></i>Flight</a>
    						</li>
    					<li class="nav-item">
    						<a class="nav-link mb-0" data-bs-toggle="tab" href="#tab-1-3"><i class="fa-solid fa-globe-americas fa-fw me-2"></i>Tour</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link mb-0 pe-0" data-bs-toggle="tab" href="#tab-1-4"><i class="fa-solid fa-car fa-fw me-2"></i>Cabs</a>
    					</li>
    				</ul>
    			</div>
    			<!-- Tabs END -->

    			<!-- Tab content START -->
    			<div class="col-12">
    				<div class="tab-content" id="nav-tabContent">

    					<!-- Tab content item START -->
    					<div class="tab-pane fade show active" id="tab-1-1">
    						<form class="card shadow p-0">
    							<!-- Card header -->
    							<div class="card-header p-4">
    								<h5 class="mb-0"><i class="fa-solid fa-hotel fa-fw me-2"></i>Hotel Booking</h5>
    							</div>

    							<!-- Card body -->
    							<div class="card-body p-4 pt-0">
    								<div class="row g-4">
    									<!-- Location -->
    									<div class="col-12">
    										<div class="form-icon-input form-size-lg form-fs-lg">
    											<select class="form-select js-choice" data-search-enabled="true">
    												<option value="">Search hotel</option>
    												<option>San Jacinto, USA</option>
    												<option>North Dakota, Canada</option>
    												<option>West Virginia, Paris</option>
    											</select>
    											<span class="form-icon"><i class="bi bi-search fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Guest -->
    									<div class="col-lg-4">
    										<div class="form-icon-input form-fs-lg">
    											<div class="dropdown guest-selector me-2">
    												<input type="text" class="form-guest-selector form-control form-control-lg selection-result" placeholder="Select occupant" data-bs-auto-close="outside" data-bs-toggle="dropdown">

    												<!-- dropdown items -->
    												<ul class="dropdown-menu guest-selector-dropdown">
    													<!-- Adult -->
    													<li class="d-flex justify-content-between">
    														<div>
    															<h6 class="mb-0">Adults</h6>
    															<small>Ages 13 or above</small>
    														</div>

    														<div class="hstack gap-1 align-items-center">
    															<button type="button" class="btn btn-link adult-remove p-0 mb-0"><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
    															<h6 class="guest-selector-count mb-0 adults">2</h6>
    															<button type="button" class="btn btn-link adult-add p-0 mb-0"><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
    														</div>
    													</li>

    													<!-- Divider -->
    													<li class="dropdown-divider"></li>

    													<!-- Child -->
    													<li class="d-flex justify-content-between">
    														<div>
    															<h6 class="mb-0">Child</h6>
    															<small>Ages 13 below</small>
    														</div>

    														<div class="hstack gap-1 align-items-center">
    															<button type="button" class="btn btn-link child-remove p-0 mb-0" ><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
    															<h6 class="guest-selector-count mb-0 child">0</h6>
    															<button type="button" class="btn btn-link child-add p-0 mb-0" ><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
    														</div>
    													</li>

    													<!-- Divider -->
    													<li class="dropdown-divider"></li>

    													<!-- Rooms -->
    													<li class="d-flex justify-content-between">
    														<div>
    															<h6 class="mb-0">Rooms</h6>
    															<small>Max room 8</small>
    														</div>

    														<div class="hstack gap-1 align-items-center">
    															<button type="button" class="btn btn-link room-remove p-0 mb-0" ><i class="bi bi-dash-circle fs-5 fa-fw"></i></button>
    															<h6 class="guest-selector-count mb-0 rooms">1</h6>
    															<button type="button" class="btn btn-link room-add p-0 mb-0" ><i class="bi bi-plus-circle fs-5 fa-fw"></i></button>
    														</div>
    													</li>
    												</ul>
    											</div>
    											<span class="form-icon"><i class="bi bi-people fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Date -->
    									<div class="col-lg-4">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/m/y" placeholder="Select check-in date">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Date -->
    									<div class="col-lg-4">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/m/y" placeholder="Select check-out date">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>

    								</div> <!-- Row END -->

    								<!-- Button -->
    								<div class="text-center pt-0">
    									<a class="btn btn-lg btn-primary mb-n7" href="#">Search Hotel <i class="bi bi-arrow-right ps-3"></i></a>
    								</div>
    							</div>
    						</form>
    					</div>
    					<!-- Tab content item END -->

    					<!-- Tab content item START -->
    					<div class="tab-pane fade" id="tab-1-2">
    						<form class="card shadow p-0">
    							<!-- Card header -->
    							<div class="card-header p-4">
    								<div class="row g-4 align-items-center">
    									<!-- Title -->
    									<div class="col-lg-4 col-xl-6">
    										<h5 class="mb-0"><i class="fa-solid fa-plane fa-fw me-2"></i>Flight Booking</h5>
    									</div>
    									<!-- Radio tab -->
    									<div class="col-md-6 col-lg-4 col-xl-3 ms-auto">
    										<div class="nav nav-pills" id="pills-tab" role="tablist">
    											<div class="form-check form-check-inline active" id="flight-one-way-tab" data-bs-toggle="pill" data-bs-target="#flight-one-way" role="tab" aria-controls="flight-one-way" aria-selected="true">
    												<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked>
    												<label class="form-check-label" for="inlineRadio1">One Way</label>
    											</div>
    											<div class="form-check form-check-inline" id="flight-round-way-tab" data-bs-toggle="pill" data-bs-target="#flight-round-way" role="tab" aria-controls="flight-round-way" aria-selected="false">
    												<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    												<label class="form-check-label" for="inlineRadio2">Round Trip</label>
    											</div>
    										</div>
    									</div>
    									<!-- Select -->
    									<div class="col-md-6 col-lg-4 col-xl-3 ms-auto">
    										<div class="form-control-bg-light border rounded form-fs-md">
    											<select class="form-select js-choice" aria-label=".form-select-sm">
    												<option value="">Select Class</option>
    												<option>Economy</option>
    												<option>Premium Economy</option>
    												<option>Business</option>
    												<option>First Class</option>
    											</select>
    										</div>
    									</div>
    								</div>
    							</div>

    							<!-- Card body -->
    							<div class="card-body p-4 pt-0">
    								<!-- Tab content START -->
    								<div class="tab-content" id="pills-tabContent">
    									<!-- One way tab START -->
    									<div class="tab-pane fade show active" id="flight-one-way" role="tabpanel" aria-labelledby="flight-one-way-tab">
    										<div class="row g-4">
    											<!-- From -->
    											<div class="col-md-6 position-relative">
    												<div class="form-icon-input form-size-lg form-fs-lg">
    													<select class="form-select js-choice" data-search-enabled="true">
    														<option value="">Flying from...</option>
    														<option>San Jacinto, USA</option>
    														<option>North Dakota, Canada</option>
    														<option>West Virginia, Paris</option>
    													</select>
    													<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    												</div>

    												<!-- Auto fill button -->
    												<div class="btn-flip-icon z-index-9">
    													<button class="btn btn-dark shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    												</div>
    											</div>

    											<!-- To -->
    											<div class="col-md-6">
    												<div class="form-icon-input form-size-lg form-fs-lg">
    													<select class="form-select js-choice" data-search-enabled="true">
    														<option value="">Flying to...</option>
    														<option>San Jacinto, USA</option>
    														<option>North Dakota, Canada</option>
    														<option>West Virginia, Paris</option>
    													</select>
    													<span class="form-icon"><i class="bi bi-send fs-5"></i></span>
    												</div>
    											</div>

    											<!-- Date -->
    											<div class="col-md-6">
    												<div class="form-icon-input form-fs-lg">
    													<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y"  placeholder="Select check-in date">
    													<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    												</div>
    											</div>

    											<!-- Guest -->
    											<div class="col-md-6">
    												<div class="form-icon-input form-fs-lg">
    													<input type="text" class="form-control form-control-lg" placeholder="Select occupant">
    													<span class="form-icon"><i class="bi bi-people fs-5"></i></span>
    												</div>
    											</div>
    										</div>

    										<!-- Button -->
    										<div class="text-center pt-0">
    											<a class="btn btn-lg btn-primary mb-n7" href="#">Search Flight <i class="bi bi-arrow-right ps-3"></i></a>
    										</div>
    									</div>
    									<!-- One way trip END -->

    									<!-- Round way tab START -->
    									<div class="tab-pane fade" id="flight-round-way" role="tabpanel" aria-labelledby="flight-round-way-tab">
    										<!-- One way trip START -->
    										<div class="row g-4">
    											<!-- From -->
    											<div class="col-md-6 position-relative">
    												<div class="form-icon-input form-size-lg form-fs-lg">
    													<select class="form-select js-choice" data-search-enabled="true">
    														<option value="">Flying from...</option>
    														<option>San Jacinto, USA</option>
    														<option>North Dakota, Canada</option>
    														<option>West Virginia, Paris</option>
    													</select>
    													<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    												</div>

    												<!-- Auto fill button -->
    												<div class="btn-flip-icon z-index-9">
    													<button class="btn btn-dark shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    												</div>
    											</div>

    											<!-- To -->
    											<div class="col-md-6">
    												<div class="form-icon-input form-size-lg form-fs-lg">
    													<select class="form-select js-choice" data-search-enabled="true">
    														<option value="">Flying to...</option>
    														<option>San Jacinto, USA</option>
    														<option>North Dakota, Canada</option>
    														<option>West Virginia, Paris</option>
    													</select>
    													<span class="form-icon"><i class="bi bi-send fs-5"></i></span>
    												</div>
    											</div>

    											<!-- Date -->
    											<div class="col-md-4">
    												<div class="form-icon-input form-fs-lg">
    													<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select check-in date">
    													<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    												</div>
    											</div>

    											<!-- Date -->
    											<div class="col-md-4">
    												<div class="form-icon-input form-fs-lg">
    													<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select check-out date">
    													<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    												</div>
    											</div>

    											<!-- Guest -->
    											<div class="col-md-4">
    												<div class="form-icon-input form-fs-lg">
    													<input type="text" class="form-control form-control-lg" placeholder="Select occupant">
    													<span class="form-icon"><i class="bi bi-people fs-5"></i></span>
    												</div>
    											</div>
    										</div>
    										<!-- Button -->
    										<div class="col-12 text-center pt-0">
    											<a class="btn btn-lg btn-primary mb-n7" href="#">Search Flight <i class="bi bi-arrow-right ps-3"></i></a>
    										</div>
    										<!-- One way trip END -->
    									</div>
    									<!-- Round way tab END -->
    								</div>
    								<!-- Tab content END -->
    							</div>
    						</form>
    					</div>
    					<!-- Tab content item END -->

    					<!-- Tab content item START -->
    					<div class="tab-pane fade" id="tab-1-3">
    						<form class="card shadow p-0">
    							<!-- Card header -->
    							<div class="card-header p-4">
    								<h5 class="mb-0"><i class="fa-solid fa-globe-americas fa-fw me-2"></i>Tour Booking</h5>
    							</div>

    							<!-- Card body -->
    							<div class="card-body p-4 pt-0">
    								<div class="row g-4">
    									<!-- Location -->
    									<div class="col-lg-4">
    										<div class="form-icon-input form-size-lg form-fs-lg">
    											<select class="form-select js-choice" data-search-enabled="true">
    												<option value="">Select tour location</option>
    												<option>San Jacinto, USA</option>
    												<option>North Dakota, Canada</option>
    												<option>West Virginia, Paris</option>
    											</select>
    											<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Date -->
    									<div class="col-lg-4">
    										<div class="form-icon-input form-fs-lg">
    											<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select date">
    											<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    										</div>
    									</div>

    									<!-- Guest -->
    									<div class="col-lg-4">
    										<div class="form-icon-input form-size-lg form-fs-lg">
    											<select class="form-select js-choice" data-search-enabled="true">
    												<option value="">Select tour type</option>
    												<option>Adventure</option>
    												<option>Beach</option>
    												<option>Desert</option>
    												<option>History</option>
    											</select>
    											<span class="form-icon"><i class="fa-solid fa-person-skating fs-5"></i></span>
    										</div>
    									</div>
    								</div> <!-- Row END -->

    								<!-- Button -->
    								<div class="text-center pt-0">
    									<a class="btn btn-lg btn-primary mb-n7" href="#">Search Tour <i class="bi bi-arrow-right ps-3"></i></a>
    								</div>
    							</div>
    						</form>
    					</div>
    					<!-- Tab content item END -->

    					<!-- Tab content item START -->
    					<div class="tab-pane fade" id="tab-1-4">
    						<form class="card shadow p-0">
    							<!-- Card header -->
    							<div class="card-header d-sm-flex justify-content-between align-items-center p-4">
    								<!-- Title -->
    								<h5 class="mb-3 mb-sm-0"><i class="fa-solid fa-car fa-fw me-2"></i>Cab Booking</h5>

    								<!-- Tabs -->
    								<ul class="nav nav-pills nav-pills-dark" id="pills-tab-2" role="tablist">
    									<li class="nav-item" role="presentation">
    										<button class="nav-link mb-0 active" id="pills-one-way-2-tab" data-bs-toggle="pill" data-bs-target="#pills-one-way-2" type="button" role="tab" aria-selected="true">One Way</button>
    									</li>
    									<li class="nav-item" role="presentation">
    										<button class="nav-link mb-0" id="pills-round-way-2-tab" data-bs-toggle="pill" data-bs-target="#pills-round-way-2" type="button" role="tab" aria-selected="false">Road Trip</button>
    									</li>
    								</ul>
    							</div>

    							<!-- Card body -->
    							<div class="card-body p-4 pt-0">
    								<!-- Tab content START -->
    								<div class="tab-content" id="pills-tabContent3">
    									<!-- One way tab START -->
    									<div class="tab-pane fade show active" id="pills-one-way-2" role="tabpanel" aria-labelledby="pills-one-way-2-tab">
    										<div class="row g-4">
    											<!-- Pickup -->
    											<div class="col-md-6 position-relative">
    												<div class="form-icon-input form-size-lg form-fs-lg">
    													<select class="form-select js-choice" data-search-enabled="true">
    														<option value="">Select pickup location...</option>
    														<option>San Jacinto, USA</option>
    														<option>North Dakota, Canada</option>
    														<option>West Virginia, Paris</option>
    													</select>
    													<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    												</div>

    												<!-- Auto fill button -->
    												<div class="btn-flip-icon z-index-9">
    													<button class="btn btn-white shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    												</div>
    											</div>

    											<!-- Drop -->
    											<div class="col-md-6">
    												<div class="form-icon-input form-size-lg form-fs-lg">
    													<select class="form-select js-choice" data-search-enabled="true">
    														<option value="">Select drop location...</option>
    														<option>San Jacinto, USA</option>
    														<option>North Dakota, Canada</option>
    														<option>West Virginia, Paris</option>
    													</select>
    													<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    												</div>
    											</div>

    											<!-- Pickup date -->
    											<div class="col-md-6">
    												<div class="form-icon-input form-fs-lg">
    													<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select pickup date">
    													<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    												</div>
    											</div>

    											<!-- Pickup time -->
    											<div class="col-md-6">
    												<div class="form-icon-input form-fs-lg">
    													<input type="text" class="form-control form-control-lg flatpickr" placeholder="Select pickup time" data-noCalendar="true" data-enableTime="true">
    													<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    												</div>
    											</div>
    										</div> <!-- Row END -->
    										<!-- Button -->
    										<div class="text-center pt-0">
    											<a class="btn btn-lg btn-primary mb-n7" href="#">Search Cabs <i class="bi bi-arrow-right ps-3"></i></a>
    										</div>
    									</div>
    									<!-- One way tab END -->

    									<!-- Round way tab START -->
    									<div class="tab-pane fade" id="pills-round-way-2" role="tabpanel" aria-labelledby="pills-round-way-2-tab">
    										<div class="row g-4">
    											<!-- Pickup -->
    											<div class="col-md-6 position-relative">
    												<div class="form-icon-input form-size-lg form-fs-lg">
    													<select class="form-select js-choice" data-search-enabled="true">
    														<option value="">Select pickup location...</option>
    														<option>San Jacinto, USA</option>
    														<option>North Dakota, Canada</option>
    														<option>West Virginia, Paris</option>
    													</select>
    													<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    												</div>

    												<!-- Auto fill button -->
    												<div class="btn-flip-icon z-index-9">
    													<button class="btn btn-white shadow btn-round mb-0"><i class="fa-solid fa-right-left"></i></button>
    												</div>
    											</div>

    											<!-- Drop -->
    											<div class="col-md-6">
    												<div class="form-icon-input form-size-lg form-fs-lg">
    													<select class="form-select js-choice" data-search-enabled="true">
    														<option value="">Select drop location...</option>
    														<option>San Jacinto, USA</option>
    														<option>North Dakota, Canada</option>
    														<option>West Virginia, Paris</option>
    													</select>
    													<span class="form-icon"><i class="bi bi-geo-alt fs-5"></i></span>
    												</div>
    											</div>

    											<!-- Pickup date -->
    											<div class="col-md-6 col-lg-3">
    												<div class="form-icon-input form-fs-lg">
    													<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select pickup date">
    													<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    												</div>
    											</div>

    											<!-- Pickup time -->
    											<div class="col-md-6 col-lg-3">
    												<div class="form-icon-input form-fs-lg">
    													<input type="text" class="form-control form-control-lg flatpickr" placeholder="Select pickup time" data-noCalendar="true" data-enableTime="true">
    													<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    												</div>
    											</div>

    											<!-- Drop date -->
    											<div class="col-md-6 col-lg-3">
    												<div class="form-icon-input form-fs-lg">
    													<input type="text" class="form-control form-control-lg flatpickr" data-date-format="d/M/Y" placeholder="Select return date">
    													<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    												</div>
    											</div>

    											<!-- Drop time -->
    											<div class="col-md-6 col-lg-3">
    												<div class="form-icon-input form-fs-lg">
    													<input type="text" class="form-control form-control-lg flatpickr" placeholder="Select return time" data-noCalendar="true" data-enableTime="true">
    													<span class="form-icon"><i class="bi bi-calendar fs-5"></i></span>
    												</div>
    											</div>
    										</div> <!-- Row END -->
    										<!-- Button -->
    										<div class="text-center pt-0">
    											<a class="btn btn-lg btn-primary mb-n7" href="#">Search cabs <i class="bi bi-arrow-right ps-3"></i></a>
    										</div>
    									</div>
    									<!-- Round way tab END -->
    								</div>
    							</div>
    						</form>
    					</div>
    					<!-- Tab content item END -->

    				</div>
    			</div>
    			<!-- Tab content END -->
    		</div>
    	</div>
    	<!-- Search END -->
    </section>
    <!-- =======================
    Main banner START -->

Copy-paste the stylesheet `<link>` into your `<head>` to load the CSS.

    <link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/choices/css/choices.min.css">

Copy-paste the following `<script>` near the end of your pages under Vendors to enable it.

    <script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
    <script src="assets/vendor/choices/js/choices.min.js"></script>