Destination
Dynamic destination.
Destination #v1
Top Destination
<!-- Destinantion v1 -->
<div class="destination-block destination-v1">
<div class="container space-1">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mt-3">
<h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Top Destination</h2>
</div>
<div class="row">
<!-- Card Block -->
<div class="col-md-6 mb-3 mb-md-4">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2 border-0 dropdown" style="background-image: url(../../assets/img/630x350/img1.jpg);">
<div class="w-100 d-flex justify-content-between mb-2">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">United Kingdom</a>
<!-- Dropdown List -->
<div class="destination-dropdown v1">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</div>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 mb-3 mb-md-4">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2 border-0 dropdown" style="background-image: url(../../assets/img/630x350/img2.jpg);">
<header class="w-100 d-flex justify-content-between mb-2">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">Turkey</a>
<!-- Dropdown List -->
<div class="destination-dropdown v1">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4">
<div class="min-height-350 gradient-overlay-half-bg-gradient rounded-border p-5 bg-img-hero transition-3d-hover shadow-hover-2 border-0 dropdown" style="background-image: url(../../assets/img/300x350/img1.jpg);">
<header class="w-100 d-flex justify-content-between mb-2">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">United States</a>
<!-- Dropdown List -->
<div class="destination-dropdown v1">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4">
<div class="min-height-350 gradient-overlay-half-bg-gradient rounded-border p-5 bg-img-hero transition-3d-hover shadow-hover-2 border-0 dropdown" style="background-image: url(../../assets/img/300x350/img3.jpg);">
<header class="w-100 d-flex justify-content-between mb-2">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">Ukraine</a>
<!-- Dropdown List -->
<div class="destination-dropdown v1">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4">
<div class="min-height-350 gradient-overlay-half-bg-gradient rounded-border p-5 bg-img-hero transition-3d-hover shadow-hover-2 border-0 dropdown" style="background-image: url(../../assets/img/300x350/img2.jpg);">
<header class="w-100 d-flex justify-content-between mb-2">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">France</a>
<!-- Dropdown List -->
<div class="destination-dropdown v1">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4">
<div class="min-height-350 gradient-overlay-half-bg-gradient rounded-border p-5 bg-img-hero transition-3d-hover shadow-hover-2 border-0 dropdown" style="background-image: url(../../assets/img/300x350/img4.jpg);">
<header class="w-100 d-flex justify-content-between mb-2">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">India</a>
<!-- Dropdown List -->
<div class="destination-dropdown v1">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</header>
</div>
</div>
<!-- End Card Block -->
</div>
</div>
</div>
<!-- End Destinantion v1 -->
Destination #v2
<!-- Destinantion v2 -->
<div class="destination-block destination-v2">
<div class="container space-1">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mt-3">
<h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Top Destination</h2>
</div>
<div class="row">
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img3.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Turkey</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img7.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">United States</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img6.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Ukraine</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img10.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">France</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img2.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">India</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img5.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">United Kingdom</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img9.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Germany</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img8.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Greece</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img1.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Canada</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img4.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Italy</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
</div>
</div>
</div>
<!-- End Destinantion v2 -->
Destination #v3
Top Destination
<!-- Destinantion v3 -->
<div class="destination-block destination-v3">
<div class="container space-1">
<div class="mb-3 pb-md-3 mb-md-2">
<h2 class="font-weight-bold font-size-xs-20 font-size-30 mb-0">Top Destination</h2>
</div>
<div class="row">
<!-- Card Block -->
<div class="col-md-6 mb-3 mb-md-0">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient-v4 gradient-overlay transition-3d-hover shadow-hover-2 dropdown" style="background-image: url(../../assets/img/630x350/img1.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">United Kingdom</a>
<!-- Dropdown List -->
<div class="destination-dropdown v3">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient-v4 gradient-overlay transition-3d-hover shadow-hover-2 dropdown" style="background-image: url(../../assets/img/300x350/img2.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">France</a>
<!-- Dropdown List -->
<div class="destination-dropdown v3">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient-v4 gradient-overlay transition-3d-hover shadow-hover-2 dropdown" style="background-image: url(../../assets/img/300x350/img4.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">India</a>
<!-- Dropdown List -->
<div class="destination-dropdown v3">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient-v4 gradient-overlay transition-3d-hover shadow-hover-2 dropdown" style="background-image: url(../../assets/img/300x350/img1.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">United States</a>
<!-- Dropdown List -->
<div class="destination-dropdown v3">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient-v4 gradient-overlay transition-3d-hover shadow-hover-2 dropdown" style="background-image: url(../../assets/img/300x350/img3.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">Ukraine</a>
<!-- Dropdown List -->
<div class="destination-dropdown v3">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 mb-3 mb-md-0">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient-v4 gradient-overlay transition-3d-hover shadow-hover-2 dropdown" style="background-image: url(../../assets/img/630x350/img2.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div class="position-relative">
<a href="#" class="destination text-white font-weight-bold font-size-21 pb-3 mb-3 text-lh-1 d-block">Turkey</a>
<!-- Dropdown List -->
<div class="destination-dropdown v3">
<a class="dropdown-item" href="#">30 Hotel</a>
<a class="dropdown-item" href="#">48 Tour</a>
<a class="dropdown-item" href="#">46 Activity</a>
<a class="dropdown-item" href="#">32 Yacht</a>
</div>
<!-- End Dropdown List -->
</div>
</header>
</div>
</div>
<!-- End Card Block -->
</div>
</div>
</div>
<!-- End Destinantion v3 -->
Destination #v4
Popular Destination
<!-- Destinantion v4 -->
<div class="destination-block destination-v4">
<div class="container space-1">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mt-3">
<h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Top Destination</h2>
</div>
<div class="row">
<!-- Card Block -->
<div class="col-md-6 mb-3 mb-md-0">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/630x350/img1.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="destination pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">United Kingdom</a>
</div>
<div class="mt-1 pt-1">
<a href="#" class="text-white">79 Hotel</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/300x350/img2.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="destination pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">France</a>
</div>
<div class="mt-1 pt-1">
<a href="#" class="text-white">54 Hotel</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/300x350/img4.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="destination pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">India</a>
</div>
<div class="mt-1 pt-1">
<a href="#" class="text-white">26 Hotel</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/300x350/img1.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="destination pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">United States</a>
</div>
<div class="mt-1 pt-1">
<a href="#" class="text-white">1991 Hotel</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/300x350/img3.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="destination pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">Ukraine</a>
</div>
<div class="mt-1 pt-1">
<a href="#" class="text-white">269 Hotel</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 mb-3 mb-md-0">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/630x350/img2.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="destination pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">Turkey</a>
</div>
<div class="mt-1 pt-1">
<a href="#" class="text-white">1205 Hotel</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
</div>
</div>
</div>
<!-- End Destinantion v4 -->
Destination #v5
Popular Destination
<!-- Destinantion v5 -->
<div class="destination-block destination-vv5">
<div class="container space-1">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mt-3">
<h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Popular Destination</h2>
</div>
<div class="row">
<!-- Card Block -->
<div class="col-md-6 mb-3 mb-md-0">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/630x350/img1.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">United Kingdom</a>
</div>
<div class="d-inline-flex px-3 py-1 rounded-pill bg-white">
<a href="#" class="font-size-14">15 Tour</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/300x350/img6.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">Turkey</a>
</div>
<div class="d-inline-flex px-3 py-1 rounded-pill bg-white">
<a href="#" class="font-size-14">88 Tour</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/300x350/img5.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">Norway</a>
</div>
<div class="d-inline-flex px-3 py-1 rounded-pill bg-white">
<a href="#" class="font-size-14">92 Tour</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/300x350/img1.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">United States</a>
</div>
<div class="d-inline-flex px-3 py-1 rounded-pill bg-white">
<a href="#" class="font-size-14">75 Tour</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/300x350/img3.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">Ukraine</a>
</div>
<div class="d-inline-flex px-3 py-1 rounded-pill bg-white">
<a href="#" class="font-size-14">05 Tour</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/300x350/img2.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">France</a>
</div>
<div class="d-inline-flex px-3 py-1 rounded-pill bg-white">
<a href="#" class="font-size-14">05 Tour</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="min-height-350 bg-img-hero rounded-border p-5 gradient-overlay-half-bg-gradient transition-3d-hover shadow-hover-2" style="background-image: url(../../assets/img/300x350/img4.jpg);">
<header class="w-100 d-flex justify-content-between mb-3">
<div>
<div class="pb-3 text-lh-1">
<a href="#" class="text-white font-weight-bold font-size-21">India</a>
</div>
<div class="d-inline-flex px-3 py-1 rounded-pill bg-white">
<a href="#" class="font-size-14">65 Tour</a>
</div>
</div>
</header>
</div>
</div>
<!-- End Card Block -->
</div>
</div>
</div>
<!-- End Destinantion v5 -->
Destination #v6
<!-- Destinantion v6 -->
<div class="destination-block destination-v6">
<div class="container space-1">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mt-3">
<h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Top Destination</h2>
</div>
<div class="row">
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 gradient-overlay shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img3.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Turkey</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 gradient-overlay shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img7.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">United States</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 gradient-overlay shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img6.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Ukraine</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 gradient-overlay shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img10.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">France</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 gradient-overlay shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img2.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">India</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 gradient-overlay shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img5.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">United Kingdom</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 gradient-overlay shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img9.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Germany</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 gradient-overlay shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img8.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Greece</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 gradient-overlay shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img1.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Canada</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="col-md-4 col-lg-6 col-xl-2dot4 mb-3 mb-md-4 pb-1">
<a class="d-block" href="#">
<div class="min-height-240 rounded-border px-4 py-5 bg-img-hero transition-3d-hover gradient-overlay-half-bg-gradient-v2 gradient-overlay shadow-hover-2 dropdown" style="background-image: url(../../assets/img/235x240/img4.jpg);">
<header class="w-100 d-flex justify-content-between">
<div class="position-relative">
<h5 class="text-white font-weight-bold font-size-17 mb-1 text-lh-2 d-block">Italy</h5>
</div>
</header>
</div>
</a>
</div>
<!-- End Card Block -->
</div>
</div>
</div>
<!-- End Destinantion v6 -->
Destination Carousel #v7
Top Destination
<!-- Destinantion v7 -->
<div class="destination-block destination-v7">
<div class="container space-1">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mt-3">
<h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Top Destination</h2>
</div>
<div class="js-slick-carousel u-slick u-slick--gutters-3"
data-slides-show="4"
data-slides-scroll="1"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic v1 u-slick__arrow-classic--v1 u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fas fa-chevron-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left"
data-arrow-right-classes="fas fa-chevron-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right"
data-pagi-classes="d-lg-none text-center u-slick__pagination mt-4"
data-responsive='[{
"breakpoint": 1025,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<!-- Card Block -->
<div class="js-slide bg-img-hero-center rounded-border min-height-350 gradient-overlay-half-bg-gradient-v1" style="background-image: url(../../assets/img/300x350/img1.jpg);">
<div class="text-center py-4 mt-1">
<a href="#" class="text-white font-weight-bold font-size-21">United States</a>
<p class="text-white font-size-19 font-weight-bold mt-1 mb-0">£99 /
<span class="font-size-14 font-weight-normal ml-1">night average</span>
</p>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide bg-img-hero-center rounded-border min-height-350 gradient-overlay-half-bg-gradient-v1" style="background-image: url(../../assets/img/300x350/img3.jpg);">
<div class="text-center py-4 mt-1">
<a href="#" class="text-white font-weight-bold font-size-21">Ukraine</a>
<p class="text-white font-size-19 font-weight-bold mt-1 mb-0">£299 /
<span class="font-size-14 font-weight-normal ml-1">night average</span>
</p>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide bg-img-hero-center rounded-border min-height-350 gradient-overlay-half-bg-gradient-v1" style="background-image: url(../../assets/img/300x350/img2.jpg);">
<div class="text-center py-4 mt-1">
<a href="#" class="text-white font-weight-bold font-size-21">France</a>
<p class="text-white font-size-19 font-weight-bold mt-1 mb-0">£358 /
<span class="font-size-14 font-weight-normal ml-1">night average</span>
</p>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide bg-img-hero-center rounded-border min-height-350 gradient-overlay-half-bg-gradient-v1" style="background-image: url(../../assets/img/300x350/img4.jpg);">
<div class="text-center py-4 mt-1">
<a href="#" class="text-white font-weight-bold font-size-21">India</a>
<p class="text-white font-size-19 font-weight-bold mt-1 mb-0">£36 /
<span class="font-size-14 font-weight-normal ml-1">night average</span>
</p>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide bg-img-hero-center rounded-border min-height-350 gradient-overlay-half-bg-gradient-v1" style="background-image: url(../../assets/img/300x350/img5.jpg);">
<div class="text-center py-4 mt-1">
<a href="#" class="text-white font-weight-bold font-size-21">Norway</a>
<p class="text-white font-size-19 font-weight-bold mt-1 mb-0">£89 /
<span class="font-size-14 font-weight-normal ml-1">night average</span>
</p>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide bg-img-hero-center rounded-border min-height-350 gradient-overlay-half-bg-gradient-v1" style="background-image: url(../../assets/img/300x350/img6.jpg);">
<div class="text-center py-4 mt-1">
<a href="#" class="text-white font-weight-bold font-size-21">Turkey</a>
<p class="text-white font-size-19 font-weight-bold mt-1 mb-0">£152 /
<span class="font-size-14 font-weight-normal ml-1">night average</span>
</p>
</div>
</div>
<!-- End Card Block -->
</div>
</div>
</div>
<!-- End Destinantion v7 -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS MyTravel -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>