Products Grid
Ready-to-use Shop product blocks and components.
Products #1
<div class="row">
<div class="col-md-4 mb-5 mb-md-0">
<!-- Card -->
<div class="card d-block">
<div class="card-body d-flex align-items-center p-0">
<div class="w-65 border-right">
<img class="img-fluid" src="../../assets/img/380x400/img3.jpg" alt="Image Description">
</div>
<div class="w-35">
<div class="border-bottom">
<img class="img-fluid" src="../../assets/img/380x360/img32.jpg" alt="Image Description">
</div>
<img class="img-fluid" src="../../assets/img/380x360/img33.jpg" alt="Image Description">
</div>
</div>
<div class="card-footer text-center py-4">
<h3 class="h5 mb-1">T-shirts</h3>
<span class="d-block text-muted font-size-1 mb-3">Starting from $29.99</span>
<a class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover px-5" href="#">View All T-shirts</a>
</div>
</div>
<!-- End Card -->
</div>
<div class="col-md-4 mb-5 mb-md-0">
<!-- Card -->
<div class="card d-block">
<div class="card-body d-flex align-items-center p-0">
<div class="w-65 border-right">
<img class="img-fluid" src="../../assets/img/380x400/img4.jpg" alt="Image Description">
</div>
<div class="w-35">
<div class="border-bottom">
<img class="img-fluid" src="../../assets/img/380x360/img34.jpg" alt="Image Description">
</div>
<img class="img-fluid" src="../../assets/img/380x360/img35.jpg" alt="Image Description">
</div>
</div>
<div class="card-footer text-center py-4">
<h3 class="h5 mb-1">Tech covers</h3>
<span class="d-block text-muted font-size-1 mb-3">Starting from $399.99</span>
<a class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover px-5" href="#">View All Tech covers</a>
</div>
</div>
<!-- End Card -->
</div>
<div class="col-md-4">
<!-- Card -->
<div class="card d-block">
<div class="card-body d-flex align-items-center p-0">
<div class="w-65 border-right">
<img class="img-fluid" src="../../assets/img/380x400/img5.jpg" alt="Image Description">
</div>
<div class="w-35">
<div class="border-bottom">
<img class="img-fluid" src="../../assets/img/380x360/img36.jpg" alt="Image Description">
</div>
<img class="img-fluid" src="../../assets/img/380x360/img37.jpg" alt="Image Description">
</div>
</div>
<div class="card-footer text-center py-4">
<h3 class="h5 mb-1">Caps</h3>
<span class="d-block text-muted font-size-1 mb-3">Starting from $13.99</span>
<a class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover px-5" href="#">View All Caps</a>
</div>
</div>
<!-- End Card -->
</div>
</div>
Products #2
<!-- Products Section -->
<div class="container">
<div class="row">
<div class="col-6 col-lg-3 mb-5 mb-lg-0">
<!-- Card -->
<div class="card d-block">
<img class="card-img-top" src="../../assets/img/320x320/img6.jpg" alt="Image Description">
<div class="card-footer text-center py-4">
<h3 class="h5 mb-1">New releases</h3>
<span class="d-block text-muted font-size-1 mb-3">Be well suited</span>
<a class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover px-5" href="#">View All</a>
</div>
</div>
<!-- End Card -->
</div>
<div class="col-6 col-lg-3 mb-5 mb-lg-0">
<!-- Card -->
<div class="card d-block">
<img class="card-img-top" src="../../assets/img/320x320/img7.jpg" alt="Image Description">
<div class="card-footer text-center py-4">
<h3 class="h5 mb-1">Sale</h3>
<span class="d-block text-muted font-size-1 mb-3">30% off orders $50+</span>
<a class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover px-5" href="#">View All</a>
</div>
</div>
<!-- End Card -->
</div>
<div class="col-6 col-lg-3">
<!-- Card -->
<div class="card d-block">
<img class="card-img-top" src="../../assets/img/320x320/img5.jpg" alt="Image Description">
<div class="card-footer text-center py-4">
<h3 class="h5 mb-1">Best sellers</h3>
<span class="d-block text-muted font-size-1 mb-3">Pole and interesting</span>
<a class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover px-5" href="#">View All</a>
</div>
</div>
<!-- End Card -->
</div>
<div class="col-6 col-lg-3">
<!-- Card -->
<div class="card d-block">
<img class="card-img-top" src="../../assets/img/320x320/img4.jpg" alt="Image Description">
<div class="card-footer text-center py-4">
<h3 class="h5 mb-1">Casual</h3>
<span class="d-block text-muted font-size-1 mb-3">Can you casual it?</span>
<a class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover px-5" href="#">View All</a>
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Products Section -->
Products #3
New arrival
Sold out
<!-- Products -->
<div class="row mx-n2 mx-sm-n3">
<div class="col-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card text-center h-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img3.jpg" alt="Image Description">
<div class="position-absolute top-0 left-0 pt-3 pl-3">
<span class="badge badge-success badge-pill">New arrival</span>
</div>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Accessories</a>
<h3 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">Herschel backpack in dark blue</a>
</h3>
<div class="d-block font-size-1">
<span class="font-weight-medium">$56.99</span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning mr-2">
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
</div>
<span class="text-secondary">0</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="col-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card text-center h-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img12.jpg" alt="Image Description">
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Clothing</a>
<h4 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">Front hoodie</a>
</h4>
<div class="d-block">
<span class="font-weight-medium">$91.88</span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning 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="far fa-star text-muted"></small>
</div>
<span class="text-secondary">40</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="col-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card text-center h-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img4.jpg" alt="Image Description">
<div class="position-absolute top-0 left-0 pt-3 pl-3">
<span class="badge badge-danger badge-pill">Sold out</span>
</div>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Accessories</a>
<h4 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">Herschel backpack in gray</a>
</h4>
<div class="d-block font-size-1">
<span class="font-weight-medium">$29.99</span>
<span class="text-secondary ml-1"><del>$33.99</del></span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
</div>
<span class="text-secondary">125</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="col-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card text-center h-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img6.jpg" alt="Image Description">
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Clothing</a>
<h4 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">Front Originals adicolor t-shirt with trefoil logo</a>
</h4>
<div class="d-block">
<span class="font-weight-medium">$38.00</span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning 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">9</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
</div>
<!-- End Products -->
Products #4
New arrival
Sold out
New arrival
<div class="js-slick-carousel u-slick u-slick--gutters-3 u-slick--equal-height"
data-slides-show="4"
data-slides-scroll="3"
data-infinite="true"
data-pagi-classes="text-center u-slick__pagination mt-7 mb-0"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 720,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 480,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide">
<!-- Product -->
<div class="card text-center w-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img3.jpg" alt="Image Description">
<div class="position-absolute top-0 left-0 pt-3 pl-3">
<span class="badge badge-success badge-pill">New arrival</span>
</div>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Accessories</a>
<h3 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">Herschel backpack in dark blue</a>
</h3>
<div class="d-block font-size-1">
<span class="font-weight-medium">$56.99</span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning mr-2">
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
</div>
<span class="text-secondary">0</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="js-slide">
<!-- Product -->
<div class="card text-center w-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img12.jpg" alt="Image Description">
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Clothing</a>
<h4 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">Front hoodie</a>
</h4>
<div class="d-block">
<span class="font-weight-medium">$91.88</span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning 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="far fa-star text-muted"></small>
</div>
<span class="text-secondary">40</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="js-slide">
<!-- Product -->
<div class="card text-center w-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img4.jpg" alt="Image Description">
<div class="position-absolute top-0 left-0 pt-3 pl-3">
<span class="badge badge-danger badge-pill">Sold out</span>
</div>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Accessories</a>
<h4 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">Herschel backpack in gray</a>
</h4>
<div class="d-block font-size-1">
<span class="font-weight-medium">$29.99</span>
<span class="text-secondary ml-1"><del>$33.99</del></span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
</div>
<span class="text-secondary">125</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="js-slide">
<!-- Product -->
<div class="card text-center w-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img6.jpg" alt="Image Description">
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Clothing</a>
<h4 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">Front Originals adicolor t-shirt with trefoil logo</a>
</h4>
<div class="d-block">
<span class="font-weight-medium">$38.00</span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning 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">9</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="js-slide">
<!-- Product -->
<div class="card text-center w-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img7.jpg" alt="Image Description">
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Accessories</a>
<h4 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">Front mesh baseball cap with signature logo</a>
</h4>
<div class="d-block">
<span class="font-weight-medium">$8.88</span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning 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="far fa-star text-muted"></small>
</div>
<span class="text-secondary">31</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="js-slide">
<!-- Product -->
<div class="card text-center w-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img11.jpg" alt="Image Description">
<div class="position-absolute top-0 left-0 pt-3 pl-3">
<span class="badge badge-success badge-pill">New arrival</span>
</div>
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Clothing</a>
<h4 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">Front Originals adicolor t-shirt in gray</a>
</h4>
<div class="d-block">
<span class="font-weight-medium">$24.00</span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning mr-2">
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
</div>
<span class="text-secondary">0</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="js-slide">
<!-- Product -->
<div class="card text-center w-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img9.jpg" alt="Image Description">
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Clothing</a>
<h4 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">COLLUSION Unisex mechanic print t-shirt</a>
</h4>
<div class="d-block">
<span class="font-weight-medium">$43.99</span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning mr-2">
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
<small class="far fa-star text-muted"></small>
</div>
<span class="text-secondary">0</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="js-slide">
<!-- Product -->
<div class="card text-center w-100">
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/300x180/img8.jpg" alt="Image Description">
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-sm btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<span class="fas fa-heart btn-icon__inner"></span>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-secondary small font-weight-medium mb-1" href="#">Accessories</a>
<h4 class="font-size-1 font-weight-normal">
<a class="text-secondary" href="#">Billabong Walled snapback in green</a>
</h4>
<div class="d-block">
<span class="font-weight-medium">$12.00</span>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 pb-4 px-4">
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning 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">2</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-sm-wide btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
</div>
<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 Implementing Plugins -->
<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>
Products #5
<!-- Card -->
<div class="card-deck d-block d-md-flex">
<!-- Property Item -->
<div class="card mb-5">
<!-- Gallery -->
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img36.jpg"
data-fancybox="fancyboxGalleryExample2"
data-caption="Front in frames - image #01"
data-speed="700"
data-is-infinite="true">
<img class="card-img-top w-100" src="../../assets/img/480x320/img19.jpg" alt="Image Description">
<div class="position-absolute top-0 left-0 pt-2 pl-3">
<span class="badge badge-success">New</span>
</div>
<div class="position-absolute bottom-0 left-0 right-0 pb-2 px-3">
<div class="row justify-content-between align-items-center">
<div class="col-8">
<h2 class="h5 text-white mb-0">$689,000</h2>
</div>
<div class="col-4 text-right">
<span class="btn btn-icon btn-sm btn-white">
<span class="fas fa-images btn-icon__inner"></span>
</span>
</div>
</div>
</div>
</a>
<img class="js-fancybox d-none" alt="Image Description"
data-fancybox="fancyboxGalleryExample2"
data-src="../../assets/img/1920x1080/img37.jpg"
data-caption="Front in frames - image #02"
data-speed="700"
data-is-infinite="true">
<img class="js-fancybox d-none" alt="Image Description"
data-caption="Front in frames - image #03"
data-src="../../assets/img/1920x1080/img38.jpg"
data-fancybox="fancyboxGalleryExample2"
data-speed="700"
data-is-infinite="true">
<!-- End Gallery -->
<div class="card-body p-4">
<!-- Location -->
<div class="mb-3">
<a class="font-size-1" href="property-description.html">
<span class="fas fa-map-marker-alt mr-1"></span>
Borrett Close, London SE17
</a>
</div>
<!-- End Location -->
<!-- Icon Blocks -->
<ul class="list-inline font-size-1">
<li class="list-inline-item mr-3" title="1 bedroom">
<span class="fas fa-bed text-muted mr-1"></span>
1
</li>
<li class="list-inline-item mr-3" title="1 bathroom">
<span class="fas fa-bath text-muted mr-1"></span>
1
</li>
<li class="list-inline-item mr-3" title="1 living room">
<span class="fas fa-couch text-muted mr-1"></span>
1
</li>
<li class="list-inline-item mr-3" title="square feet">
<span class="fas fa-ruler-combined text-muted mr-1"></span>
1,428 sqft
</li>
</ul>
<!-- End Icon Blocks -->
<!-- Posted Info -->
<div class="media align-items-center border-top border-bottom py-3 mb-3">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description" title="Monica Fox">
</div>
<div class="media-body">
<small class="d-block text-muted">Listed on Jan 4, 2019 by</small>
<span class="d-block">Monica Fox</span>
</div>
</div>
<!-- End Posted Info -->
<!-- Contacts -->
<div class="d-flex align-items-center font-size-1">
<a class="text-secondary" href="javascript:;">
<span class="fas fa-star mr-1"></span>
Save
</a>
<a class="btn btn-sm btn-soft-primary transition-3d-hover ml-auto" href="property-description.html">
Details
<span class="fas fa-angle-right ml-1"></span>
</a>
</div>
<!-- End Contacts -->
</div>
</div>
<!-- End Property Item -->
<!-- Property Item -->
<div class="card mb-5">
<!-- Gallery -->
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img42.jpg"
data-fancybox="fancyboxGalleryExample3"
data-caption="Front in frames - image #01"
data-speed="700"
data-is-infinite="true">
<img class="card-img-top w-100" src="../../assets/img/480x320/img20.jpg" alt="Image Description">
<div class="position-absolute bottom-0 left-0 right-0 pb-2 px-3">
<div class="row justify-content-between align-items-center">
<div class="col-8">
<h3 class="h5 text-white mb-0">$725,000 - $755,000</h3>
</div>
<div class="col-4 text-right">
<span class="btn btn-icon btn-sm btn-white">
<span class="fas fa-images btn-icon__inner"></span>
</span>
</div>
</div>
</div>
</a>
<img class="js-fancybox d-none" alt="Image Description"
data-fancybox="fancyboxGalleryExample3"
data-src="../../assets/img/1920x1080/img39.jpg"
data-caption="Front in frames - image #02"
data-speed="700"
data-is-infinite="true">
<img class="js-fancybox d-none" alt="Image Description"
data-caption="Front in frames - image #03"
data-src="../../assets/img/1920x1080/img35.jpg"
data-fancybox="fancyboxGalleryExample3"
data-speed="700"
data-is-infinite="true">
<!-- End Gallery -->
<div class="card-body p-4">
<!-- Location -->
<div class="mb-3">
<a class="font-size-1" href="property-description.html">
<span class="fas fa-map-marker-alt mr-1"></span>
Alderney House, Enfield EN3
</a>
</div>
<!-- End Location -->
<!-- Icon Blocks -->
<ul class="list-inline font-size-1">
<li class="list-inline-item mr-3" title="1 bedroom">
<span class="fas fa-bed text-muted mr-1"></span>
2
</li>
<li class="list-inline-item mr-3" title="1 bathroom">
<span class="fas fa-bath text-muted mr-1"></span>
1
</li>
<li class="list-inline-item mr-3" title="1 living room">
<span class="fas fa-couch text-muted mr-1"></span>
1+
</li>
<li class="list-inline-item mr-3" title="square feet">
<span class="fas fa-ruler-combined text-muted mr-1"></span>
1,791 sqft
</li>
</ul>
<!-- End Icon Blocks -->
<!-- Posted Info -->
<div class="media align-items-center border-top border-bottom py-3 mb-3">
<span class="btn btn-icon btn-soft-success rounded-circle mr-3">
<span class="btn-icon__inner">EP</span>
</span>
<div class="media-body">
<small class="d-block text-muted">Listed on Jan 4, 2019 by</small>
<span class="d-block">Equity Property</span>
</div>
</div>
<!-- End Posted Info -->
<!-- Contacts -->
<div class="d-flex align-items-center font-size-1">
<a class="text-secondary" href="javascript:;">
<span class="fas fa-star mr-1"></span>
Save
</a>
<a class="btn btn-sm btn-soft-primary transition-3d-hover ml-auto" href="property-description.html">
Details
<span class="fas fa-angle-right ml-1"></span>
</a>
</div>
<!-- End Contacts -->
</div>
</div>
<!-- End Property Item -->
</div>
<!-- End Card -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>
Products #6
$109.99
Nakto 26 Bicycle
NAKTO bicycles to save the environment and bring fun to our friends!
<!-- Promo Section -->
<div class="container">
<div class="row">
<div class="col-lg-6 mb-5 mb-lg-0">
<!-- Promo -->
<div class="bg-img-hero rounded min-height-450 p-4 p-sm-8" style="background-image: url(../../assets/img/900x900/img3.jpg);">
<small class="d-block text-danger text-uppercase font-weight-semi-bold">Limited time only</small>
<h2 class="display-4 font-weight-semi-bold mb-3">70% OFF</h2>
<!-- Countdown -->
<div class="w-sm-60">
<div class="js-countdown row mx-gutters-2 mb-3"
data-end-date="2020/11/30"
data-month-format="%m"
data-days-format="%D"
data-hours-format="%H"
data-minutes-format="%M">
<div class="col-4 text-center">
<div class="border border-dark rounded p-2 mb-1">
<strong class="js-cd-days d-block font-size-2"></strong>
</div>
<h5 class="h6 font-weight-normal">Days</h5>
</div>
<div class="col-4 text-center">
<div class="border border-dark rounded p-2 mb-1">
<strong class="js-cd-hours d-block font-size-2"></strong>
</div>
<h5 class="h6 font-weight-normal">Hours</h5>
</div>
<div class="col-4 text-center">
<div class="border border-dark rounded p-2 mb-1">
<strong class="js-cd-minutes d-block font-size-2"></strong>
</div>
<h5 class="h6 font-weight-normal">Mins</h5>
</div>
</div>
</div>
<!-- End Countdown -->
<a class="btn btn-sm btn-white btn-pill transition-3d-hover px-5" href="#">Shop</a>
</div>
<!-- End Promo -->
</div>
<div class="col-lg-6">
<!-- Promo -->
<div class="bg-img-hero rounded min-height-450 text-white p-4 p-sm-8" style="background-image: url(../../assets/img/900x900/img4.jpg);">
<div class="max-width-35">
<div class="mb-4">
<span class="d-block font-size-2">$109.99</span>
<h3 class="font-weight-semi-bold mb-1">Nakto 26 Bicycle</h3>
<p class="text-white">NAKTO bicycles to save the environment and bring fun to our friends!</p>
</div>
<div class="d-block">
<button type="button" class="btn btn-sm btn-white btn-pill transition-3d-hover px-5">Shop</button>
</div>
</div>
</div>
<!-- End Promo -->
</div>
</div>
</div>
<!-- End Promo Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery.countdown.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.countdown.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of countdowns
var countdowns = $.HSCore.components.HSCountdown.init('.js-countdown', {
yearsElSelector: '.js-cd-years',
daysElSelector: '.js-cd-days',
hoursElSelector: '.js-cd-hours',
minutesElSelector: '.js-cd-minutes',
secondsElSelector: '.js-cd-seconds'
});
});
</script>
Products #7
<div class="container">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick u-slick-zoom u-slick--gutters-3"
data-slides-show="3"
data-pagi-classes="text-center u-slick__pagination mt-7 mb-0"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide card border-0 shadow-sm mb-3">
<!-- House Items -->
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/500x550/img14.jpg" alt="Image Description">
<header class="position-absolute top-0 right-0 left-0 p-5">
<a class="media align-items-center text-white" href="#">
<div class="u-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<span>Maria Muszynska</span>
</div>
</a>
</header>
<div class="position-absolute right-0 bottom-0 left-0 p-5">
<span class="h4 text-white">$455,000</span>
</div>
</div>
<div class="card-body p-5">
<h4 class="h6">
<a href="#">Abbots Way, North Shields</a>
</h4>
<span class="fas fa-map-marker-alt text-danger mr-2"></span>
<a class="text-secondary" href="#">London, England</a>
</div>
<!-- End House Items -->
</div>
<div class="js-slide card border-0 shadow-sm mb-3">
<!-- House Items -->
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/500x550/img15.jpg" alt="Image Description">
<header class="position-absolute top-0 right-0 left-0 p-5">
<a class="media align-items-center text-white" href="#">
<div class="u-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<span>Casy Williams</span>
</div>
</a>
</header>
<div class="position-absolute right-0 bottom-0 left-0 p-5">
<span class="h4 text-white">$750,000</span>
</div>
</div>
<div class="card-body p-5">
<h4 class="h6">
<a href="#">Secluded Intown Treehouse</a>
</h4>
<span class="fas fa-map-marker-alt text-danger mr-2"></span>
<a class="text-secondary" href="#">New York, US</a>
</div>
<!-- End House Items -->
</div>
<div class="js-slide card border-0 shadow-sm mb-3">
<!-- House Items -->
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/500x550/img16.jpg" alt="Image Description">
<header class="position-absolute top-0 right-0 left-0 p-5">
<a class="media align-items-center text-white" href="#">
<div class="u-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<span>Chris Johnson</span>
</div>
</a>
</header>
<div class="position-absolute right-0 bottom-0 left-0 p-5">
<span class="h4 text-white">$173,000</span>
</div>
</div>
<div class="card-body p-5">
<h4 class="h6">
<a href="#">Malibu Dream Airstream</a>
</h4>
<span class="fas fa-map-marker-alt text-danger mr-2"></span>
<a class="text-secondary" href="#">Manhattan, US</a>
</div>
<!-- End House Items -->
</div>
<div class="js-slide card border-0 shadow-sm mb-3">
<!-- House Items -->
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/500x550/img17.jpg" alt="Image Description">
<header class="position-absolute top-0 right-0 left-0 p-5">
<a class="media align-items-center text-white" href="#">
<div class="u-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</div>
<div class="media-body">
<span>Elon Fisher</span>
</div>
</a>
</header>
<div class="position-absolute right-0 bottom-0 left-0 p-5">
<span class="h4 text-white">$199,000</span>
</div>
</div>
<div class="card-body p-5">
<h4 class="h6">
<a href="#">Tintern Crescent</a>
</h4>
<span class="fas fa-map-marker-alt text-danger mr-2"></span>
<a class="text-secondary" href="#">Toronto, Canada</a>
</div>
<!-- End House Items -->
</div>
<div class="js-slide card border-0 shadow-sm mb-3">
<!-- House Items -->
<div class="position-relative">
<img class="card-img-top" src="../../assets/img/500x550/img18.jpg" alt="Image Description">
<header class="position-absolute top-0 right-0 left-0 p-5">
<a class="media align-items-center text-white" href="#">
<div class="u-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<span>Maria Muszynska</span>
</div>
</a>
</header>
<div class="position-absolute right-0 bottom-0 left-0 p-5">
<span class="h4 text-white">$376,000</span>
</div>
</div>
<div class="card-body p-5">
<h4 class="h6">
<a href="#">Tiverton Avenue</a>
</h4>
<span class="fas fa-map-marker-alt text-danger mr-2"></span>
<a class="text-secondary" href="#">Beijing, China</a>
</div>
<!-- End House Items -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
<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 Implementing Plugins -->
<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>