Section & Variations › Checkout Travel

Available Variations
Checkout Travel Starter Kit Codes
<!-- include sections/checkout-travel  -->
<section class="cart checkout checkout-travel cart-variation-1">
	<div class="container">
		<div class="section-header">
			<a class="btn-back" href="checkout.html"><i class="ic ic-caret-left dark-1"></i></a>
			<h3 class="section-title">Booking Confirmation</h3>
		</div>
		<div class="section-content">
			<div class="product-item cart-variation-1">
				<div class="product-item-image">
					<img src="assets/images/travel-product-list-1.png" class="image" />
				</div>
				<div class="product-item-text">
					<h4>Bamboo Villa in Eco Six Bali Resort</h4>
					<div class="product-rating-location">
						<div class="product-rating product-list-variation-1">
							<div class="product-rating-inner">
								<div class="rating">
									<i class="ic ic-star active"></i>
									<strong>4.8</strong>
								</div>
								<div class="rating-text">
									<span class="rating-description">(890 reviews)</span>
								</div>
							</div>
						</div>
						<span class="product-location"><i class="ic ic-map-pin"></i>Treehouse in Kecamatan Sidemen, Indonesia</span>
					</div>
				</div>
			</div>
			<div class="booking-details">
				<div class="booking-detail-item">
					<strong>Dates</strong>
					<span>Jan 14 - 17, 2024</span>
					<a href="#edit" class="btn-edit"><i class="ic ic-pencil-simpleline secondary"></i> Edit</a>
				</div>
				<div class="booking-detail-item">
					<strong>Guest</strong>
					<span>1 Room, 2 Adults</span>
					<a href="#edit" class="btn-edit"><i class="ic ic-pencil-simpleline secondary"></i> Edit</a>
				</div>
			</div>
			<form class="form-checkout">
				<div class="form-checkout-section">
					<div class="form-checkout-section-header">
						<h5>Contact information</h5>
					</div>
					<div class="form-checkout-section-content">
						<div class="form-group">
							<input type="text" class="form-control form-control-lg" placeholder="Name" />
						</div>
						<div class="row">
							<div class="col-md-4">
								<div class="form-group">
									<select class="form-select form-select-lg">
										<option value="+62">Indonesia (+62)</option>
										<option value="+1">USA</option>
									</select>
								</div>
							</div>
							<div class="col-md-8">
								<div class="form-group">
									<input type="text" class="form-control form-control-lg" placeholder="Phone number" />
								</div>
							</div>
						</div>
						<p>We’ll call or text you to confirm your number. Standard message and data rates apply. <a href="#PrivacyPolicy">Privacy Policy</a></p>
						<a class="btn btn-lg btn-brand-primary" href="payment.html">Continue</a>
					</div>
				</div>
			</form>
		</div>
		<div class="section-footer">
			<span>or</span>
			<a class="btn btn-icon btn-lg btn-outline-dark-3" href="#sign-in"><i class="ic ic-facebook"></i> Facebook</a>
			<a class="btn btn-icon btn-lg btn-outline-dark-3" href="#sign-in"><i class="ic ic-google"></i> Google</a>
			<a class="btn btn-icon btn-lg btn-outline-dark-3" href="#sign-in"><i class="ic ic-apple"></i> Apple </a>
			<a class="btn btn-icon btn-lg btn-outline-dark-3" href="#sign-in"><i class="ic ic-envelope-simple"></i> Continue with email</a>
		</div>
	</div>
</section>