Traveling internationally? Get update information on COVID-19 travel guidance and restrictionsLearn more!

# Ready to take off?

From
To
Departure
Find ticket
From
To
Departure
Return
Find ticket

    <!-- =======================
    Main Banner START -->
    <section class="py-0">
    	<div class="container">
    		<!-- Background image -->
    		<div class="rounded-3 p-3 p-sm-5" style="background-image: url(assets/images/bg/01.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;">
    			<!-- Banner title -->
    			<div class="row">
    				<div class="col-md-10 mx-auto text-center">
    					<h1 class="text-dark display-3 pt-sm-5 my-5">Ready to take off?</h1>
    				</div>
    			</div>

    			<!-- Booking from START -->
    			<form class="bg-mode position-relative px-3 px-sm-4 pt-4 mb-4 mb-sm-0">

    				<!-- Svg decoration -->
    				<figure class="position-absolute top-0 start-0 h-100 ms-n2 ms-sm-n1">
    					<svg class="h-100" viewBox="0 0 12.9 324" style="enable-background:new 0 0 12.9 324;">
    						<path class="fill-mode" d="M9.8,316.4c1.1-26.8,2-53.4,1.9-80.2c-0.1-18.2-0.8-36.4-1.2-54.6c-0.2-8.9-0.2-17.7,0.8-26.6 c0.5-4.5,1.1-9,1.4-13.6c0.1-1.9,0.1-3.7,0.1-5.6c-0.2-0.2-0.6-1.5-0.2-3.1c-0.3-1.8-0.4-3.7-0.4-5.5c-1.2-3-1.8-6.3-1.7-9.6 c0.9-19,0.5-38.1,0.8-57.2c0.3-17.1,0.6-34.2,0.2-51.3c-0.1-0.6-0.1-1.2-0.1-1.7c0-0.8,0-1.6,0-2.4c0-0.5,0-1.1,0-1.6 c0-1.2,0-2.3,0.2-3.5H0v11.8c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V31c3.3,0,6.1,2.7,6.1,6.1S3.3,43.3,0,43.3v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 s-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V324h9.5C9.6,321.4,9.7,318.8,9.8,316.4z"/>
    					</svg>
    				</figure>

    				<!-- Svg decoration -->
    				<figure class="position-absolute top-0 end-0 h-100 rotate-180 me-n2 me-sm-n1">
    					<svg class="h-100" viewBox="0 0 21 324" style="enable-background:new 0 0 21 324;">
    						<path class="fill-mode" d="M9.8,316.4c1.1-26.8,2-53.4,1.9-80.2c-0.1-18.2-0.8-36.4-1.2-54.6c-0.2-8.9-0.2-17.7,0.8-26.6 c0.5-4.5,1.1-9,1.4-13.6c0.1-1.9,0.1-3.7,0.1-5.6c-0.2-0.2-0.6-1.5-0.2-3.1c-0.3-1.8-0.4-3.7-0.4-5.5c-1.2-3-1.8-6.3-1.7-9.6 c0.9-19,0.5-38.1,0.8-57.2c0.3-17.1,0.6-34.2,0.2-51.3c-0.1-0.6-0.1-1.2-0.1-1.7c0-0.8,0-1.6,0-2.4c0-0.5,0-1.1,0-1.6 c0-1.2,0-2.3,0.2-3.5H0v11.8c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V31c3.3,0,6.1,2.7,6.1,6.1S3.3,43.3,0,43.3v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 s-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9 c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.7,6.1,6.1 c0,3.4-2.8,6.1-6.1,6.1v6.9c3.3,0,6.1,2.8,6.1,6.1c0,3.4-2.8,6.1-6.1,6.1V324h9.5C9.6,321.4,9.7,318.8,9.8,316.4z"/>
    					</svg>
    				</figure>

    				<div class="row g-4">

    					<!-- Nav tabs START -->
    					<div class="col-lg-6">
    						<ul class="nav nav-pills nav-pills-dark" id="pills-tab" role="tablist">
    							<li class="nav-item" role="presentation">
    								<button class="nav-link mb-0 active" id="pills-one-way-tab" data-bs-toggle="pill" data-bs-target="#pills-one-way" 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-trip-tab" data-bs-toggle="pill" data-bs-target="#pills-round-trip" type="button" role="tab" aria-selected="false">Round Trip</button>
    							</li>
    						</ul>
    					</div>
    					<!-- Nav tabs END -->

    					<!-- Ticket class -->
    					<div class="col-lg-3 ms-auto">
    						<div class="form-control-bg-light form-fs-md">
    							<select class="form-select js-choice">
    								<option value="">Select Class</option>
    								<option>Economy</option>
    								<option>Premium Economy</option>
    								<option>Business</option>
    								<option>First Class</option>
    							</select>
    						</div>
    					</div>

    					<!-- Ticket Travelers -->
    					<div class="col-lg-3 ms-auto">
    						<div class="form-control-bg-light form-fs-md">
    							<select class="form-select js-choice">
    								<option value="">Select Travelers</option>
    								<option>1</option>
    								<option>2</option>
    								<option>3</option>
    								<option>4</option>
    							</select>
    						</div>
    					</div>

    					<!-- Tab content START -->
    					<div class="tab-content mt-4" id="pills-tabContent">
    						<!-- One way tab START -->
    						<div class="tab-pane fade show active" id="pills-one-way" role="tabpanel" aria-labelledby="pills-one-way-tab">
    							<div class="row g-4">
    								<!-- Leaving From -->
    								<div class="col-md-6 col-lg-4 position-relative">
    									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
    										<!-- Input field -->
    										<label class="mb-1"><i class="bi bi-geo-alt me-2"></i>From</label>
    										<select class="form-select js-choice" data-search-enabled="true">
    											<option value="">Select location</option>
    											<option>San Jacinto, USA</option>
    											<option>North Dakota, Canada</option>
    											<option>West Virginia, Paris</option>
    										</select>
    									</div>

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

    								<!-- Going To -->
    								<div class="col-md-6 col-lg-4">
    									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
    										<!-- Input field -->
    										<label class="mb-1"><i class="bi bi-send me-2"></i>To</label>
    										<select class="form-select js-choice" data-search-enabled="true">
    											<option value="">Select location</option>
    											<option>San Jacinto, USA</option>
    											<option>North Dakota, Canada</option>
    											<option>West Virginia, Paris</option>
    										</select>
    									</div>
    								</div>

    								<!-- Departure -->
    								<div class="col-lg-4">
    									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
    										<label class="mb-1"><i class="bi bi-calendar me-2"></i>Departure</label>
    										<input type="text" class="form-control flatpickr" data-date-format="d M Y" placeholder="Select date">
    									</div>
    								</div>

    								<div class="col-12 text-end pt-0">
    									<a  class="btn btn-primary mb-n4" href="#">Find ticket <i class="bi bi-arrow-right ps-3"></i></a>
    								</div>
    							</div>
    						</div>
    						<!-- One way tab END -->

    						<!-- Round way tab END -->
    						<div class="tab-pane fade" id="pills-round-trip" role="tabpanel" aria-labelledby="pills-round-trip-tab">
    							<div class="row g-4">

    								<!-- Leaving From -->
    								<div class="col-md-6 col-xl-3 position-relative">
    									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
    										<!-- Input field -->
    										<label class="mb-1"><i class="bi bi-geo-alt me-2"></i>From</label>
    										<select class="form-select js-choice" data-search-enabled="true">
    											<option value="">Select location</option>
    											<option>San Jacinto, USA</option>
    											<option>North Dakota, Canada</option>
    											<option>West Virginia, Paris</option>
    										</select>
    									</div>

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

    								<!-- Going To -->
    								<div class="col-md-6 col-xl-3">
    									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
    										<!-- Input field -->
    										<label class="mb-1"><i class="bi bi-send me-2"></i>To</label>
    										<select class="form-select js-choice" data-search-enabled="true">
    											<option value="">Select location</option>
    											<option>San Jacinto, USA</option>
    											<option>North Dakota, Canada</option>
    											<option>West Virginia, Paris</option>
    										</select>
    									</div>
    								</div>

    								<!-- Departure -->
    								<div class="col-md-6 col-xl-3">
    									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
    										<label class="mb-1"><i class="bi bi-calendar me-2"></i>Departure</label>
    										<input type="text" class="form-control flatpickr" data-date-format="d M Y" placeholder="Select date">
    									</div>
    								</div>

    								<!-- Return -->
    								<div class="col-md-6 col-xl-3">
    									<div class="form-border-transparent form-fs-lg bg-light rounded-3 h-100 p-3">
    										<label class="mb-1"><i class="bi bi-calendar me-2"></i>Return</label>
    										<input type="text" class="form-control flatpickr" data-date-format="d M Y" placeholder="Select date">
    									</div>
    								</div>

    								<div class="col-12 text-end pt-0">
    									<a  class="btn btn-primary mb-n4" href="#">Find ticket <i class="bi bi-arrow-right ps-3"></i></a>
    								</div>
    							</div>
    						</div>
    						<!-- Round way tab END -->
    					</div>
    					<!-- Tab content END -->
    				</div>
    			</form>
    			<!-- Booking from END -->
    		</div>
    	</div>
    </section>
    <!-- =======================
    Main Banner END -->

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>