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>