File: /home/aliazzsr/html.vqode.com/travelcation-updated/blog-detail.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-white">
<div class="bg-secondry relative px-4 py-3 text-white font-normal text-md text-center">Your important information goes here</div>
<!-- ====== Hero Section Start -->
<div
id="home"
class="relative pt-[120px] md:pt-[130px] lg:pt-[160px] h-100 h-set"
>
<!-- ====== Navbar Section Start -->
<div
class="ud-header absolute left-0 top-0 z-40 flex w-full items-center bg-transparent"
>
<div class="container">
<div class="relative -mx-4 flex items-center justify-between">
<div class="max-w-full px-4">
<a href="index.html" class="navbar-logo block w-full py-5">
<img
src="assets/images/logo/logo.svg"
alt="logo"
class="header-logo w-full"
/>
</a>
</div>
<div class="flex w-full items-center justify-between px-4 relative z-40">
<div>
<button
id="navbarToggler"
class="absolute right-4 top-1/2 block -translate-y-1/2 rounded-lg px-3 py-[6px] ring-primary focus:ring-2 lg:hidden"
>
<span
class="relative my-[6px] block h-[2px] w-[30px] bg-primary-pink"
></span>
<span
class="relative my-[6px] block h-[2px] w-[30px] bg-primary-pink"
></span>
<span
class="relative my-[6px] block h-[2px] w-[30px] bg-primary-pink"
></span>
</button>
<nav
id="navbarCollapse"
class="absolute right-4 z-40 top-full hidden w-full max-w-[250px] rounded-lg bg-transparent py-5 shadow-lg dark:bg-dark-2 lg:static lg:block lg:w-full nav-mobile-holder lg:max-w-full lg:bg-transparent lg:px-4 lg:py-0 lg:shadow-none dark:lg:bg-transparent xl:px-6"
>
<ul class="blcok lg:flex">
<li class="group relative px-4">
<a
href="index.html"
class="text-sm flex color-black py-2 text-base font-normal text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-grey-200 lg:group-hover:opacity-70"
>
Home
</a>
</li>
<li class="group relative px-4">
<a
href="events.html"
class="text-sm flex color-black py-2 text-base font-normal text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-gray-7 lg:group-hover:opacity-70 "
>
Events
</a>
</li>
<li class="group relative px-4">
<a
href="experiences.html"
class="text-sm flex color-black py-2 text-base font-normal text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-gray-7 lg:group-hover:opacity-70 "
>
Experiences
</a>
</li>
<li class="group relative px-4">
<a
href="combos.html"
class="text-sm flex color-black py-2 text-base font-normal text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-gray-7 lg:group-hover:opacity-70 "
>
Combos
</a>
</li>
<li class="group relative px-4">
<a
href="kids-corner.html"
class="text-sm flex color-black py-2 text-base font-normal text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-gray-7 lg:group-hover:opacity-70 "
>
Kids Corner
</a>
</li>
<li class="group relative px-4">
<a
href="blog.html"
class="text-sm flex color-black py-2 text-base font-semibold text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-gray-7 lg:group-hover:opacity-70"
>
Blogs
</a>
</li>
<li class="group relative px-4 py-2 buttons-show">
<a
href="#">
<button type="button" class="rounded-lg bg-primary-pink w-full px-5 py-2 text-base font-medium text-white mr-3 duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark">Sign In</button>
</a>
</li>
<li class="group relative px-4 py-2 buttons-show">
<a
href="#">
<button type="button" class="rounded-lg bg-pulp-orange w-full px-5 py-2 text-base font-medium text-white mr-3 duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark">Sign Up</button>
</a>
</li>
</ul>
</nav>
</div>
<div>
<a class="absolute right-0 top-0 sm-show " href="#"><img class="profile-icon" src="assets/images/inner/mobile-profile.svg"></a>
</div>
<div>
<a class="absolute right-0 top-0 sm-show" href="#"><img class="mobile-search" src="assets/images/home/nav-search.svg"></a>
</div>
<div class="flex items-center justify-end pr-16 lg:pr-0 sm-none">
<div class="flex items-center">
<form class="mr-3">
<div class="relative">
<input type="search" id="default-search" class="block nav-search p-4 py-3 ps-10 text-sm text-gray-900 rounded-lg shadow-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for" required />
<a class="absolute right-0 top-0 nav-search-icon" href="#"><img src="assets/images/home/nav-search.svg"></a>
</div>
</form>
<a
href="#"
class="signUpBtn mr-3 md-none rounded-lg bg-primary px-5 py-2 text-base font-medium text-white duration-300 ease-in-out hover:bg-opacity-100 hover:text-primary-pink"
>
Sign In
</a>
<a
href="#"
class="rounded-lg md-none bg-pulp-orange px-5 py-2 text-base font-medium text-white mr-3 duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark"
>
Sign Up
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ====== Navbar Section End -->
<img class="absolute top-0 h-100 w-full banner h-set" src="assets/images/blog/blog-detail-banner.png">
<div class="container h-full h-set">
<div class="-mx-4 flex flex-wrap items-end relative z-10 h-full h-set">
<div class="w-full px-4">
<div
class="hero-content wow fadeInUp max-w-[780px]"
data-wow-delay=".2s"
>
<span class="text-md font-normal text-pulp-orange uppercase">Blog Detail</span>
<h1
class="mb-10 text-4xl banner-sm font-bold leading-snug text-white sm:text-4xl sm:leading-snug lg:text-5xl lg:leading-[1.2]"
>
Like to Keep Things Simple to Appreciate the Details
</h1>
</div>
</div>
</div>
</div>
</div>
<!-- ====== Hero Section End -->
<!-- ====== Blog Detail Section Start -->
<section
id="popular"
class="overflow-hidden dark:bg-dark-2"
>
<div class="container mx-auto">
<div class="-mx-4 flex px-5 flex-wrap">
<div class="w-full px-4 smpx-4 md:w-1/1 lg:w-8/12 mt-8">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="w-full bg-white shadow-md rounded-xl border px-5 py-5">
<img class="w-full mb-5" src="assets/images/blog/blog-detail-img.png">
<h1 class="text-secondry font-bold text-2xl mb-2">Travel Dubai apartment at ten: A decade of celebrating the everyday</h1>
<div class="flex flex-wrap items-center mb-5">
<a class="mr-3 mt-5" href="#"><img src="assets/images/blog/social1.svg"></a>
<a class="mr-3 mt-5" href="#"><img src="assets/images/blog/social2.svg"></a>
<a class="mr-3 mt-5" href="#"><img src="assets/images/blog/social3.svg"></a>
<a class="mr-5 mt-5" href="#"><img src="assets/images/blog/social4.svg"></a>
<div class="flex items-center mt-5">
<img class="mr-3" src="assets/images/blog/date.svg">
<span class="text-secondry text-md font-medium">18/12/2024</span>
</div>
</div>
<p class="text-md font-normal text-secondry mb-5">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33</p>
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 lg:w-8/12">
<p class="text-md font-normal text-secondry mb-5">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words.</p>
<p class="text-md font-normal text-secondry mb-5">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words. </p>
</div>
<div class="w-full px-5 md:w-1/2 lg:w-4/12">
<img src="assets/images/blog/blog-thum.png">
</div>
</div>
<h2 class="text-secondry font-bold text-3xl mb-4">Where can I get some?</h2>
<h3 class="text-secondry font-semibold text-1xl mb-4">Can you help translate this site into a foreign language ? Please email us with details if you can help.</h3>
<p class="text-md font-normal text-secondry mb-5">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
<p class="text-md font-normal text-secondry mb-5">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
<p class="text-md font-normal text-secondry mb-5">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" </p>
<p class="text-md font-normal text-secondry mb-5">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
<p class="text-md font-normal text-secondry">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum".</p>
</div>
</div>
</div>
<div class="w-full px-4 smpx-4 md:w-1/1 lg:w-4/12 mt-8">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="w-full bg-white rounded-xl border px-5 py-5 mb-10 sm-none">
<div class="mx-auto text-left">
<span class="mb-2 block text-sm font-normal text-primary-pink uppercase">
Popular tours
</span>
<h2 class="mb-3 text-2xl banner-sm font-bold line2rem text-secondry dark:text-white">
The amazing places around the UAE
</h2>
</div>
<div class="flex flex-wrap">
<div class="w-full md:w-2/12 lg:w-4/12 mt-5">
<img class="rounded-xl" src="assets/images/blog/blog-small1.png">
</div>
<div class="w-full md:w-10/12 lg:w-8/12 px-3 sm-px mt-5">
<h3 class="text-secondry font-semibold text-sm mb-2">Fall in love among the round winding streets</h3>
<div class="flex justify-between items-end">
<div>
<div class="bg-gold-300 flex items-center justify-between px-2 py-1 w-max-content rounded-full">
<img class="" src="assets/images/home/star.svg">
<span class="text-gold text-sm">4.9</span>
</div>
<span class="text-light text-sm font-normal">3 hour tour</span>
</div>
<div class="text-right">
<h4 class="text-primary-pink text-1xl font-bold"><span class="text-sm">AED</span>200</h4>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full md:w-2/12 lg:w-4/12 mt-5">
<img class="rounded-xl" src="assets/images/blog/blog-small2.png">
</div>
<div class="w-full md:w-10/12 lg:w-8/12 px-3 sm-px mt-5">
<h3 class="text-secondry font-semibold text-sm mb-2">Fall in love among the round winding streets</h3>
<div class="flex justify-between items-end">
<div>
<div class="bg-gold-300 flex items-center justify-between px-2 py-1 w-max-content rounded-full">
<img class="" src="assets/images/home/star.svg">
<span class="text-gold text-sm">4.9</span>
</div>
<span class="text-light text-sm font-normal">3 hour tour</span>
</div>
<div class="text-right">
<h4 class="text-primary-pink text-1xl font-bold"><span class="text-sm">AED</span>290</h4>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full md:w-2/12 lg:w-4/12 mt-5">
<img class="rounded-xl" src="assets/images/blog/blog-small3.png">
</div>
<div class="w-full md:w-10/12 lg:w-8/12 px-3 sm-px mt-5">
<h3 class="text-secondry font-semibold text-sm mb-2">Fall in love among the round winding streets</h3>
<div class="flex justify-between items-end">
<div>
<div class="bg-gold-300 flex items-center justify-between px-2 py-1 w-max-content rounded-full">
<img class="" src="assets/images/home/star.svg">
<span class="text-gold text-sm">4.9</span>
</div>
<span class="text-light text-sm font-normal">3 hour tour</span>
</div>
<div class="text-right">
<h4 class="text-primary-pink text-1xl font-bold"><span class="text-sm">AED</span>310</h4>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full md:w-2/12 lg:w-4/12 mt-5">
<img class="rounded-xl" src="assets/images/blog/blog-small4.png">
</div>
<div class="w-full md:w-10/12 lg:w-8/12 px-3 sm-px mt-5">
<h3 class="text-secondry font-semibold text-sm mb-2">Fall in love among the round winding streets</h3>
<div class="flex justify-between items-end">
<div>
<div class="bg-gold-300 flex items-center justify-between px-2 py-1 w-max-content rounded-full">
<img class="" src="assets/images/home/star.svg">
<span class="text-gold text-sm">4.9</span>
</div>
<span class="text-light text-sm font-normal">3 hour tour</span>
</div>
<div class="text-right">
<h4 class="text-primary-pink text-1xl font-bold"><span class="text-sm">AED</span>350</h4>
</div>
</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-xl border px-5 py-5 mb-10 web-none">
<div class="mx-auto text-left">
<span class="mb-2 block text-sm font-normal text-primary-pink uppercase">
Popular tours
</span>
<h2 class="mb-3 text-2xl banner-sm font-bold line2rem text-secondry dark:text-white">
The amazing places around the UAE
</h2>
</div>
<div class="flex">
<div class="w-full md:w-2/12 lg:w-4/12 mt-5 px-2">
<img class="rounded-xl w-full" src="assets/images/blog/blog-small1.png">
</div>
<div class="w-full md:w-10/12 lg:w-8/12 sm-px mt-5">
<h3 class="text-secondry font-semibold text-xs mb-2">Fall in love among the round winding streets</h3>
<div class="flex justify-between items-end">
<div>
<div class="bg-gold-300 flex items-center justify-between px-2 mb-2 py-1 w-max-content rounded-full">
<img class="" src="assets/images/home/star.svg">
<span class="text-gold text-sm">4.9</span>
</div>
<span class="text-light text-sm font-normal">3 hour tour</span>
</div>
<div class="text-right">
<h4 class="text-primary-pink text-1xl font-bold"><span class="text-sm">AED</span>200</h4>
</div>
</div>
</div>
</div>
<div class="flex">
<div class="w-full md:w-2/12 lg:w-4/12 px-2 mt-5">
<img class="rounded-xl w-full" src="assets/images/blog/blog-small2.png">
</div>
<div class="w-full md:w-10/12 lg:w-8/12 px-3 sm-px mt-5">
<h3 class="text-secondry font-semibold text-xs mb-2">Fall in love among the round winding streets</h3>
<div class="flex justify-between items-end">
<div>
<div class="bg-gold-300 flex items-center justify-between px-2 mb-2 py-1 w-max-content rounded-full">
<img class="" src="assets/images/home/star.svg">
<span class="text-gold text-sm">4.9</span>
</div>
<span class="text-light text-sm font-normal">3 hour tour</span>
</div>
<div class="text-right">
<h4 class="text-primary-pink text-1xl font-bold"><span class="text-sm">AED</span>290</h4>
</div>
</div>
</div>
</div>
<div class="flex">
<div class="w-full md:w-2/12 lg:w-4/12 px-2 mt-5">
<img class="rounded-xl w-full" src="assets/images/blog/blog-small3.png">
</div>
<div class="w-full md:w-10/12 lg:w-8/12 px-3 sm-px mt-5">
<h3 class="text-secondry font-semibold text-xs mb-2">Fall in love among the round winding streets</h3>
<div class="flex justify-between items-end">
<div>
<div class="bg-gold-300 flex items-center justify-between px-2 mb-2 py-1 w-max-content rounded-full">
<img class="" src="assets/images/home/star.svg">
<span class="text-gold text-sm">4.9</span>
</div>
<span class="text-light text-sm font-normal">3 hour tour</span>
</div>
<div class="text-right">
<h4 class="text-primary-pink text-1xl font-bold"><span class="text-sm">AED</span>310</h4>
</div>
</div>
</div>
</div>
<div class="flex">
<div class="w-full md:w-2/12 lg:w-4/12 px-2 mt-5">
<img class="rounded-xl w-full" src="assets/images/blog/blog-small4.png">
</div>
<div class="w-full md:w-10/12 lg:w-8/12 px-3 sm-px mt-5">
<h3 class="text-secondry font-semibold text-xs mb-2">Fall in love among the round winding streets</h3>
<div class="flex justify-between items-end">
<div>
<div class="bg-gold-300 flex items-center justify-between px-2 mb-2 py-1 w-max-content rounded-full">
<img class="" src="assets/images/home/star.svg">
<span class="text-gold text-sm">4.9</span>
</div>
<span class="text-light text-sm font-normal">3 hour tour</span>
</div>
<div class="text-right">
<h4 class="text-primary-pink text-1xl font-bold"><span class="text-sm">AED</span>350</h4>
</div>
</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded-xl mb-10">
<div class="relative">
<div class="absolute px-6 bottom-0">
<div class="bg-primary-pink px-4 py-2 w-max-content rounded-xl text-white font-normal text-sm uppercase">Best</div>
<h2 class="text-white text-lg font-semibold">Theme Parks Collection</h2>
<button type="button" class="text-md text-pulp-orange font-medium text-underline mb-6">View More</button>
</div>
<img class="w-full" src="assets/images/blog/blog-adv.png">
</div>
</div>
<div class="w-full bg-gradient rounded-xl mb-10">
<div class="px-6 py-5">
<span class="text-white text-sm font-medium uppercase">Download</span>
<h2 class="text-white text-3xl font-semibold">Travel Dubai App</h2>
<p class="text-sm text-white font-normal">Get the Travel Dubai app to get tickets on your phone and access app-only deals. Talk about win-win</p>
</div>
<div class="mx-auto w-full mini-mobile">
<img class="mx-auto" src="assets/images/blog/mini-mobile.svg">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Latest Topics Section End -->
<!-- ====== It’s a Big uae Section Start -->
<section
id="popular"
class="overflow-hidden dark:bg-dark-2"
>
<!-- ====== Web Section Start -->
<div class="container mx-auto sm-none">
<div class="-mx-4 flex flex-wrap justify-center">
<div class="w-full px-4">
<div class="mx-auto mb-[60px] text-center">
<span class="mb-2 block text-1xl font-bold text-primary-pink uppercase">
It’s a Big uae
</span>
</div>
</div>
</div>
<div class="-mx-4 flex px-5 flex-wrap items-center relative">
<div class="w-full px-4 md:w-1/2 lg:w-1/4 mb-5">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="">
<a href="#"><img class="rounded-xl" src="assets/images/blog/blog1.png"></a>
<div class="py-3">
<span class="text-sm text-light">29.Jun.2024</span>
<h3 class="text-secondry font-medium text-md mb-2">Artist Melissa Kitty Jarram is updating Greek myths for 2022</h3>
<p class="text-light text-sm font-normal mb-3">Many years ago, I worked for my parents who own a video production company.</p>
<a href="blog-detail.html"><button type="button" class="text-md font-semibold text-underline text-primary-pink">Read More...</button></a>
</div>
</div>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/4 mb-5">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="">
<a href="#"><img class="rounded-xl" src="assets/images/blog/blog2.png"></a>
<div class="py-3">
<span class="text-sm text-light">29.Jun.2024</span>
<h3 class="text-secondry font-medium text-md mb-2">The ultimate guide to driving Iceland Golden Circle</h3>
<p class="text-light text-sm font-normal mb-3">Many years ago, I worked for my parents who own a video production company.</p>
<a href="blog-detail.html"><button type="button" class="text-md font-semibold text-underline text-primary-pink">Read More...</button></a>
</div>
</div>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/4 mb-5">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="">
<a href="#"><img class="rounded-xl" src="assets/images/blog/blog3.png"></a>
<div class="py-3">
<span class="text-sm text-light">29.Jun.2024</span>
<h3 class="text-secondry font-medium text-md mb-2">10 adventures to have in North America</h3>
<p class="text-light text-sm font-normal mb-3">Many years ago, I worked for my parents who own a video production company.</p>
<a href="blog-detail.html"><button type="button" class="text-md font-semibold text-underline text-primary-pink">Read More...</button></a>
</div>
</div>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/4 mb-5">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="">
<a href="#"><img class="rounded-xl" src="assets/images/blog/blog4.png"></a>
<div class="py-3">
<span class="text-sm text-light">29.Jun.2024</span>
<h3 class="text-secondry font-medium text-md mb-2">Peter Funch shares the photo books that inspire his own practice</h3>
<p class="text-light text-sm font-normal mb-3">Many years ago, I worked for my parents who own a video production company.</p>
<a href="blog-detail.html"><button type="button" class="text-md font-semibold text-underline text-primary-pink">Read More...</button></a>
</div>
</div>
</div>
</div>
<div class="flex justify-between w-full absolute blog-arrows">
<a href="#"><img src="assets/images/home/dark-left-arrow.svg"></a>
<a href="#"><img class="mr-8" src="assets/images/home/dark-right-arrow.svg"></a>
</div>
</div>
</div>
<!-- ====== Web Section End -->
<!-- ====== Mobile Section Start -->
<div class="container mx-auto web-none mt-8">
<div class="flex flex-wrap justify-center">
<div class="w-full px-2">
<div class="mx-auto text-center">
<span class="mb-2 block text-1xl font-bold text-primary-pink uppercase">
It’s a Big uae
</span>
</div>
</div>
</div>
<div class="flex items-center relative">
<div class="px-2">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="mobile-card">
<a href="#"><img class="rounded-xl" src="assets/images/blog/blog1.png"></a>
<div class="py-3">
<span class="text-xs text-light">29.Jun.2024</span>
<h3 class="text-secondry font-medium text-xs mb-2">Artist Melissa Kitty Jarram is updating Greek myths for 2022</h3>
<p class="text-light text-xs font-normal mb-3">Many years ago, I worked for my parents who own a video production company.</p>
<a href="blog-detail.html"><button type="button" class="text-xs font-semibold text-underline text-primary-pink">Read More...</button></a>
</div>
</div>
</div>
</div>
<div class="px-2">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="mobile-card">
<a href="#"><img class="rounded-xl" src="assets/images/blog/blog1.png"></a>
<div class="py-3">
<span class="text-xs text-light">29.Jun.2024</span>
<h3 class="text-secondry font-medium text-xs mb-2">Artist Melissa Kitty Jarram is updating Greek myths for 2022</h3>
<p class="text-light text-xs font-normal mb-3">Many years ago, I worked for my parents who own a video production company.</p>
<a href="blog-detail.html"><button type="button" class="text-xs font-semibold text-underline text-primary-pink">Read More...</button></a>
</div>
</div>
</div>
</div>
<div class="px-2">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="mobile-card">
<a href="#"><img class="rounded-xl" src="assets/images/blog/blog1.png"></a>
<div class="py-3">
<span class="text-xs text-light">29.Jun.2024</span>
<h3 class="text-secondry font-medium text-xs mb-2">Artist Melissa Kitty Jarram is updating Greek myths for 2022</h3>
<p class="text-light text-xs font-normal mb-3">Many years ago, I worked for my parents who own a video production company.</p>
<a href="blog-detail.html"><button type="button" class="text-xs font-semibold text-underline text-primary-pink">Read More...</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ====== Mobile Section End -->
</section>
<!-- ====== It’s a Big uae Section End -->
<!-- ====== Our Newsletter Section Start -->
<section
id="popular"
class="overflow-hidden dark:bg-dark-2 py-12"
>
<div class="container mx-auto">
<div class="-mx-4 flex px-5 flex-wrap items-center relative">
<div class="w-full px-4 md:w-1/1 lg:w-1/1">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="bg-light py-2 rounded-xl">
<div class="w-full px-6 py-5">
<div class="-mx-4 flex px-5 flex-wrap">
<div class="w-full px-4 md:w-1/1 lg:w-1/2">
<div class="mx-auto text-left">
<span class="mb-2 block text-sm font-semibold text-primary-pink uppercase">
Join
</span>
<h2 class="mb-3 text-3xl banner-sm volkhov font-bold leading-[1.2] text-secondry dark:text-white sm:text-4xl md:text-[40px] Nunito">
Our Newsletter
</h2>
<p class="text-sm font-normal text-secondry mb-5">Will send you weekly updates for your better tour packages.</p>
</div>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/2 flex items-center">
<form class="w-full">
<div class="relative">
<input type="search" id="default-search" class="block w-full p-4 py-5 mb-5 ps-10 text-sm text-gray-900 rounded-xl shadow-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Your email address" required />
<button type="submit" class="text-white absolute subscribe right-0 top-0 end-2.5 bottom-2.5 bg-secondry hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-6 py-5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Our Newsletter Section End -->
<!-- ====== Footer Section Start -->
<footer
class="wow fadeInUp relative z-10 bg-primary lg:pt-[100px]"
data-wow-delay=".15s"
>
<!-- ====== Web Section Start -->
<div class="container relative pt-20 z-40 sm-none">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-4/12 xl:w-4/12">
<div class="mb-10 w-full">
<a
href="javascript:void(0)"
class="mb-6 inline-block max-w-[160px]"
>
<img
src="assets/images/logo/logo.svg"
alt="logo"
class="max-w-full"
/>
</a>
<p class="mb-8 text-sm text-base text-secondry">
Travel helps companies manage payments easily. Travel helps companies manage payments easily. Travel helps companies manage payments easily.
</p>
<div class="flex items-center">
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon1.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon2.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon3.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon4.svg"></a>
</div>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-3/12 xl:w-3/12">
<div class="mb-10 w-full">
<h4 class="mb-9 text-lg font-semibold text-secondry">Useful Links</h4>
<ul>
<li>
<a
href="index.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Home
</a>
</li>
<li>
<a
href="events.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Events
</a>
</li>
<li>
<a
href="experiences.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Experiences
</a>
</li>
<li>
<a
href="combos.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Combos
</a>
</li>
</ul>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-3/12 xl:w-3/12">
<div class="mb-10 w-full">
<h4 class="mb-9 text-lg font-semibold text-secondry">Other</h4>
<ul>
<li>
<a
href="kids-corner.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Kids Corner
</a>
</li>
<li>
<a
href="blog.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Blogs
</a>
</li>
<li>
<a
href="contact-us.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Contact
</a>
</li>
</ul>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-2/12 xl:w-2/12">
<div class="mb-10 w-full">
<h4 class="mb-9 text-lg font-semibold text-secondry">Supplier</h4>
<ul>
<li>
<a
href="javascript:void(0)"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Sign In
</a>
</li>
<li>
<a
href="javascript:void(0)"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Sign Up
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ====== Web Section End -->
<!-- ====== Mobile Section Start -->
<div class="container relative z-40 web-none">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 sm:w-1/1 md:w-1/2 lg:w-4/12 xl:w-4/12">
<div class="mb-4 w-full">
<a
href="javascript:void(0)"
class="mb-0 inline-block max-w-[160px]"
>
<img
src="assets/images/logo/logo.svg"
alt="logo"
class="max-w-full"
/>
</a>
<p class="mb-5 text-sm text-base text-secondry">
Travel helps companies manage payments easily. Travel helps companies manage payments easily. Travel helps companies manage payments easily.
</p>
<div class="flex items-center">
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon1.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon2.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon3.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon4.svg"></a>
</div>
</div>
</div>
</div>
<div class="-mx-4 flex">
<div class="w-full px-4 sm:w-1/3 md:w-1/2 lg:w-3/12 xl:w-3/12">
<div class="mb-2 w-full">
<h4 class="mb-2 text-sm font-semibold text-secondry">Useful Links</h4>
<ul>
<li>
<a
href="index.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Home
</a>
</li>
<li>
<a
href="events.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Events
</a>
</li>
<li>
<a
href="experiences.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Experiences
</a>
</li>
<li>
<a
href="combos.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Combos
</a>
</li>
</ul>
</div>
</div>
<div class="w-full px-4 sm:w-1/3 md:w-1/2 lg:w-3/12 xl:w-3/12">
<div class="mb-2 w-full">
<h4 class="mb-2 text-sm font-semibold text-secondry">Other</h4>
<ul>
<li>
<a
href="kids-corner.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Kids Corner
</a>
</li>
<li>
<a
href="blog.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Blogs
</a>
</li>
<li>
<a
href="contact-us.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Contact
</a>
</li>
</ul>
</div>
</div>
<div class="w-full px-4 sm:w-1/3 md:w-1/2 lg:w-2/12 xl:w-2/12">
<div class="mb-2 w-full">
<h4 class="mb-2 text-sm font-semibold text-secondry">Supplier</h4>
<ul>
<li>
<a
href="javascript:void(0)"
class="mb-1 inline-block text-xs text-base text-secondry hover:text-primary-pink"
>
Sign In
</a>
</li>
<li>
<a
href="javascript:void(0)"
class="mb-1 inline-block text-xs text-base text-secondry hover:text-primary-pink"
>
Sign Up
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ====== Mobile Section End -->
<img class="absolute footer-art right-0 top-0 sm-none md-none" src="assets/images/home/footer-art.png">
<div
class="mt-5 border-t border-[#E5E5EA] border-opacity-40 py-8"
>
<div class="container">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 md:w-1/2 lg:w-1/2">
<div class="my-1">
<p class="text-base text-secondry">
Copyright @ Travel Dubai 2025. All Rights Reserved.
</a>
</p>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/2">
<div class="flex justify-end sm-js-end">
<a class="mr-5" href="#"><span class="text-secondry tetx-sm font-normal text-underline">Terms & Conditions</span></a>
<a href="#"><span class="text-secondry tetx-sm font-normal text-underline">Privacy Policy</span></a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- ====== Footer Section End -->
<!-- ====== Back To Top Start -->
<a
href="javascript:void(0)"
class="back-to-top fixed bottom-8 chat-icon left-auto right-8 z-[999] hidden items-center justify-center"
>
<img src="assets/images/home/chat.svg">
</a>
<!-- ====== Back To Top End -->
<!-- ====== All Scripts -->
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/main.js"></script>
<script>
// ==== for menu scroll
const pageLink = document.querySelectorAll(".ud-menu-scroll");
pageLink.forEach((elem) => {
elem.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(elem.getAttribute("href")).scrollIntoView({
behavior: "smooth",
offsetTop: 1 - 60,
});
});
});
// section menu active
function onScroll(event) {
const sections = document.querySelectorAll(".ud-menu-scroll");
const scrollPos =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
for (let i = 0; i < sections.length; i++) {
const currLink = sections[i];
const val = currLink.getAttribute("href");
const refElement = document.querySelector(val);
const scrollTopMinus = scrollPos + 73;
if (
refElement.offsetTop <= scrollTopMinus &&
refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
) {
document
.querySelector(".ud-menu-scroll")
.classList.remove("active");
currLink.classList.add("active");
} else {
currLink.classList.remove("active");
}
}
}
window.document.addEventListener("scroll", onScroll);
// Testimonial
const testimonialSwiper = new Swiper(".testimonial-carousel", {
slidesPerView: 1,
spaceBetween: 30,
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 30,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
1280: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
</script>
</body>
</html>