File: /home/aliazzsr/html.vqode.com/travelcation-updated/voucher-pdf.html
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Travelcation
</title>
<link
rel="shortcut icon"
href="assets/images/favicon.png"
type="image/x-icon"
/>
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />
<link rel="stylesheet" href="assets/css/animate.css" />
<link rel="stylesheet" href="assets/css/tailwind.css" />
<!-- ==== Poppins Font ==== -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- ==== Volkhov Font ==== -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Volkhov:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- ==== WOW JS ==== -->
<script src="assets/js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</head>
<body class="bg-light">
<div class="container mx-auto mb-5">
<div class="-mx-4 flex flex-wrap justify-between">
<div class="w-full px-4 md:w-1/2 lg:w-1/2 mt-8">
<a href="#"><img class="mb-2" src="assets/images/inner/logo-pdf.svg"></a>
<p class="text-secondry mb-0 tetx-sm font-normal">www.travelerdubai.com</p>
<p class="text-secondry mb-0 tetx-sm font-normal">[email protected]</p>
<p class="text-secondry mb-0 tetx-sm font-normal">+91 00000 00000</p>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/2 mt-12 sm-mt-0">
<p class="text-secondry mb-0 text-right tetx-sm font-normal sm-left">Business address</p>
<p class="text-secondry mb-0 text-right tetx-sm font-normal sm-left">City, State, IN - 000 000</p>
<p class="text-secondry mb-0 text-right tetx-sm font-normal sm-left">TAX ID 00XXXXX1234X0XX</p>
</div>
</div>
<div class="bg-white border px-5 rounded-xxl mt-8">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 md:w-1/2 lg:w-1/3 mt-8">
<span class="text-light text-md font-normal">Tour Option</span>
<h3 class="text-secondry text-1xl font-semibold">Magical Morning Balloon flights (Without Breakfast)</h3>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3 mt-8">
<span class="text-light text-md font-normal">Option Type</span>
<h3 class="text-secondry text-1xl font-semibold">Without Breakfast</h3>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3 mt-8">
<span class="text-light text-md font-normal">Transfer Type</span>
<h3 class="text-secondry text-1xl font-semibold">Sharing Transfer</h3>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3 mt-8">
<span class="text-light text-md font-normal">Booking Reference ID</span>
<h3 class="text-secondry text-1xl font-semibold">BRS-8988022</h3>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3 mt-8">
<span class="text-light text-md font-normal">Passenger Name</span>
<h3 class="text-secondry text-1xl font-semibold">Walliam Mark</h3>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3 mt-8">
<span class="text-light text-md font-normal">Passenger Email</span>
<h3 class="text-secondry text-1xl font-semibold">[email protected]</h3>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3 mt-8">
<span class="text-light text-md font-normal">Passenger Phone</span>
<h3 class="text-secondry text-1xl font-semibold">+971 6288 1902 8277</h3>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3 mt-8">
<span class="text-light text-md font-normal">Service Provider Contact</span>
<h3 class="text-secondry text-1xl font-semibold">+971 3097 4623 8299</h3>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3 mt-8">
<span class="text-light text-md font-normal">Tour Time</span>
<h3 class="text-secondry text-1xl font-semibold">04:00 am - 04:30 am</h3>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3 mt-8">
<span class="text-light text-md font-normal">Tour Date</span>
<h3 class="text-secondry text-1xl font-semibold">16/03/2025</h3>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3 mt-8">
<span class="text-primary-pink text-md font-normal">Last Date to Cancel</span>
<h3 class="text-primary-pink text-1xl font-semibold">14/03/20255</h3>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/1 mt-8">
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 sm-none">
<thead class="text-xs text-light uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3 text-uppercase font-medium text-light border-b border-t">
Item Detail
</th>
<th scope="col" class="px-6 py-3 text-uppercase font-medium text-light border-b border-t">
Qty
</th>
<th scope="col" class="px-6 py-3 text-uppercase font-medium text-light border-b border-t">
Rate
</th>
<th scope="col" class="px-6 py-3 text-uppercase text-right font-medium text-light border-b border-t">
Amount
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white dark:bg-gray-800 dark:border-gray-700 border-gray-200">
<th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Adult
<p class="text-light font-normal">Item description</p>
</th>
<td class="px-6 py-4">
3
</td>
<td class="px-6 py-4">
AED 3,000.00
</td>
<td class="px-6 py-4 text-right">
AED 9,000.00
</td>
</tr>
<tr class="bg-white dark:bg-gray-800 dark:border-gray-700 border-gray-200 border-b">
<th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Child
<p class="text-light font-normal">Item description</p>
</th>
<td class="px-6 py-4">
2
</td>
<td class="px-6 py-4">
AED 1,500.00
</td>
<td class="px-6 py-4 text-right">
AED 3,000.00
</td>
</tr>
</tbody>
</table>
<div class="bg-white border rounded-xxl px-5 py-3 sm-show">
<div>
<span class="text-light font-medium text-md mt-5">Item Detail</span>
<h4 class="text-secondry font-medium text-md">Adult</h4>
<p class="text-light font-normal text-sm">Item description</p>
</div>
<div class="mt-5">
<span class="text-light font-medium text-md mt-5">Qty</span>
<h4 class="text-secondry font-medium text-md">3</h4>
</div>
<div class="mt-5">
<span class="text-light font-medium text-md mt-5">Rate</span>
<h4 class="text-secondry font-medium text-md">AED 3,000.00</h4>
</div>
<div class="mt-5">
<span class="text-light font-medium text-md mt-5">Amount</span>
<h4 class="text-secondry font-medium text-md">AED 9,000.00</h4>
</div>
</div>
<div class="bg-white border rounded-xxl px-5 py-3 mt-5 sm-show">
<div>
<span class="text-light font-medium text-md mt-5">Item Detail</span>
<h4 class="text-secondry font-medium text-md">Child</h4>
<p class="text-light font-normal text-sm">Item description</p>
</div>
<div class="mt-5">
<span class="text-light font-medium text-md mt-5">Qty</span>
<h4 class="text-secondry font-medium text-md">2</h4>
</div>
<div class="mt-5">
<span class="text-light font-medium text-md mt-5">Rate</span>
<h4 class="text-secondry font-medium text-md">AED 1,500.00</h4>
</div>
<div class="mt-5">
<span class="text-light font-medium text-md mt-5">Amount</span>
<h4 class="text-secondry font-medium text-md">AED 3,000.00</h4>
</div>
</div>
<div class="flex justify-end items-center flex-wrap">
<div class="invoice-w">
<div class="flex justify-between">
<h5 class="text-secondry font-medium text-md mt-5">Subtotal</h5>
<h5 class="text-secondry font-medium text-md mt-5 px-6 sm-px">AED 12,000.00</h5>
</div>
<div class="flex justify-between border-b invoice-pb">
<h5 class="text-secondry font-medium text-md mt-5">Tax (10%)</h5>
<h5 class="text-secondry font-medium text-md mt-5 px-6 sm-px">AED 450.00</h5>
</div>
<div class="flex justify-between">
<h5 class="text-secondry font-semibold text-md mt-5">Total</h5>
<h5 class="text-secondry font-semibold text-md mt-5 px-6 sm-px">AED 12,450.00</h5>
</div>
</div>
</div>
</div>
</div>
<div class="w-full px-4 md:w-1/3 lg:w-2/12">
<div class="bg-light shadow-xs rounded-xxl px-6 py-5 mt-8">
<div class="bg-white shadow-xs rounded-xxl px-4 py-5 text-center flex justify-center">
<img src="assets/images/booking/qr1.svg">
</div>
<h5 class="text-lg mt-5 text-secondry font-normal text-center">Adult ticket QR code</h5>
</div>
</div>
<div class="w-full px-4 md:w-1/3 lg:w-2/12">
<div class="bg-light shadow-xs rounded-xxl px-6 py-5 mt-8">
<div class="bg-white shadow-xs rounded-xxl px-4 py-5 text-center flex justify-center">
<img src="assets/images/booking/qr1.svg">
</div>
<h5 class="text-lg mt-5 text-secondry font-normal text-center">Child ticket QR code</h5>
</div>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/1">
<div class="flex justify-between items-center flex-wrap">
<h5 class="text-secondry text-md font-semibold mt-5">Thanks for the business.</h5>
<div class="bg-green rounded-full px-4 py-2 mt-5 mb-5 text-white font-medium text-md flex justify-center items-center"><img src="assets/images/inner/invoice-tick.svg" class="mr-3">Paid</div>
</div>
</div>
</div>
</div>
<p class="text-light mt-8 font-normal text-md">Terms & Conditions</p>
<p class="text-secondry font-normal text-md">Lorem ipsum is a dummy or placeholder text commonly used in graphic design.</p>
</div>
</body>
</html>