Product Cards Blocks
Start building your website with ready-to-use product cards blocks.
Static #1
Recommended Hotels
More
<!-- Product Cards Ratings -->
<div class="product-card-block product-card-v2">
<div class="container">
<div class="d-flex justify-content-between mb-3 pt-md-3 mt-1 pb-md-3 mb-md-2 align-items-end">
<h2 class="font-weight-bold font-size-xs-20 font-size-30 mb-0 text-lh-sm">Recommended Hotels</h2>
<a href="#" class="font-weight-bold d-flex text-lh-1 mb-md-2 ml-2">More
<i class="flaticon-right-arrow ml-2"></i>
</a>
</div>
<div class="row">
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img9.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-4 pb-3">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-white">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Greater London, United Kingdom
</div>
</a>
</div>
</div>
</div>
<div class="card-body px-4 pt-2 pb-3">
<div class="mb-2">
<div class="d-inline-flex align-items-center font-size-13 text-lh-1 text-primary letter-spacing-3">
<div class="green-lighter">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</div>
</div>
</div>
<a href="#" class="card-title font-size-17 font-weight-bold text-dark">Empire Prestige Causeway Bay</a>
<div class="mt-2 mb-3">
<span class="badge badge-pill badge-primary py-1 px-2 font-size-14 border-radius-3 font-weight-normal">4.6/5</span>
<span class="font-size-14 text-gray-1 ml-2">(166 reviews)</span>
</div>
<div class="mb-0">
<span class="mr-1 font-size-14 text-gray-1">From</span>
<span class="font-weight-bold">£899.00</span>
<span class="font-size-14 text-gray-1"> / night</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img10.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-4 pb-3">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-white">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Istanbul, Turkey
</div>
</a>
</div>
</div>
</div>
<div class="card-body px-4 pt-2 pb-3">
<div class="mb-2">
<div class="d-inline-flex align-items-center font-size-13 text-lh-1 text-primary letter-spacing-3">
<div class="green-lighter">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</div>
</div>
</div>
<a href="#" class="card-title font-size-17 font-weight-bold text-dark">Park Avenue Baker Street London</a>
<div class="mt-2 mb-3">
<span class="badge badge-pill badge-primary py-1 px-2 font-size-14 border-radius-3 font-weight-normal">4.6/5</span>
<span class="font-size-14 text-gray-1 ml-2">(166 reviews)</span>
</div>
<div class="mb-0">
<span class="mr-1 font-size-14 text-gray-1">From</span>
<span class="font-weight-bold">£899.00</span>
<span class="font-size-14 text-gray-1"> / night</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img12.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-4 pb-3">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-white">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Istanbul, Turkey
</div>
</a>
</div>
</div>
</div>
<div class="card-body px-4 pt-2 pb-3">
<div class="mb-2">
<div class="d-inline-flex align-items-center font-size-13 text-lh-1 text-primary letter-spacing-3">
<div class="green-lighter">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</div>
</div>
</div>
<a href="#" class="card-title font-size-17 font-weight-bold text-dark">New Road Hotel</a>
<div class="mt-2 mb-3">
<span class="badge badge-pill badge-primary py-1 px-2 font-size-14 border-radius-3 font-weight-normal">4.6/5</span>
<span class="font-size-14 text-gray-1 ml-2">(166 reviews)</span>
</div>
<div class="mb-0">
<span class="mr-1 font-size-14 text-gray-1">From</span>
<span class="font-weight-bold">£899.00</span>
<span class="font-size-14 text-gray-1"> / night</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img11.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-4 pb-3">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-white">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Istanbul, Turkey
</div>
</a>
</div>
</div>
</div>
<div class="card-body px-4 pt-2 pb-3">
<div class="mb-2">
<div class="d-inline-flex align-items-center font-size-13 text-lh-1 text-primary letter-spacing-3">
<div class="green-lighter">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</div>
</div>
</div>
<a href="#" class="card-title font-size-17 font-weight-bold text-dark">New York Marriott Downtown</a>
<div class="mt-2 mb-3">
<span class="badge badge-pill badge-primary py-1 px-2 font-size-14 border-radius-3 font-weight-normal">4.6/5</span>
<span class="font-size-14 text-gray-1 ml-2">(166 reviews)</span>
</div>
<div class="mb-0">
<span class="mr-1 font-size-14 text-gray-1">From</span>
<span class="font-weight-bold">£899.00</span>
<span class="font-size-14 text-gray-1"> / night</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Product Cards Ratings -->
Static #2
Popular Activities
More
<!-- Product Cards -->
<div class="product-card-block product-card-v4">
<div class="container space-1">
<div class="d-flex justify-content-between mb-3 pt-md-3 mt-1 pb-md-3 mb-md-2 align-items-end">
<h2 class="font-weight-bold font-size-xs-20 font-size-30 mb-0 text-lh-sm">Popular Activities</h2>
<a href="#" class="font-weight-bold d-flex text-lh-1 mb-md-2 ml-2">More
<i class="flaticon-right-arrow ml-2"></i>
</a>
</div>
<div class="row">
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img13.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-4 pb-3">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-white">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Greater London, United Kingdom
</div>
</a>
</div>
</div>
</div>
<div class="card-body px-4 py-3">
<a href="#" class="card-title font-size-17 font-weight-bold text-dark">Mangrove Tunnel Kayak Eco <br> Tour</a>
<div class="mt-2 mb-3">
<span class="badge badge-pill badge-primary py-1 px-2 font-size-14 border-radius-3 font-weight-normal">4.6/5</span>
<span class="font-size-14 text-gray-1 ml-2">(166 reviews)</span>
</div>
<div class="mb-0">
<span class="mr-1 font-size-14 text-gray-1">From</span>
<span class="font-weight-bold">£899.00</span>
<span class="font-size-14 text-gray-1"> / night</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img14.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-4 pb-3">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-white">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Istanbul, Turkey
</div>
</a>
</div>
</div>
</div>
<div class="card-body px-4 py-3">
<a href="#" class="card-title font-size-17 font-weight-bold text-dark">Half-Day Outdoor Rock Climbing <br> Session</a>
<div class="mt-2 mb-3">
<span class="badge badge-pill badge-primary py-1 px-2 font-size-14 border-radius-3 font-weight-normal">4.6/5</span>
<span class="font-size-14 text-gray-1 ml-2">(166 reviews)</span>
</div>
<div class="mb-0">
<span class="mr-1 font-size-14 text-gray-1">From</span>
<span class="font-weight-bold">£899.00</span>
<span class="font-size-14 text-gray-1"> / night</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img15.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-4 pb-3">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-white">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> New York, United States
</div>
</a>
</div>
</div>
</div>
<div class="card-body px-4 py-3">
<a href="#" class="card-title font-size-17 font-weight-bold text-dark">Paramount Ranch Guided <br> Horseback Tour</a>
<div class="mt-2 mb-3">
<span class="badge badge-pill badge-primary py-1 px-2 font-size-14 border-radius-3 font-weight-normal">4.6/5</span>
<span class="font-size-14 text-gray-1 ml-2">(166 reviews)</span>
</div>
<div class="mb-0">
<span class="mr-1 font-size-14 text-gray-1">From</span>
<span class="font-weight-bold">£899.00</span>
<span class="font-size-14 text-gray-1"> / night</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img16.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-4 pb-3">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-white">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> New South Wales, Australia
</div>
</a>
</div>
</div>
</div>
<div class="card-body px-4 py-3">
<a href="#" class="card-title font-size-17 font-weight-bold text-dark">Scuba Diving Charter in <br> Boyton Beach</a>
<div class="mt-2 mb-3">
<span class="badge badge-pill badge-primary py-1 px-2 font-size-14 border-radius-3 font-weight-normal">4.6/5</span>
<span class="font-size-14 text-gray-1 ml-2">(166 reviews)</span>
</div>
<div class="mb-0">
<span class="mr-1 font-size-14 text-gray-1">From</span>
<span class="font-weight-bold">£899.00</span>
<span class="font-size-14 text-gray-1"> / night</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Product Cards -->
Static #3
Trending Rental
More
Greater London, United Kingdom
2.5/5 Excellant
48 reviews
-
4800 sq ft
-
2 Bathrooms
-
4 Rooms
-
6 Beds
Istanbul , Turkey
2.5/5 Excellant
48 reviews
-
4800 sq ft
-
4 Rooms
-
2 Bathrooms
-
6 Beds
New York, United States
2.5/5 Excellant
48 reviews
-
4800 sq ft
-
2 Bathrooms
-
4 Rooms
-
6 Beds
New South Wales, Australia
2.5/5 Excellant
48 reviews
-
4800 sq ft
-
2 Bathrooms
-
4 Rooms
-
6 Beds
<!-- Product Cards Feature -->
<div class="product-card-block product-card-v5">
<div class="container space-1">
<div class="d-flex justify-content-between mb-3 pt-md-3 mt-1 pb-md-3 mb-md-2 align-items-end">
<h2 class="font-weight-bold font-size-xs-20 font-size-30 mb-0 text-lh-sm">Trending Rental</h2>
<a href="#" class="font-weight-bold d-flex text-lh-1 mb-md-2 ml-2">More
<i class="flaticon-right-arrow ml-2"></i>
</a>
</div>
<div class="row">
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img17.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-5 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<a href="#">
<span class="text-white font-weight-bold font-size-17">Comfortable Office Space</span>
</a>
<div class="text-white my-2">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£899.00</span>
<span class="font-size-14"> / night</span>
</div>
</div>
</div>
</div>
<div class="position-absolute top-0 left-0 pt-5 pl-3">
<a href="#">
<span class="badge badge-pill bg-white text-primary px-3 py-2 font-size-14 font-weight-normal">Featured</span>
</a>
</div>
<div class="card-body px-4 py-3 border-bottom">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-gray-1">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Greater London, United Kingdom
</div>
</a>
<div class="mt-1">
<span class="py-1 font-size-14 border-radius-3 font-weight-normal pagination-v2-arrow-color">2.5/5 Excellant</span>
<span class="font-size-14 text-gray-1 ml-2">48 reviews</span>
</div>
</div>
<div class="px-4 pt-3 pb-2">
<div class="row">
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-plans font-size-16"></small>
</small>
<div class="media-body font-size-1">
4800 sq ft
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-bathtub font-size-16"></small>
</small>
<div class="media-body font-size-1">
2 Bathrooms
</div>
</li>
</ul>
</div>
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-door font-size-16"></small>
</small>
<div class="media-body font-size-1">
4 Rooms
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-bed-1 font-size-16"></small>
</small>
<div class="media-body font-size-1">
6 Beds
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img18.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-5 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<a href="#">
<span class="text-white font-weight-bold font-size-17">Sunny, Modern room in Village!</span>
</a>
<div class="text-white my-2">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£899.00</span>
<span class="font-size-14"> / night</span>
</div>
</div>
</div>
</div>
<div class="card-body px-4 py-3 border-bottom">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-gray-1">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Istanbul , Turkey
</div>
</a>
<div class="mt-1">
<span class="py-1 font-size-14 border-radius-3 font-weight-normal pagination-v2-arrow-color">2.5/5 Excellant</span>
<span class="font-size-14 text-gray-1 ml-2">48 reviews</span>
</div>
</div>
<div class="px-4 pt-3 pb-2">
<div class="row">
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-plans font-size-16"></small>
</small>
<div class="media-body font-size-1">
4800 sq ft
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-door font-size-16"></small>
</small>
<div class="media-body font-size-1">
4 Rooms
</div>
</li>
</ul>
</div>
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-bathtub font-size-16"></small>
</small>
<div class="media-body font-size-1">
2 Bathrooms
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-bed-1 font-size-16"></small>
</small>
<div class="media-body font-size-1">
6 Beds
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img19.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-5 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<a href="#">
<span class="text-white font-weight-bold font-size-17">Office Space in Downey</span>
</a>
<div class="text-white my-2">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£899.00</span>
<span class="font-size-14"> / night</span>
</div>
</div>
</div>
</div>
<div class="card-body px-4 py-3 border-bottom">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-gray-1">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> New York, United States
</div>
</a>
<div class="mt-1">
<span class="py-1 font-size-14 border-radius-3 font-weight-normal pagination-v2-arrow-color">2.5/5 Excellant</span>
<span class="font-size-14 text-gray-1 ml-2">48 reviews</span>
</div>
</div>
<div class="px-4 pt-3 pb-2">
<div class="row">
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-plans font-size-16"></small>
</small>
<div class="media-body font-size-1">
4800 sq ft
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-bathtub font-size-16"></small>
</small>
<div class="media-body font-size-1">
2 Bathrooms
</div>
</li>
</ul>
</div>
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-door font-size-16"></small>
</small>
<div class="media-body font-size-1">
4 Rooms
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-bed-1 font-size-16"></small>
</small>
<div class="media-body font-size-1">
6 Beds
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img20.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-5 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<a href="#">
<span class="text-white font-weight-bold font-size-17">Apartment in Wellington</span>
</a>
<div class="text-white my-2">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£899.00</span>
<span class="font-size-14"> / night</span>
</div>
</div>
</div>
</div>
<div class="card-body px-4 py-3 border-bottom">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-gray-1">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> New South Wales, Australia
</div>
</a>
<div class="mt-1">
<span class="py-1 font-size-14 border-radius-3 font-weight-normal pagination-v2-arrow-color">2.5/5 Excellant</span>
<span class="font-size-14 text-gray-1 ml-2">48 reviews</span>
</div>
</div>
<div class="px-4 pt-3 pb-2">
<div class="row">
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-plans font-size-16"></small>
</small>
<div class="media-body font-size-1">
4800 sq ft
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-bathtub font-size-16"></small>
</small>
<div class="media-body font-size-1">
2 Bathrooms
</div>
</li>
</ul>
</div>
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-door font-size-16"></small>
</small>
<div class="media-body font-size-1">
4 Rooms
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-2">
<small class="flaticon-bed-1 font-size-16"></small>
</small>
<div class="media-body font-size-1">
6 Beds
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Product Cards Feature -->
Static #4
Last Minute Yacht Deals
More
<!-- Product Cards Feature with Ratings -->
<div class="product-card-block product-card-v6">
<div class="container space-1">
<div class="d-flex justify-content-between mb-3 pt-md-3 mt-1 pb-md-3 mb-md-2 align-items-end">
<h2 class="font-weight-bold font-size-xs-20 font-size-30 mb-0 text-lh-sm">Last Minute Yacht Deals</h2>
<a href="#" class="font-weight-bold d-flex text-lh-1 mb-md-2 ml-2">More
<i class="flaticon-right-arrow ml-2"></i>
</a>
</div>
<div class="row">
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img21.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<a href="#">
<span class="text-white font-weight-bold font-size-17">Aquavita</span>
</a>
<div class="text-white my-2">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£350.00</span>
<span class="font-size-14"> / week</span>
</div>
</div>
</div>
</div>
<div class="card-body px-4 pt-3 pb-2 border-bottom">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-gray-1">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Greater London, United Kingdom
</div>
</a>
<div class="my-2">
<div class="d-inline-flex align-items-center font-size-14 text-lh-1 text-primary">
<div class="green-lighter mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</div>
<span class="text-secondary font-size-14 mt-1">48 Reviews</span>
</div>
</div>
</div>
<div class="px-4 py-3">
<div class="row">
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-ruler font-size-16"></small>
</small>
<div class="media-body font-size-1">
30.53M
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-user font-size-16"></small>
</small>
<div class="media-body font-size-1">
3
</div>
</li>
</ul>
</div>
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-download-speed font-size-16"></small>
</small>
<div class="media-body font-size-1">
16 MPH
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-bed-1 font-size-16"></small>
</small>
<div class="media-body font-size-1">
5
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img22.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<a href="#">
<span class="text-white font-weight-bold font-size-17">Anna Maria</span>
</a>
<div class="text-white my-2">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£350.00</span>
<span class="font-size-14"> / week</span>
</div>
</div>
</div>
</div>
<div class="card-body px-4 pt-3 pb-2 border-bottom">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-gray-1">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Greater London, United Kingdom
</div>
</a>
<div class="my-2">
<div class="d-inline-flex align-items-center font-size-14 text-lh-1 text-primary">
<div class="green-lighter mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</div>
<span class="text-secondary font-size-14 mt-1">48 Reviews</span>
</div>
</div>
</div>
<div class="px-4 py-3">
<div class="row">
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-ruler font-size-16"></small>
</small>
<div class="media-body font-size-1">
30.53M
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-user font-size-16"></small>
</small>
<div class="media-body font-size-1">
3
</div>
</li>
</ul>
</div>
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-download-speed font-size-16"></small>
</small>
<div class="media-body font-size-1">
16 MPH
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-bed-1 font-size-16"></small>
</small>
<div class="media-body font-size-1">
5
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img23.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<a href="#">
<span class="text-white font-weight-bold font-size-17">Blue Moon Cruising</span>
</a>
<div class="text-white my-2">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£350.00</span>
<span class="font-size-14"> / week</span>
</div>
</div>
</div>
</div>
<div class="card-body px-4 pt-3 pb-2 border-bottom">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-gray-1">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Greater London, United Kingdom
</div>
</a>
<div class="my-2">
<div class="d-inline-flex align-items-center font-size-14 text-lh-1 text-primary">
<div class="green-lighter mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</div>
<span class="text-secondary font-size-14 mt-1">48 Reviews</span>
</div>
</div>
</div>
<div class="px-4 py-3">
<div class="row">
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-ruler font-size-16"></small>
</small>
<div class="media-body font-size-1">
30.53M
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-user font-size-16"></small>
</small>
<div class="media-body font-size-1">
3
</div>
</li>
</ul>
</div>
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-download-speed font-size-16"></small>
</small>
<div class="media-body font-size-1">
16 MPH
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-bed-1 font-size-16"></small>
</small>
<div class="media-body font-size-1">
5
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img24.jpg">
</a>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon text-white rounded-circle" data-toggle="tooltip" data-placement="top" title="" data-original-title="Save for later">
<span class="flaticon-heart-1 font-size-20"></span>
</button>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<a href="#">
<span class="text-white font-weight-bold font-size-17">Alexanrda</span>
</a>
<div class="text-white my-2">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£350.00</span>
<span class="font-size-14"> / week</span>
</div>
</div>
</div>
</div>
<div class="card-body px-4 pt-3 pb-2 border-bottom">
<a href="#" class="d-block">
<div class="d-flex align-items-center font-size-14 text-gray-1">
<i class="icon flaticon-placeholder mr-2 font-size-20"></i> Greater London, United Kingdom
</div>
</a>
<div class="my-2">
<div class="d-inline-flex align-items-center font-size-14 text-lh-1 text-primary">
<div class="green-lighter mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</div>
<span class="text-secondary font-size-14 mt-1">48 Reviews</span>
</div>
</div>
</div>
<div class="px-4 py-3">
<div class="row">
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-ruler font-size-16"></small>
</small>
<div class="media-body font-size-1">
30.53M
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-user font-size-16"></small>
</small>
<div class="media-body font-size-1">
3
</div>
</li>
</ul>
</div>
<div class="col-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-download-speed font-size-16"></small>
</small>
<div class="media-body font-size-1">
16 MPH
</div>
</li>
<li class="media mb-2 text-gray-1 align-items-center">
<small class="mr-3">
<small class="flaticon-bed-1 font-size-16"></small>
</small>
<div class="media-body font-size-1">
5
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Product Cards Feature with Ratings -->
Static #5
Featured Flight Deals
More
London to Paris
Oneway Flight
Dubai to Spain
Oneway Flight
Rome to Australia
Oneway Flight
London to Istanbul
Oneway Flight
<!-- Product Cards -->
<div class="product-card-block product-card-v7">
<div class="container space-1">
<div class="d-flex justify-content-between mb-3 pt-md-3 mt-1 pb-md-3 mb-md-2 align-items-end">
<h2 class="font-weight-bold font-size-xs-20 font-size-30 mb-0 text-lh-sm">Featured Flight Deals</h2>
<a href="#" class="font-weight-bold d-flex text-lh-1 mb-md-2 ml-2">More
<i class="flaticon-right-arrow ml-2"></i>
</a>
</div>
<div class="row">
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img27.jpg">
</a>
<div class="position-absolute top-0 left-0 pt-5 pl-3">
<a href="#">
<span class="badge badge-pill bg-white text-primary px-4 py-2 font-size-14 font-weight-normal">Paris</span>
</a>
<span class="ml-2 text-white">Delta Airline</span>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<div class="text-white my-1">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£350.00</span>
</div>
</div>
</div>
</div>
<div class="card-body px-3 pt-2">
<a href="#" class="card-title font-size-17 font-weight-bold mb-0 text-dark pt-1 pb-1 d-block">London to Paris</a>
<div class="font-size-14 text-gray-1">
Oneway Flight
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img28.jpg">
</a>
<div class="position-absolute top-0 left-0 pt-5 pl-3">
<a href="#">
<span class="badge badge-pill bg-white text-primary px-4 py-2 font-size-14 font-weight-normal">Spain</span>
</a>
<span class="ml-2 text-white">United Airline</span>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<div class="text-white my-1">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£350.00</span>
</div>
</div>
</div>
</div>
<div class="card-body px-3 pt-2">
<a href="#" class="card-title font-size-17 font-weight-bold mb-0 text-dark pt-1 pb-1 d-block">Dubai to Spain</a>
<div class="font-size-14 text-gray-1">
Oneway Flight
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img26.jpg">
</a>
<div class="position-absolute top-0 left-0 pt-5 pl-3">
<a href="#">
<span class="badge badge-pill bg-white text-primary px-4 py-2 font-size-14 font-weight-normal">Australia</span>
</a>
<span class="ml-2 text-white">Air Asia Airline</span>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<div class="text-white my-1">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£350.00</span>
</div>
</div>
</div>
</div>
<div class="card-body px-3 pt-2">
<a href="#" class="card-title font-size-17 font-weight-bold mb-0 text-dark pt-1 pb-1 d-block">Rome to Australia</a>
<div class="font-size-14 text-gray-1">
Oneway Flight
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-3 mb-md-4 pb-1">
<div class="card transition-3d-hover shadow-hover-2 h-100">
<div class="position-relative">
<a href="#" class="d-block gradient-overlay-half-bg-gradient-v5">
<img class="card-img-top" src="../../assets/img/300x230/img25.jpg">
</a>
<div class="position-absolute top-0 left-0 pt-5 pl-3">
<a href="#">
<span class="badge badge-pill bg-white text-primary px-4 py-2 font-size-14 font-weight-normal">Istanbul</span>
</a>
<span class="ml-2 text-white">Turkish Airline</span>
</div>
<div class="position-absolute bottom-0 left-0 right-0">
<div class="px-3 pb-2">
<div class="text-white my-1">
<span class="mr-1 font-size-14">From</span>
<span class="font-weight-bold font-size-19">£350.00</span>
</div>
</div>
</div>
</div>
<div class="card-body px-3 pt-2">
<a href="#" class="card-title font-size-17 font-weight-bold mb-0 text-dark pt-1 pb-1 d-block">London to Istanbul</a>
<div class="font-size-14 text-gray-1">
Oneway Flight
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Product Cards -->