Category
MyTravel has three different version of categories.
Category #v1
<!-- Category v1 -->
<div class="bg-gray-2">
<div class="container">
<div class="space-1">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mt-4">
<h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Find a Home Type</h2>
</div>
<div class="row">
<div class="col-md-6 col-xl-3">
<div class="rounded-xs mb-5 mb-xl-0">
<a class="d-block" href="#">
<div class="bg-img-hero gradient-overlay-half-bg-white transition-3d-hover shadow-hover-2 max-height-200" style="background-image: url(../../assets/img/307x200/img1.jpg);">
<div class="text-center py-5">
<i class="flaticon-house-1 font-size-50 text-red-lighter-1"></i>
<h6 class="font-size-17 font-weight-bold text-gray-3 mt-2">Modern Villa</h6>
<span class="font-size-14 font-weight-normal text-gray-1">07 Listings</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="rounded-xs mb-5 mb-xl-0">
<a class="d-block" href="#">
<div class="bg-img-hero gradient-overlay-half-bg-white transition-3d-hover shadow-hover-2 max-height-200" style="background-image: url(../../assets/img/307x200/img1.jpg);">
<div class="text-center py-5">
<i class="flaticon-house font-size-50 text-red-lighter-1"></i>
<h6 class="font-size-17 font-weight-bold text-gray-3 mt-2">Family House</h6>
<span class="font-size-14 font-weight-normal text-gray-1">58 Listings</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="rounded-xs mb-5 mb-xl-0">
<a class="d-block" href="#">
<div class="bg-img-hero gradient-overlay-half-bg-white transition-3d-hover shadow-hover-2 max-height-200" style="background-image: url(../../assets/img/307x200/img1.jpg);">
<div class="text-center py-5">
<i class="flaticon-modern-house font-size-50 text-red-lighter-1"></i>
<h6 class="font-size-17 font-weight-bold text-gray-3 mt-2">Town House</h6>
<span class="font-size-14 font-weight-normal text-gray-1">07 Listings</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="rounded-xs">
<a class="d-block" href="#">
<div class="bg-img-hero gradient-overlay-half-bg-white transition-3d-hover shadow-hover-2 max-height-200" style="background-image: url(../../assets/img/307x200/img1.jpg);">
<div class="text-center py-5">
<i class="flaticon-apartment font-size-50 text-red-lighter-1"></i>
<h6 class="font-size-17 font-weight-bold text-gray-3 mt-2">Apartment</h6>
<span class="font-size-14 font-weight-normal text-gray-1">07 Listings</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Category v1 -->
Category #v2
Select by Category
<!-- Category V2 -->
<div class="container space-1">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mt-4">
<h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Select by Category</h2>
</div>
<div class="row">
<div class="col-md-6 col-xl-3">
<div class="mb-5">
<a class="d-block position-50-hover text-center overflow-hidden" href="#">
<div class="bg-img-hero rounded-xs bg-gray-23 min-height-200">
<div class="pt-4 mb-5">
<h6 class="mb-0 font-size-17 font-weight-bold text-dark-1">Compact</h6>
</div>
<img class="img-fluid position-50-horizontal" src="../../assets/img/300x100/img1.jpg" alt="Image description">
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="mb-5">
<a class="d-block position-50-hover text-center overflow-hidden" href="#">
<div class="bg-img-hero rounded-xs bg-gray-23 min-height-200">
<div class="pt-4 mb-5">
<h6 class="mb-0 font-size-17 font-weight-bold text-dark-1">Convertible</h6>
</div>
<img class="img-fluid position-50-horizontal" src="../../assets/img/300x100/img2.jpg" alt="Image description">
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="mb-5">
<a class="d-block position-50-hover text-center overflow-hidden" href="#">
<div class="bg-img-hero rounded-xs bg-gray-23 min-height-200">
<div class="pt-4 mb-5">
<h6 class="mb-0 font-size-17 font-weight-bold text-dark-1">Coupe</h6>
</div>
<img class="img-fluid position-50-horizontal" src="../../assets/img/300x100/img3.jpg" alt="Image description">
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="mb-5">
<a class="d-block position-50-hover text-center overflow-hidden" href="#">
<div class="bg-img-hero rounded-xs bg-gray-23 min-height-200">
<div class="pt-4 mb-5">
<h6 class="mb-0 font-size-17 font-weight-bold text-dark-1">SUV</h6>
</div>
<img class="img-fluid position-50-horizontal" src="../../assets/img/300x100/img4.jpg" alt="Image description">
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="mb-5">
<a class="d-block position-50-hover text-center overflow-hidden" href="#">
<div class="bg-img-hero rounded-xs bg-gray-23 min-height-200">
<div class="pt-4 mb-5">
<h6 class="mb-0 font-size-17 font-weight-bold text-dark-1">Sedan</h6>
</div>
<img class="img-fluid position-50-horizontal" src="../../assets/img/300x100/img5.jpg" alt="Image description">
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="mb-5">
<a class="d-block position-50-hover text-center overflow-hidden" href="#">
<div class="bg-img-hero rounded-xs bg-gray-23 min-height-200">
<div class="pt-4 mb-5">
<h6 class="mb-0 font-size-17 font-weight-bold text-dark-1">Sports Car</h6>
</div>
<img class="img-fluid position-50-horizontal" src="../../assets/img/300x100/img6.jpg" alt="Image description">
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="mb-5">
<a class="d-block position-50-hover text-center overflow-hidden" href="#">
<div class="bg-img-hero rounded-xs bg-gray-23 min-height-200">
<div class="pt-4 mb-5">
<h6 class="mb-0 font-size-17 font-weight-bold text-dark-1">Trucks</h6>
</div>
<img class="img-fluid position-50-horizontal" src="../../assets/img/300x100/img7.jpg" alt="Image description">
</div>
</a>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="mb-5">
<a class="d-block position-50-hover text-center overflow-hidden" href="#">
<div class="bg-img-hero rounded-xs bg-gray-23 min-height-200">
<div class="pt-4 mb-5">
<h6 class="mb-0 font-size-17 font-weight-bold text-dark-1">Wagons</h6>
</div>
<img class="img-fluid position-50-horizontal" src="../../assets/img/300x100/img8.jpg" alt="Image description">
</div>
</a>
</div>
</div>
</div>
</div>
<!-- End Category V2 -->
Category #v3
<!-- Category v3 -->
<div class="container space-1 mt-3 mb-4">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5">
<h2 class="section-title text-black font-size-30 font-weight-bold mb-0">Yacht Rentals</h2>
</div>
<div class="row">
<div class="col-md-4 col-xl-2">
<div class="mb-5 mb-xl-0">
<a class="d-block" href="#">
<div class="color-hover py-4 px-3 bg-gray-4 rounded-xs text-center transition-3d-hover shadow-hover-2">
<i class="flaticon-yatch-1 font-size-60 text-brown-light"></i>
<h6 class="font-size-17 text-gray-3 font-weight-bold">Boat</h6>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-xl-2">
<div class="mb-5 mb-xl-0">
<a class="d-block" href="#">
<div class="color-hover py-4 px-3 bg-gray-4 rounded-xs text-center transition-3d-hover shadow-hover-2">
<i class="flaticon-kayak font-size-60 text-brown-light"></i>
<h6 class="font-size-17 text-gray-3 font-weight-bold">Canoe</h6>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-xl-2">
<div class="mb-5 mb-xl-0">
<a class="d-block" href="#">
<div class="color-hover py-4 px-3 bg-gray-4 rounded-xs text-center transition-3d-hover shadow-hover-2">
<i class="flaticon-yatch-2 font-size-60 text-brown-light"></i>
<h6 class="font-size-17 text-gray-3 font-weight-bold">Dinghy</h6>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-xl-2">
<div class="mb-5 mb-md-0">
<a class="d-block" href="#">
<div class="color-hover py-4 px-3 bg-gray-4 rounded-xs text-center transition-3d-hover shadow-hover-2">
<i class="flaticon-jetski-facing-right font-size-60 text-brown-light"></i>
<h6 class="font-size-17 text-gray-3 font-weight-bold">Jet Sky</h6>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-xl-2">
<div class="mb-5 mb-md-0">
<a class="d-block" href="#">
<div class="color-hover py-4 px-3 bg-gray-4 rounded-xs text-center transition-3d-hover shadow-hover-2">
<i class="flaticon-sailboat-1 font-size-60 text-brown-light"></i>
<h6 class="font-size-17 text-gray-3 font-weight-bold">Sailboat</h6>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-xl-2">
<div class="mb-0">
<a class="d-block" href="#">
<div class="color-hover py-4 px-3 bg-gray-4 rounded-xs text-center transition-3d-hover shadow-hover-2">
<i class="flaticon-yatch-1 font-size-60 text-brown-light"></i>
<h6 class="font-size-17 text-gray-3 font-weight-bold">Yacht</h6>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- End Category v3 -->