E-commerce
Component #1
The better way to shop with Front top-products
Limited time only, while stocks last.
<!-- Categories Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-40 text-center mx-md-auto mb-5 mb-md-9">
<h2>The better way to shop with Front top-products</h2>
</div>
<!-- End Title -->
<div class="row mb-2">
<div class="col-md-4 mb-3">
<!-- Card -->
<div class="card card-bordered shadow-none 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/img8.jpg" alt="Image Description">
</div>
<img class="img-fluid" src="../assets/img/380x360/img7.jpg" alt="Image Description">
</div>
</div>
<div class="card-footer text-center py-4">
<h3 class="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</a>
</div>
</div>
<!-- End Card -->
</div>
<div class="col-md-4 mb-3">
<!-- Card -->
<div class="card card-bordered shadow-none 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/img6.jpg" alt="Image Description">
</div>
<img class="img-fluid" src="../assets/img/380x360/img5.jpg" alt="Image Description">
</div>
</div>
<div class="card-footer text-center py-4">
<h3 class="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</a>
</div>
</div>
<!-- End Card -->
</div>
<div class="col-md-4 mb-3">
<!-- Card -->
<div class="card card-bordered shadow-none 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/img2.jpg" alt="Image Description">
</div>
<div class="w-35">
<div class="border-bottom">
<img class="img-fluid" src="../assets/img/380x360/img4.jpg" alt="Image Description">
</div>
<img class="img-fluid" src="../assets/img/380x360/img3.jpg" alt="Image Description">
</div>
</div>
<div class="card-footer text-center py-4">
<h3 class="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</a>
</div>
</div>
<!-- End Card -->
</div>
</div>
<div class="text-center">
<p class="small">Limited time only, while stocks last.</p>
</div>
</div>
<!-- End Categories Section -->
Component #2
What's trending
<!-- Products Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-40 text-center mx-md-auto mb-5 mb-md-9">
<h2>What's trending</h2>
</div>
<!-- End Title -->
<!-- Products -->
<div class="row mx-n2 mx-sm-n3 mb-3">
<div class="col-sm-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card card-bordered shadow-none 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-xs btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-body small font-weight-bold mb-1" href="#">Accessories</a>
<span class="d-block font-size-1">
<a class="text-inherit" href="#">Herschel backpack in dark blue</a>
</span>
<div class="d-block">
<span class="text-dark font-weight-bold">$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">
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
</div>
<span>0</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="col-sm-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card card-bordered shadow-none text-center h-100">
<div class="position-relative">
<img class="card-img-top" src="../assets/img/300x180/img1.jpg" alt="Image Description">
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-xs btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-body small font-weight-bold mb-1" href="#">Clothing</a>
<span class="d-block font-size-1">
<a class="text-inherit" href="#">Front hoodie</a>
</span>
<div class="d-block">
<span class="text-dark font-weight-bold">$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">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star text-muted"></i>
</div>
<span>40</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="col-sm-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card card-bordered shadow-none 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-xs btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-body small font-weight-bold mb-1" href="#">Accessories</a>
<span class="d-block font-size-1">
<a class="text-inherit" href="#">Herschel backpack in gray</a>
</span>
<div class="d-block">
<span class="text-dark font-weight-bold">$29.99</span>
<span class="text-body 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">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
</div>
<span>125</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="col-sm-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card card-bordered shadow-none 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-xs btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-body small font-weight-bold mb-1" href="#">Clothing</a>
<span class="d-block font-size-1">
<a class="text-inherit" href="#">Front Originals adicolor t-shirt with trefoil logo</a>
</span>
<div class="d-block">
<span class="text-dark font-weight-bold">$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">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<span>9</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="col-sm-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card card-bordered shadow-none text-center h-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-xs btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-body small font-weight-bold mb-1" href="#">Accessories</a>
<span class="d-block font-size-1">
<a class="text-inherit" href="#">Front mesh baseball cap with signature logo</a>
</span>
<div class="d-block">
<span class="text-dark font-weight-bold">$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">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star text-muted"></i>
</div>
<span>31</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="col-sm-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card card-bordered shadow-none text-center h-100">
<div class="position-relative">
<img class="card-img-top" src="../assets/img/300x180/img2.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-xs btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-body small font-weight-bold mb-1" href="#">Clothing</a>
<span class="d-block font-size-1">
<a class="text-inherit" href="#">Front Originals adicolor t-shirt in gray</a>
</span>
<div class="d-block">
<span class="text-dark font-weight-bold">$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">
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
</div>
<span>0</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="col-sm-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card card-bordered shadow-none text-center h-100">
<div class="position-relative">
<img class="card-img-top" src="../assets/img/300x180/img5.jpg" alt="Image Description">
<div class="position-absolute top-0 right-0 pt-3 pr-3">
<button type="button" class="btn btn-xs btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-body small font-weight-bold mb-1" href="#">Clothing</a>
<span class="d-block font-size-1">
<a class="text-inherit" href="#">COLLUSION Unisex mechanic print t-shirt</a>
</span>
<div class="d-block">
<span class="text-dark font-weight-bold">$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">
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
</div>
<span>0</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
<div class="col-sm-6 col-lg-3 px-2 px-sm-3 mb-3 mb-sm-5">
<!-- Product -->
<div class="card card-bordered shadow-none text-center h-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-xs btn-icon btn-outline-secondary rounded-circle" data-toggle="tooltip" data-placement="top" title="Save for later">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
<div class="card-body pt-4 px-4 pb-0">
<div class="mb-2">
<a class="d-inline-block text-body small font-weight-bold mb-1" href="#">Accessories</a>
<span class="d-block font-size-1">
<a class="text-inherit" href="#">Billabong Walled snapback in green</a>
</span>
<div class="d-block">
<span class="text-dark font-weight-bold">$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">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<span>2</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover">Add to Cart</button>
</div>
</div>
<!-- End Product -->
</div>
</div>
<!-- End Products -->
<div class="text-center">
<a class="btn btn-primary btn-pill transition-3d-hover px-5" href="#">View Products</a>
</div>
</div>
<!-- End Products Section -->
Component #3
What's trending
<!-- Products Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-40 text-center mx-md-auto mb-5 mb-md-9">
<h2>What's trending</h2>
</div>
<!-- End Title -->
<div class="row">
<div class="col-sm-6 col-lg-3 mb-3 mb-sm-5">
<!-- Card -->
<div class="card card-bordered shadow-none 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="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-sm-6 col-lg-3 mb-3 mb-sm-5">
<!-- Card -->
<div class="card card-bordered shadow-none 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="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-sm-6 col-lg-3 mb-3 mb-sm-5">
<!-- Card -->
<div class="card card-bordered shadow-none 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="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-sm-6 col-lg-3 mb-3 mb-sm-5">
<!-- Card -->
<div class="card card-bordered shadow-none 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="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 -->
Component #4
<!-- Products List Section -->
<div class="container">
<ul class="list-unstyled">
<!-- Products -->
<li class="card card-bordered shadow-none mb-3 mb-md-5">
<div class="row no-gutters">
<div class="col-md-4">
<img class="card-img" src="../assets/img/320x320/img8.jpg" alt="Image Description">
</div>
<div class="col-md-8">
<div class="card-body">
<div class="mb-2">
<a class="d-inline-block text-body small font-weight-bold mb-1" href="#">Accessories</a>
<span class="d-block font-size-1">
<a class="text-inherit" href="#">Herschel backpack in dark blue</a>
<span class="badge badge-success badge-pill ml-1">New arrival</span>
</span>
<div class="d-block">
<span class="h5">$56.99</span>
</div>
</div>
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning mr-2">
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
</div>
<span>0</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover mr-1">Add to Cart</button>
<button type="button" class="btn btn-sm btn-soft-secondary btn-pill transition-3d-hover">
<i class="far fa-heart mr-1"></i> Wishlist
</button>
</div>
</div>
</div>
</li>
<!-- End Products -->
<!-- Products -->
<li class="card card-bordered shadow-none mb-3 mb-md-5">
<div class="row no-gutters">
<div class="col-md-4">
<img class="card-img" src="../assets/img/320x320/img4.jpg" alt="Image Description">
</div>
<div class="col-md-8">
<div class="card-body">
<div class="mb-2">
<a class="d-inline-block text-body small font-weight-bold mb-1" href="#">Clothing</a>
<span class="d-block font-size-1">
<a class="text-inherit" href="#">Front hoodie</a>
<span class="badge badge-danger badge-pill ml-1">Sold out</span>
</span>
<div class="d-block">
<span class="h5">$91.88</span>
</div>
</div>
<div class="mb-3">
<a class="d-inline-flex align-items-center small" href="#">
<div class="text-warning mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star text-muted"></i>
</div>
<span>40</span>
</a>
</div>
<button type="button" class="btn btn-sm btn-outline-primary btn-pill transition-3d-hover mr-1">Add to Cart</button>
<button type="button" class="btn btn-sm btn-soft-secondary btn-pill transition-3d-hover">
<i class="far fa-heart mr-1"></i> Wishlist
</button>
</div>
</div>
</div>
</li>
<!-- End Products -->
</ul>
</div>
<!-- End Products List Section -->
Component #5
Your cart is currently empty
Before proceed to checkout you must add some products to your shopping cart. You will find a lot of interesting products on our "Shop" page.
<!-- Cart Section -->
<div class="container space-2">
<div class="w-md-80 w-lg-50 text-center mx-md-auto">
<figure class="max-w-10rem max-w-sm-15rem mx-auto mb-3">
<img class="img-fluid" src="../assets/svg/illustrations/empty-cart.svg" alt="SVG">
</figure>
<div class="mb-5">
<h1 class="h2">Your cart is currently empty</h1>
<p>Before proceed to checkout you must add some products to your shopping cart. You will find a lot of interesting products on our "Shop" page.</p>
</div>
<a class="btn btn-primary btn-pill transition-3d-hover px-5" href="#">Start Shopping</a>
</div>
</div>
<!-- End Cart Section -->
Component #6
Your order is completed!
Thank you for your order! Your order is being processed and will be completed within 3-6 hours. You will receive an email confirmation when your order is completed.
<!-- Cart Section -->
<div class="container space-2">
<div class="w-md-80 w-lg-50 text-center mx-md-auto">
<i class="fas fa-check-circle text-success fa-5x mb-3"></i>
<div class="mb-5">
<h1 class="h2">Your order is completed!</h1>
<p>Thank you for your order! Your order is being processed and will be completed within 3-6 hours. You will receive an email confirmation when your order is completed.</p>
</div>
<a class="btn btn-primary btn-pill transition-3d-hover px-5" href="#">Continue Shopping</a>
</div>
</div>
<!-- End Cart Section -->
Component #7
New Era 9Forty LA Dodgers adjustable cap in black
American label New Era manufacturing baseball hats for teams since the 1930s.
Total price:
$159.99We offer free shipping anywhere in the U.S. A skilled delivery team will bring the boxes into your office.
If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.
<!-- Hero Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-7 mb-7 mb-lg-0">
<div class="pr-lg-4">
<div class="position-relative">
<!-- Main Slider -->
<div id="heroSlider" class="js-slick-carousel slick border rounded-lg"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-primary-white slick-arrow-left slick-arrow-centered-y shadow-soft rounded-circle ml-n3 ml-sm-2 ml-xl-4\"></span>",
"nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-primary-white slick-arrow-right slick-arrow-centered-y shadow-soft rounded-circle mr-n3 mr-sm-2 mr-xl-4\"></span>",
"fade": true,
"infinite": true,
"autoplay": true,
"autoplaySpeed": 7000,
"asNavFor": "#heroSliderNav"
}'>
<div class="js-slide">
<img class="img-fluid w-100 rounded-lg" src="../assets/img/600x600/img1.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid w-100 rounded-lg" src="../assets/img/600x600/img2.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid w-100 rounded-lg" src="../assets/img/600x600/img3.jpg" alt="Image Description">
</div>
</div>
<!-- End Main Slider -->
<!-- Slider Nav -->
<div class="position-absolute bottom-0 right-0 left-0 px-4 py-3">
<div id="heroSliderNav" class="js-slick-carousel slick slick-gutters-1 slick-transform-off max-w-27rem mx-auto"
data-hs-slick-carousel-options='{
"infinite": true,
"autoplaySpeed": 7000,
"slidesToShow": 3,
"isThumbs": true,
"isThumbsProgress": true,
"thumbsProgressOptions": {
"color": "#377dff",
"width": 8
},
"thumbsProgressContainer": ".js-slick-thumb-progress",
"asNavFor": "#heroSlider"
}'>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress d-block avatar avatar-circle border p-1" href="javascript:;">
<img class="avatar-img" src="../assets/img/100x100/img16.jpg" alt="Image Description">
</a>
</div>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress d-block avatar avatar-circle border p-1" href="javascript:;">
<img class="avatar-img" src="../assets/img/100x100/img17.jpg" alt="Image Description">
</a>
</div>
<div class="js-slide p-1">
<a class="js-slick-thumb-progress d-block avatar avatar-circle border p-1" href="javascript:;">
<img class="avatar-img" src="../assets/img/100x100/img18.jpg" alt="Image Description">
</a>
</div>
</div>
</div>
<!-- End Slider Nav -->
</div>
</div>
</div>
<!-- Product Description -->
<div class="col-lg-5">
<!-- Rating -->
<div class="d-flex align-items-center small mb-2">
<div class="text-warning mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<a class="link-underline" href="#reviewSection">Read all 287 reviews</a>
</div>
<!-- End Rating -->
<!-- Title -->
<div class="mb-5">
<h1 class="h2">New Era 9Forty LA Dodgers adjustable cap in black</h1>
<p>American label New Era manufacturing baseball hats for teams since the 1930s.</p>
</div>
<!-- End Title -->
<!-- Price -->
<div class="mb-5">
<h2 class="font-size-1 text-body mb-0">Total price:</h2>
<span class="text-dark font-size-2 font-weight-bold">$159.99</span>
<span class="text-body ml-2"><del>$179.99</del></span>
</div>
<!-- End Price -->
<!-- Quantity -->
<div class="border rounded-lg py-2 px-3 mb-3">
<div class="js-quantity-counter row align-items-center">
<div class="col-7">
<small class="d-block text-body font-weight-bold">Select quantity</small>
<input class="js-result form-control h-auto border-0 rounded-lg p-0" type="text" value="1">
</div>
<div class="col-5 text-right">
<a class="js-minus btn btn-xs btn-icon btn-outline-secondary rounded-circle" href="javascript:;">
<i class="fas fa-minus"></i>
</a>
<a class="js-plus btn btn-xs btn-icon btn-outline-secondary rounded-circle" href="javascript:;">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
</div>
<!-- End Quantity -->
<!-- Accordion -->
<div id="shopCartAccordionExample2" class="accordion mb-5">
<!-- Card -->
<div class="card card-bordered shadow-none">
<div class="card-body card-collapse" id="shopCardHeadingOne">
<a class="btn btn-link btn-block card-btn collapsed" href="javascript:;" role="button"
data-toggle="collapse"
data-target="#shopCardOne"
aria-expanded="false"
aria-controls="shopCardOne">
<span class="row align-items-center">
<span class="col-9">
<span class="media align-items-center">
<span class="w-100 max-w-6rem mr-3">
<img class="img-fluid" src="../assets/svg/icons/icon-65.svg" alt="SVG">
</span>
<span class="media-body">
<span class="d-block font-size-1 font-weight-bold">Free shipping</span>
</span>
</span>
</span>
<span class="col-3 text-right">
<span class="card-btn-toggle">
<span class="card-btn-toggle-default">+</span>
<span class="card-btn-toggle-active">−</span>
</span>
</span>
</span>
</a>
</div>
<div id="shopCardOne" class="collapse" aria-labelledby="shopCardHeadingOne" data-parent="#shopCartAccordionExample2">
<div class="card-body">
<p class="small mb-0">We offer free shipping anywhere in the U.S. A skilled delivery team will bring the boxes into your office.</p>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card card-bordered shadow-none">
<div class="card-body card-collapse" id="shopCardHeadingTwo">
<a class="btn btn-link btn-block card-btn collapsed" href="javascript:;" role="button"
data-toggle="collapse"
data-target="#shopCardTwo"
aria-expanded="false"
aria-controls="shopCardTwo">
<span class="row align-items-center">
<span class="col-9">
<span class="media align-items-center">
<span class="w-100 max-w-6rem mr-3">
<img class="img-fluid" src="../assets/svg/icons/icon-64.svg" alt="SVG">
</span>
<span class="media-body">
<span class="d-block font-size-1 font-weight-bold">30 Days return</span>
</span>
</span>
</span>
<span class="col-3 text-right">
<span class="card-btn-toggle">
<span class="card-btn-toggle-default">+</span>
<span class="card-btn-toggle-active">−</span>
</span>
</span>
</span>
</a>
</div>
<div id="shopCardTwo" class="collapse" aria-labelledby="shopCardHeadingTwo" data-parent="#shopCartAccordionExample2">
<div class="card-body">
<p class="small mb-0">If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.</p>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Accordion -->
<div class="mb-4">
<button type="button" class="btn btn-block btn-primary btn-pill transition-3d-hover">Add to Cart</button>
</div>
<!-- Help Link -->
<div class="media align-items-center">
<span class="w-100 max-w-6rem mr-2">
<img class="img-fluid" src="../assets/svg/icons/icon-4.svg" alt="SVG">
</span>
<div class="media-body text-body small">
<span class="font-weight-bold mr-1">Need Help?</span>
<a class="link-underline" href="#">Chat now</a>
</div>
</div>
<!-- End Help Link -->
</div>
<!-- End Product Description -->
</div>
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="./assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="./assets/vendor/hs-quantity-counter/dist/hs-quantity-counter.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF SLICK CAROUSEL
// =======================================================
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
// INITIALIZATION OF QUANTITY COUNTER
// =======================================================
$('.js-quantity-counter').each(function () {
var quantityCounter = new HSQuantityCounter($(this)).init();
});
});
</script>
Component #8
Shopping cart
2 items
<!-- Cart Section -->
<div class="container space-2">
<!-- Title -->
<div class="d-flex justify-content-between align-items-end border-bottom pb-3 mb-7">
<h1 class="h3 mb-0">Shopping cart</h1>
<span>2 items</span>
</div>
<!-- End Title -->
<form>
<!-- Product Content -->
<div class="border-bottom pb-5 mb-5">
<div class="media">
<div class="max-w-15rem w-100 mr-3">
<img class="img-fluid" src="../assets/img/320x320/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<div class="row">
<div class="col-md-7 mb-3 mb-md-0">
<a class="h5 d-block" href="#">Originals national backpack</a>
<div class="d-block d-md-none">
<span class="h5 d-block mb-1">$29.99</span>
</div>
<div class="text-body font-size-1 mb-1">
<span>Gender:</span>
<span>Men</span>
</div>
<div class="text-body font-size-1 mb-1">
<span>Color:</span>
<span>Grey</span>
</div>
<div class="text-body font-size-1 mb-1">
<span>Size:</span>
<span>One size</span>
<a class="link-underline ml-2" href="javascript:;">Edit</a>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-auto">
<select class="custom-select custom-select-sm w-auto mb-3">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
<option value="quantity6">6</option>
<option value="quantity7">7</option>
<option value="quantity8">8</option>
<option value="quantity9">9</option>
<option value="quantity10">10</option>
</select>
</div>
<div class="col-auto">
<a class="d-block text-body font-size-1 mb-1" href="javascript:;">
<i class="far fa-trash-alt text-hover-primary mr-1"></i>
<span class="font-size-1 text-hover-primary">Remove</span>
</a>
<a class="d-block text-body font-size-1" href="javascript:;">
<i class="far fa-heart text-hover-primary mr-1"></i>
<span class="font-size-1 text-hover-primary">Save for later</span>
</a>
</div>
</div>
</div>
<div class="col-4 col-md-2 d-none d-md-inline-block text-right">
<span class="h5 d-block mb-1">$29.99</span>
</div>
</div>
</div>
</div>
</div>
<!-- End Product Content -->
<!-- Product Content -->
<div class="media mb-5 mb-md-10">
<div class="max-w-15rem w-100 mr-3">
<img class="img-fluid" src="../assets/img/320x320/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<div class="row">
<div class="col-md-7 mb-3 mb-md-0">
<a class="h5 d-block" href="#">Vans large image t-shirt</a>
<div class="d-block d-md-none">
<span class="h5 d-block mb-1">$29.99</span>
</div>
<div class="text-body font-size-1 mb-1">
<span>Gender:</span>
<span>Women</span>
</div>
<div class="text-body font-size-1 mb-1">
<span>Color:</span>
<span>Core Black / Carbon</span>
</div>
<div class="text-body font-size-1 mb-1">
<span>Size:</span>
<span>SM</span>
<a class="link-underline ml-2" href="javascript:;">Edit</a>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-auto">
<select class="custom-select custom-select-sm w-auto mb-3">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
<option value="quantity6">6</option>
<option value="quantity7">7</option>
<option value="quantity8">8</option>
<option value="quantity9">9</option>
<option value="quantity10">10</option>
</select>
</div>
<div class="col-auto">
<a class="d-block text-body font-size-1 mb-1" href="javascript:;">
<i class="far fa-trash-alt text-hover-primary mr-1"></i>
<span class="font-size-1 text-hover-primary">Remove</span>
</a>
<a class="d-block text-body font-size-1" href="javascript:;">
<i class="far fa-heart text-hover-primary mr-1"></i>
<span class="font-size-1 text-hover-primary">Save for later</span>
</a>
</div>
</div>
</div>
<div class="col-4 col-md-2 d-none d-md-inline-block text-right">
<span class="h5 d-block mb-1">$43.99</span>
</div>
</div>
</div>
</div>
<!-- End Product Content -->
<div class="d-sm-flex justify-content-end">
<a class="font-weight-bold" href="#">
<i class="fas fa-angle-left fa-xs mr-1"></i>
Continue shopping
</a>
</div>
</form>
</div>
<!-- End Cart Section -->
Component #9
<!-- Cart Section -->
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="pl-lg-4">
<!-- Order Summary -->
<div class="card shadow-soft p-4 mb-4">
<!-- Title -->
<div class="border-bottom pb-4 mb-4">
<h2 class="h3 mb-0">Order summary</h2>
</div>
<!-- End Title -->
<div class="border-bottom pb-4 mb-4">
<div class="media align-items-center mb-3">
<span class="d-block font-size-1 mr-3">Item subtotal (2)</span>
<div class="media-body text-right">
<span class="text-dark font-weight-bold">$73.98</span>
</div>
</div>
<div class="media align-items-center mb-3">
<span class="d-block font-size-1 mr-3">Delivery</span>
<div class="media-body text-right">
<span class="text-dark font-weight-bold">Free</span>
</div>
</div>
<!-- Checkbox -->
<div class="card shadow-none mb-3">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio1" name="deliveryRadio" checked>
<label class="custom-control-label ml-1" for="deliveryRadio1">
<span class="d-block font-size-1 font-weight-bold mb-1">Free - Standard delivery</span>
<span class="d-block text-muted">Shipment may take 5-6 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="card shadow-none">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio2Example1" name="deliveryRadio">
<label class="custom-control-label ml-1" for="deliveryRadio2Example1">
<span class="d-block font-size-1 font-weight-bold mb-1">$7.99 - Express delivery</span>
<span class="d-block text-muted">Shipment may take 2-3 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
</div>
<div class="media align-items-center mb-3">
<span class="d-block font-size-1 mr-3">Estimated tax</span>
<div class="media-body text-right">
<span class="text-dark font-weight-bold">--</span>
</div>
</div>
<div class="media align-items-center mb-3">
<span class="d-block font-size-1 mr-3">Total</span>
<div class="media-body text-right">
<span class="text-dark font-weight-bold">$73.98</span>
</div>
</div>
<div class="row mx-1">
<div class="col px-1 my-1">
<a class="btn btn-primary btn-block btn-pill transition-3d-hover" href="#">Checkout</a>
</div>
<div class="col px-1 my-1">
<button type="submit" class="btn btn-soft-warning btn-block btn-pill transition-3d-hover">
<img src="../assets/img/logos/paypal.png" width="70" alt="PayPal logo">
</button>
</div>
</div>
</div>
<!-- End Order Summary -->
<!-- Accordion -->
<div id="shopCartAccordionExample1" class="accordion card shadow-soft mb-4">
<!-- Card -->
<div class="card">
<div class="card-header card-collapse" id="shopCartHeadingOneExample2">
<h3 class="mb-0">
<a class="btn btn-link btn-block card-btn font-weight-bold collapsed" href="javascript:;" role="button"
data-toggle="collapse"
data-target="#shopCartOneExample2"
aria-expanded="false"
aria-controls="shopCartOneExample2">
Promo code?
<i class="far fa-question-circle text-body ml-1" data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" title="Promo code" data-content="Valid on full priced items only. Some products maybe excluded."></i>
</a>
</h3>
</div>
<div id="shopCartOneExample2" class="collapse" aria-labelledby="shopCartHeadingOneExample2" data-parent="#shopCartAccordionExample1">
<form class="js-validate p-4">
<div class="input-group input-group-pill mb-3">
<input type="text" class="form-control" name="name" placeholder="Promo code" aria-label="Promo code">
<div class="input-group-append">
<button type="submit" class="btn btn-block btn-primary btn-pill">Apply</button>
</div>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Accordion -->
<!-- Help Link -->
<div class="media align-items-center">
<figure class="w-100 max-w-6rem mr-2">
<img class="img-fluid" src="../assets/svg/icons/icon-4.svg" alt="SVG">
</figure>
<div class="media-body text-body small">
<span class="font-weight-bold mr-1">Need Help?</span>
<a class="link-underline" href="#">Chat now</a>
</div>
</div>
<!-- End Help Link -->
</div>
</div>
</div>
</div>
<!-- End Cart Section -->
Component #10
Order summary
Originals national backpack
Vans large image t-shirt
<!-- Checkout Section -->
<div class="container">
<div class="row">
<div class="col-lg-4 order-lg-2 mb-7 mb-lg-0">
<div class="pl-lg-4">
<!-- Order Summary -->
<div class="card shadow-soft p-4 mb-4">
<!-- Title -->
<div class="border-bottom pb-4 mb-4">
<h2 class="h3 mb-0">Order summary</h2>
</div>
<!-- End Title -->
<!-- Product Content -->
<div class="border-bottom pb-4 mb-4">
<div class="media">
<div class="avatar avatar-lg mr-3">
<img class="avatar-img" src="../assets/img/320x320/img2.jpg" alt="Image Description">
<sup class="avatar-status avatar-primary">1</sup>
</div>
<div class="media-body">
<h2 class="h6">Originals national backpack</h2>
<div class="text-body font-size-1">
<span>Gender:</span>
<span>Men</span>
</div>
<div class="text-body font-size-1">
<span>Color:</span>
<span>Grey</span>
</div>
<div class="text-body font-size-1">
<span>Size:</span>
<span>One size</span>
</div>
</div>
</div>
</div>
<!-- End Product Content -->
<!-- Product Content -->
<div class="border-bottom pb-4 mb-4">
<div class="media">
<div class="avatar avatar-lg mr-3">
<img class="avatar-img" src="../assets/img/320x320/img3.jpg" alt="Image Description">
<sup class="avatar-status avatar-primary">1</sup>
</div>
<div class="media-body">
<h2 class="h6">Vans large image t-shirt</h2>
<div class="text-body font-size-1">
<span>Gender:</span>
<span>Women</span>
</div>
<div class="text-body font-size-1">
<span>Color:</span>
<span>Core Black / Carbon</span>
</div>
<div class="text-body font-size-1">
<span>Size:</span>
<span>SM</span>
</div>
</div>
</div>
</div>
<!-- End Product Content -->
<!-- Fees -->
<div class="border-bottom pb-4 mb-4">
<div class="media align-items-center mb-3">
<span class="d-block font-size-1 mr-3">Item subtotal (2)</span>
<div class="media-body text-right">
<span class="text-dark font-weight-bold">$73.98</span>
</div>
</div>
<div class="media align-items-center mb-3">
<span class="d-block font-size-1 mr-3">Delivery</span>
<div class="media-body text-right">
<span class="text-dark font-weight-bold">Free</span>
</div>
</div>
<!-- Checkbox -->
<div class="card shadow-none mb-3">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio1Example1" name="deliveryRadio" checked>
<label class="custom-control-label ml-1" for="deliveryRadio1Example1">
<span class="d-block font-size-1 font-weight-bold mb-1">Free - Standard delivery</span>
<span class="d-block text-muted">Shipment may take 5-6 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="card shadow-none mb-3">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio2Example2" name="deliveryRadio">
<label class="custom-control-label ml-1" for="deliveryRadio2Example2">
<span class="d-block font-size-1 font-weight-bold mb-1">$7.99 - Express delivery</span>
<span class="d-block text-muted">Shipment may take 2-3 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
<div class="media align-items-center">
<span class="d-block font-size-1 mr-3">Estimated tax</span>
<div class="media-body text-right">
<span class="text-dark font-weight-bold">--</span>
</div>
</div>
</div>
<!-- End Fees -->
<!-- Total -->
<div class="media align-items-center">
<span class="d-block font-size-1 mr-3">Total</span>
<div class="media-body text-right">
<span class="text-dark font-weight-bold">$73.98</span>
</div>
</div>
<!-- End Total -->
</div>
<!-- End Order Summary -->
<!-- Accordion -->
<div id="shopCartAccordion" class="accordion card shadow-soft mb-4">
<!-- Card -->
<div class="card">
<div class="card-header card-collapse" id="shopCartHeadingOneExample1">
<h3 class="mb-0">
<a class="btn btn-link btn-block card-btn font-weight-bold collapsed" href="javascript:;" role="button"
data-toggle="collapse"
data-target="#shopCartOneExample1"
aria-expanded="false"
aria-controls="shopCartOneExample1">
Promo code?
<i class="far fa-question-circle text-body ml-1" data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" title="Promo code" data-content="Valid on full priced items only. Some products maybe excluded."></i>
</a>
</h3>
</div>
<div id="shopCartOneExample1" class="collapse" aria-labelledby="shopCartHeadingOneExample1" data-parent="#shopCartAccordion">
<form class="js-validate p-4">
<div class="input-group input-group-pill mb-3">
<input type="text" class="form-control" name="name" placeholder="Promo code" aria-label="Promo code">
<div class="input-group-append">
<button type="submit" class="btn btn-block btn-primary btn-pill">Apply</button>
</div>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Accordion -->
<!-- Help Link -->
<div class="media align-items-center">
<figure class="w-100 max-w-6rem mr-2">
<img class="img-fluid" src="../assets/svg/icons/icon-4.svg" alt="SVG">
</figure>
<div class="media-body text-body small">
<span class="font-weight-bold mr-1">Need Help?</span>
<a class="link-underline" href="#">Chat now</a>
</div>
</div>
<!-- End Help Link -->
</div>
</div>
</div>
</div>
<!-- End Checkout Section -->
Component #11
A casual cap with Front originals style
This men's hat has low-key Trefoil style with an embroidered logo on the front.
Made of washed canvas, the hat has a crushable, packable design and an adjustable back strap so you can personalize the fit.
A casual cap with Front originals style
This men's hat has low-key Trefoil style with an embroidered logo on the front.
Made of washed canvas, the hat has a crushable, packable design and an adjustable back strap so you can personalize the fit.
<!-- Product Review Section -->
<div class="container space-2">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 space-1 space-lg-2">
<h3 class="mb-4">A casual cap with Front originals style</h3>
<p>This men's hat has low-key Trefoil style with an embroidered logo on the front.</p>
<p>Made of washed canvas, the hat has a crushable, packable design and an adjustable back strap so you can personalize the fit.</p>
</div>
<div class="col-lg-6">
<div class="bg-img-hero-center h-100 min-h-450rem rounded-lg" style="background-image: url(../assets/img/750x750/img3.jpg);"></div>
</div>
</div>
<div class="row justify-content-lg-between align-items-lg-center space-top-1 space-top-lg-3">
<div class="col-lg-5 order-lg-2 space-1 space-lg-2">
<h3 class="mb-4">A casual cap with Front originals style</h3>
<p>This men's hat has low-key Trefoil style with an embroidered logo on the front.</p>
<p>Made of washed canvas, the hat has a crushable, packable design and an adjustable back strap so you can personalize the fit.</p>
</div>
<div class="col-lg-6 order-lg-1">
<div class="bg-img-hero-center h-100 min-h-450rem rounded-lg" style="background-image: url(../assets/img/750x750/img4.jpg);"></div>
</div>
</div>
</div>
<!-- End Product Review Section -->
Component #12
<!-- Related Courses -->
<div class="container space-2">
<h3 class="mb-4">Students also bought</h3>
<!-- Course -->
<div class="pt-0 mt-0">
<a class="card shadow-none" href="#">
<div class="card-body p-0">
<div class="row">
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
<img class="img-fluid rounded-lg" src="../assets/svg/components/graphics-4.svg" alt="Image Description">
</div>
<div class="col-sm-7 col-lg-9">
<div class="row">
<div class="col-lg-6 mb-2 mb-lg-0">
<h5 class="text-hover-primary">Get started with Vue.js</h5>
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
</ul>
<span class="d-inline-block">
<span class="text-dark font-size-1 mr-1">4.95</span>
</span>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-7">
<div class="small text-muted mb-2">
<i class="fas fa-book-reader mr-1"></i>
10 lessons
</div>
<div class="small text-muted">
<i class="fas fa-clock mr-1"></i>
3h 25m
</div>
</div>
<div class="col-5 text-right">
<small class="d-block text-muted text-lh-sm"><del>$78.00</del></small>
<span class="d-block h5 text-primary text-lh-sm mb-0">$73.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- End Course -->
<!-- Course -->
<div class="border-top pt-3 mt-3">
<a class="card shadow-none" href="#">
<div class="card-body p-0">
<div class="row">
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
<img class="img-fluid rounded-lg" src="../assets/svg/components/graphics-6.svg" alt="Image Description">
</div>
<div class="col-sm-7 col-lg-9">
<div class="row">
<div class="col-lg-6 mb-2 mb-lg-0">
<h5 class="text-hover-primary">Coding block for WordPress</h5>
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
</ul>
<span class="d-inline-block">
<span class="text-dark font-size-1 mr-1">4.95</span>
</span>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-7">
<div class="small text-muted mb-2">
<i class="fas fa-book-reader mr-1"></i>
8 lessons
</div>
<div class="small text-muted">
<i class="fas fa-clock mr-1"></i>
1h 14m
</div>
</div>
<div class="col-5 text-right">
<small class="d-block text-muted text-lh-sm"><del>$59.99</del></small>
<span class="d-block h5 text-primary text-lh-sm mb-0">$39.99</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- End Course -->
<!-- Course -->
<div class="border-top pt-3 mt-3">
<a class="card shadow-none" href="#">
<div class="card-body p-0">
<div class="row">
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
<img class="img-fluid rounded-lg" src="../assets/svg/components/graphics-5.svg" alt="Image Description">
</div>
<div class="col-sm-7 col-lg-9">
<div class="row">
<div class="col-lg-6 mb-2 mb-lg-0">
<h5 class="text-hover-primary">The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert</h5>
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16"></li>
</ul>
<span class="d-inline-block">
<span class="text-dark font-size-1 mr-1">4.87</span>
</span>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-7">
<div class="small text-muted mb-2">
<i class="fas fa-book-reader mr-1"></i>
23 lessons
</div>
<div class="small text-muted">
<i class="fas fa-clock mr-1"></i>
7h 47m
</div>
</div>
<div class="col-5 text-right">
<small class="d-block text-muted text-lh-sm"><del>$99.99</del></small>
<span class="d-block h5 text-primary text-lh-sm mb-0">$89.99</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<!-- End Course -->
</div>
<!-- End Related Courses -->
Component #13
Complete Python Bootcamp: Go from zero to hero in Python 3
Learn Python like a Professional! Start from the basics and go all the way to creating your own applications and games!
From the Top: Adobe Illustrator for Beginners
The only course you need to learn Adobe Illustrator.
<div class="container">
<!-- Card -->
<a class="d-block border-bottom pb-5 mb-5" href="#">
<div class="row mx-md-n2">
<div class="col-md-4 px-md-2 mb-3 mb-md-0">
<div class="position-relative">
<img class="img-fluid w-100 rounded-lg" src="../assets/svg/components/graphics-1.svg" alt="Image Description">
<div class="position-absolute top-0 left-0 mt-3 ml-3">
<small class="btn btn-xs btn-success btn-pill text-uppercase shadow-soft py-1 px-2 mb-3">Bestseller</small>
</div>
<div class="position-absolute bottom-0 left-0 mb-3 ml-4">
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
</ul>
<span class="d-inline-block">
<small class="font-weight-bold text-white mr-1">4.91</small>
<small class="text-white-70">(1.5k+ reviews)</small>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="media mb-2">
<div class="media-body mr-7">
<h3 class="text-hover-primary">Complete Python Bootcamp: Go from zero to hero in Python 3</h3>
</div>
<div class="d-flex mt-1 ml-auto">
<div class="text-right">
<small class="d-block text-muted text-lh-sm"><del>$114.99</del></small>
<span class="d-block h5 text-primary text-lh-sm mb-0">$99.99</span>
</div>
</div>
</div>
<div class="d-flex justify-content-start align-items-center small text-muted mb-2">
<div class="d-flex align-items-center">
<div class="avatar-group">
<span class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Nataly Gaga">
<img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
</span>
</div>
</div>
<div class="ml-auto">
<i class="fa fa-book-reader mr-1"></i>
10 lessons
</div>
<span class="text-muted mx-2">|</span>
<div class="d-inline-block">
<i class="fa fa-clock mr-1"></i>
3h 25m
</div>
<span class="text-muted mx-2">|</span>
<div class="d-inline-block">
<i class="fa fa-signal mr-1"></i>
All levels
</div>
</div>
<p class="font-size-1 text-body mb-0">Learn Python like a Professional! Start from the basics and go all the way to creating your own applications and games!</p>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="d-block border-bottom pb-5 mb-5" href="#">
<div class="row mx-md-n2">
<div class="col-md-4 px-md-2 mb-3 mb-md-0">
<div class="position-relative">
<img class="img-fluid w-100 rounded-lg" src="../assets/svg/components/graphics-2.svg" alt="Image Description">
<div class="position-absolute bottom-0 left-0 mb-3 ml-4">
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
</ul>
<span class="d-inline-block">
<small class="font-weight-bold text-white mr-1">4.95</small>
<small class="text-white-70">(1k+ reviews)</small>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="media mb-2">
<div class="media-body mr-7">
<h3 class="text-hover-primary">From the Top: Adobe Illustrator for Beginners</h3>
</div>
<div class="d-flex mt-1 ml-auto">
<div class="text-right">
<small class="d-block text-muted text-lh-sm"><del>$129.99</del></small>
<span class="d-block h5 text-primary text-lh-sm mb-0">$119.99</span>
</div>
</div>
</div>
<div class="d-flex justify-content-start align-items-center small text-muted mb-2">
<div class="d-flex align-items-center">
<div class="avatar-group">
<span class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Emily Milda">
<img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</span>
<span class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="John O'nolan">
<img class="avatar-img" src="../assets/img/100x100/img4.jpg" alt="Image Description">
</span>
</div>
</div>
<div class="ml-auto">
<i class="fa fa-book-reader mr-1"></i>
8 lessons
</div>
<span class="text-muted mx-2">|</span>
<div class="d-inline-block">
<i class="fa fa-clock mr-1"></i>
7h 59m
</div>
<span class="text-muted mx-2">|</span>
<div class="d-inline-block">
<i class="fa fa-signal mr-1"></i>
All levels
</div>
</div>
<p class="font-size-1 text-body mb-0">The only course you need to learn Adobe Illustrator.</p>
</div>
</div>
</a>
<!-- End Card -->
</div>
Component #14
Featured courses
Discover your perfect program in our courses.
<!-- Featured Topics Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 text-center mx-md-auto mb-9">
<h2>Featured courses</h2>
<p>Discover your perfect program in our courses.</p>
</div>
<!-- End Title -->
<!-- Featured Topics Carousel -->
<div class="row">
<article class="col-md-6 col-lg-4 mb-5">
<!-- Article -->
<div class="card card-bordered h-100">
<div class="card-img-top position-relative">
<img class="card-img-top" src="../assets/svg/components/graphics-1.svg" alt="Image Description">
<div class="position-absolute top-0 left-0 mt-3 ml-3">
<small class="btn btn-xs btn-success btn-pill text-uppercase shadow-soft mb-3">Bestseller</small>
</div>
<div class="position-absolute bottom-0 left-0 mb-3 ml-4">
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
</ul>
<span class="d-inline-block">
<small class="font-weight-bold text-white mr-1">4.91</small>
<small class="text-white-70">(1.5k+ reviews)</small>
</span>
</div>
</div>
</div>
<div class="card-body">
<small class="d-block small font-weight-bold text-cap mb-2">Code</small>
<div class="mb-3">
<h3>
<a class="text-inherit" href="#">Complete Python Bootcamp: Go from zero to hero in Python 3</a>
</h3>
</div>
<div class="d-flex align-items-center">
<div class="avatar-group">
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Nataly Gaga" href="#">
<img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
</a>
</div>
<div class="d-flex align-items-center ml-auto">
<div class="small text-muted">
<i class="fa fa-book-reader d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
10 lessons
</div>
<small class="text-muted mx-2">|</small>
<div class="small text-muted">
<i class="fa fa-clock d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
3h 25m
</div>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0">
<div class="d-flex justify-content-between align-items-center">
<div class="mr-2">
<small class="d-block text-muted text-lh-sm"><del>$114.99</del></small>
<span class="d-block h5 text-lh-sm mb-0">$99.99</span>
</div>
<a class="btn btn-sm btn-primary transition-3d-hover" href="#">Preview</a>
</div>
</div>
</div>
<!-- End Article -->
</article>
<article class="col-md-6 col-lg-4 mb-5">
<!-- Article -->
<div class="card card-bordered h-100">
<div class="card-img-top position-relative">
<img class="card-img-top" src="../assets/svg/components/graphics-2.svg" alt="Image Description">
<div class="position-absolute bottom-0 left-0 mb-3 ml-4">
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
</ul>
<span class="d-inline-block">
<small class="font-weight-bold text-white mr-1">4.95</small>
<small class="text-white-70">(1k+ reviews)</small>
</span>
</div>
</div>
</div>
<div class="card-body">
<small class="d-block small font-weight-bold text-cap mb-2">Design & Illustration</small>
<div class="mb-3">
<h3>
<a class="text-inherit" href="#">From the Top: Adobe Illustrator for Beginners</a>
</h3>
</div>
<div class="d-flex align-items-center mb-4">
<div class="avatar-group">
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Emily Milda" href="#">
<img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</a>
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="John O'nolan" href="#">
<img class="avatar-img" src="../assets/img/100x100/img4.jpg" alt="Image Description">
</a>
</div>
<div class="d-flex align-items-center ml-auto">
<div class="small text-muted">
<i class="fa fa-book-reader d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
8 lessons
</div>
<small class="text-muted mx-2">|</small>
<div class="small text-muted">
<i class="fa fa-clock d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
7h 59m
</div>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0">
<div class="d-flex justify-content-between align-items-center">
<div class="mr-2">
<small class="d-block text-muted text-lh-sm"><del>$129.99</del></small>
<span class="d-block h5 text-lh-sm mb-0">$119.99</span>
</div>
<a class="btn btn-sm btn-primary transition-3d-hover" href="#">Preview</a>
</div>
</div>
</div>
<!-- End Article -->
</article>
<article class="col-md-6 col-lg-4 mb-5">
<!-- Article -->
<div class="card card-bordered h-100">
<div class="card-img-top position-relative">
<img class="card-img-top" src="../assets/svg/components/graphics-4.svg" alt="Image Description">
<div class="position-absolute top-0 left-0 mt-3 ml-3">
<small class="btn btn-xs btn-success btn-pill text-uppercase shadow-soft mb-3">Featured</small>
</div>
<div class="position-absolute bottom-0 left-0 mb-3 ml-4">
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline mt-n1 mb-0 mr-2">
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
<li class="list-inline-item mx-0"><img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="14"></li>
</ul>
<span class="d-inline-block">
<small class="font-weight-bold text-white mr-1">4.73</small>
<small class="text-white-70">(4.7k+ reviews)</small>
</span>
</div>
</div>
</div>
<div class="card-body">
<small class="d-block small font-weight-bold text-cap mb-2">Code</small>
<div class="mb-3">
<h3>
<a class="text-inherit" href="#">Get started with Vue.js</a>
</h3>
</div>
<div class="d-flex align-items-center mb-4">
<div class="avatar-group">
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Aaron Larsson" href="#">
<img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</a>
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe" href="#">
<img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
</a>
</div>
<div class="d-flex align-items-center ml-auto">
<div class="small text-muted">
<i class="fa fa-book-reader d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
25 lessons
</div>
<small class="text-muted mx-2">|</small>
<div class="small text-muted">
<i class="fa fa-clock d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
17h 46m
</div>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0">
<div class="d-flex justify-content-between align-items-center">
<div class="mr-2">
<small class="d-block text-muted text-lh-sm"><del>$169.99</del></small>
<span class="d-block h5 text-lh-sm mb-0">$129.99</span>
</div>
<a class="btn btn-sm btn-primary transition-3d-hover" href="#">Preview</a>
</div>
</div>
</div>
<!-- End Article -->
</article>
</div>
<!-- End Featured Topics Carousel -->
<div class="text-center">
<a class="font-weight-bold" href="#">See all Courses <i class="fa fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Featured Topics Section -->
Component #15
<!-- Related Products Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-lg-50 text-center mx-lg-auto mb-7">
<span class="d-block small font-weight-bold text-cap mb-2">Guidelines and Tutorials</span>
<h2>Learn the ins and outs</h2>
</div>
<!-- End Title -->
<div class="row mb-5">
<div class="col-lg-5 mb-3 mb-sm-5">
<!-- Card -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="position-relative">
<img class="card-img-top" src="../assets/svg/components/abstract-shapes-13.svg" alt="SVG">
<div class="position-absolute top-0 left-0 pt-3 pl-3">
<span class="badge badge-primary badge-pill">Free</span>
</div>
</div>
<div class="card-body pb-0">
<h4>Objects and dimensions</h4>
<p class="text-body">Cute characters with big hearts for your mobile and web projects.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-primary font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg mb-3 mb-sm-5">
<!-- Card -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="position-relative">
<img class="card-img-top" src="../assets/svg/components/abstract-shapes-14.svg" alt="SVG">
<div class="position-absolute top-0 left-0 pt-3 pl-3">
<span class="badge badge-primary badge-pill">$99</span>
</div>
</div>
<div class="card-body pb-0">
<h4>Charts in design</h4>
<p class="text-body">Learn the best ways to create and use charts and data content in web applications.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-primary font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg mb-3 mb-sm-5">
<!-- Card -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="position-relative">
<img class="card-img-top" src="../assets/svg/components/abstract-shapes-15.svg" alt="SVG">
<div class="position-absolute top-0 left-0 pt-3 pl-3">
<span class="badge badge-primary badge-pill">Free</span>
</div>
</div>
<div class="card-body pb-0">
<h4>Hiker man illustrations</h4>
<p class="text-body">Fun and crisp characters for apps, websites or presentations.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-primary font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
</div>
<!-- Info -->
<div class="text-center">
<div class="d-inline-block font-size-1 border bg-white text-center rounded-pill py-3 px-4">
Want to learn more? <a class="font-weight-bold ml-3" href="#">View all tutorials <span class="fas fa-angle-right ml-1"></span></a>
</div>
</div>
<!-- End Info -->
</div>
<!-- End Related Products Section -->
Component #16
-
Total $999.00Ship to Natalie CurtisOrder no. 456853648Shipped date: 30 April, 2020
It's delivered!
-
Total $125.00Ship to Natalie CurtisOrder no. 428766351Shipped date: 08 February, 2020
It's delivered!
-
Total $57.00Ship to Natalie CurtisOrder no. 415338178Shipped date: 14 May, 2020
It's delivered!
No data to show
Start ShoppingNo data to show
Start Shopping
<!-- Card -->
<div class="card">
<!-- Header -->
<div class="card-header">
<form class="input-group input-group-merge input-group-borderless">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-search"></i>
</div>
</div>
<input type="search" class="form-control" placeholder="Search orders" aria-label="Search orders">
</form>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<!-- Nav -->
<ul class="nav nav-segment nav-fill mb-5" id="editUserTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="all-orders-tab" data-toggle="tab" href="#all-orders" role="tab">Orders</a>
</li>
<li class="nav-item">
<a class="nav-link" id="open-orders-tab" data-toggle="tab" href="#open-orders" role="tab">Open orders</a>
</li>
<li class="nav-item">
<a class="nav-link" id="cenceled-orders-tab" data-toggle="tab" href="#cenceled-orders" role="tab">Canceled orders</a>
</li>
</ul>
<!-- End Nav -->
<!-- Tab Content -->
<div class="tab-content" id="editUserTabContent">
<div class="tab-pane fade show active" id="all-orders" role="tabpanel" aria-labelledby="all-orders-tab">
<!-- Select Group -->
<div class="d-sm-flex align-items-sm-center mb-5">
<div class="mb-2 mb-sm-0 mr-3">
<span><strong class="text-dark">3 orders</strong> placed in</span>
</div>
<!-- Select -->
<select class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true,
"width": true
}'>
<option value="last 30 days">last 30 days</option>
<option value="past 6 months" selected>past 6 months</option>
<option value="2019">2019</option>
</select>
<!-- End Select -->
</div>
<!-- End Select Group -->
<ul class="list-unstyled">
<!-- Card -->
<li class="card card-bordered shadow-none mb-3">
<div class="card-body">
<div class="row">
<div class="col-6 col-md mb-3 mb-md-0">
<small class="text-cap">Total</small>
<small class="text-dark font-weight-bold">$999.00</small>
</div>
<div class="col-6 col-md mb-3 mb-md-0">
<small class="text-cap">Ship to</small>
<small class="text-dark font-weight-bold">Natalie Curtis</small>
</div>
<div class="col-6 col-md">
<small class="text-cap">Order no.</small>
<small class="text-dark font-weight-bold">456853648</small>
</div>
<div class="col-6 col-md">
<small class="text-cap">Shipped date:</small>
<small class="text-dark font-weight-bold">30 April, 2020</small>
</div>
</div>
<!-- End Row -->
<hr>
<div class="row">
<div class="col-md-8">
<h5>It's delivered!</h5>
<div class="row mx-n1">
<div class="col px-1">
<img class="img-fluid" src="../assets/img/380x360/img6.jpg" alt="Image Description">
</div>
<div class="col px-1">
<img class="img-fluid" src="../assets/img/380x360/img4.jpg" alt="Image Description">
</div>
<div class="col px-1">
<img class="img-fluid" src="../assets/img/380x360/img5.jpg" alt="Image Description">
</div>
</div>
<!-- End Row -->
</div>
<div class="col-md-4">
<a class="btn btn-sm btn-block btn-white mb-2" href="#">
<i class="fas fa-shopping-cart fa-sm mr-2"></i> View order
</a>
<a class="btn btn-sm btn-block btn-white" href="#">
<i class="fas fa-truck-loading fa-sm mr-2"></i> Track order
</a>
<a class="btn btn-sm btn-block btn-white" href="#">
<i class="fas fa-undo-alt fa-sm mr-2"></i> Return item
</a>
<a class="btn btn-sm btn-block btn-primary" href="#">Buy it again</a>
</div>
</div>
</div>
</li>
<!-- End Card -->
<!-- Card -->
<li class="card card-bordered shadow-none mb-3">
<div class="card-body">
<div class="row">
<div class="col-6 col-md mb-3 mb-md-0">
<small class="text-cap">Total</small>
<small class="text-dark font-weight-bold">$125.00</small>
</div>
<div class="col-6 col-md mb-3 mb-md-0">
<small class="text-cap">Ship to</small>
<small class="text-dark font-weight-bold">Natalie Curtis</small>
</div>
<div class="col-6 col-md">
<small class="text-cap">Order no.</small>
<small class="text-dark font-weight-bold">428766351</small>
</div>
<div class="col-6 col-md">
<small class="text-cap">Shipped date:</small>
<small class="text-dark font-weight-bold">08 February, 2020</small>
</div>
</div>
<!-- End Row -->
<hr>
<div class="row">
<div class="col-md-8">
<h5>It's delivered!</h5>
<div class="row mx-n1">
<div class="col-4 px-1">
<img class="img-fluid" src="../assets/img/380x360/img1.jpg" alt="Image Description">
</div>
</div>
<!-- End Row -->
</div>
<div class="col-md-4">
<a class="btn btn-sm btn-block btn-white mb-2" href="#">
<i class="fas fa-shopping-cart fa-sm mr-2"></i> View order
</a>
<a class="btn btn-sm btn-block btn-white" href="#">
<i class="fas fa-truck-loading fa-sm mr-2"></i> Track order
</a>
<a class="btn btn-sm btn-block btn-white" href="#">
<i class="fas fa-undo-alt fa-sm mr-2"></i> Return item
</a>
<a class="btn btn-sm btn-block btn-primary" href="#">Buy it again</a>
</div>
</div>
</div>
<!-- End List Item -->
</li>
<!-- End End Card -->
<!-- Card -->
<li class="card card-bordered shadow-none mb-3">
<div class="card-body">
<div class="row">
<div class="col-6 col-md mb-3 mb-md-0">
<small class="text-cap">Total</small>
<small class="text-dark font-weight-bold">$57.00</small>
</div>
<div class="col-6 col-md mb-3 mb-md-0">
<small class="text-cap">Ship to</small>
<small class="text-dark font-weight-bold">Natalie Curtis</small>
</div>
<div class="col-6 col-md">
<small class="text-cap">Order no.</small>
<small class="text-dark font-weight-bold">415338178</small>
</div>
<div class="col-6 col-md">
<small class="text-cap">Shipped date:</small>
<small class="text-dark font-weight-bold">14 May, 2020</small>
</div>
</div>
<!-- End Row -->
<hr>
<div class="row">
<div class="col-md-8">
<h5>It's delivered!</h5>
<div class="row mx-n1">
<div class="col-4 px-1">
<img class="img-fluid" src="../assets/img/380x360/img2.jpg" alt="Image Description">
</div>
<div class="col-4 px-1">
<img class="img-fluid" src="../assets/img/380x360/img7.jpg" alt="Image Description">
</div>
</div>
<!-- End Row -->
</div>
<div class="col-md-4">
<a class="btn btn-sm btn-block btn-white mb-2" href="#">
<i class="fas fa-shopping-cart fa-sm mr-2"></i> View order
</a>
<a class="btn btn-sm btn-block btn-white" href="#">
<i class="fas fa-truck-loading fa-sm mr-2"></i> Track order
</a>
<a class="btn btn-sm btn-block btn-white" href="#">
<i class="fas fa-undo-alt fa-sm mr-2"></i> Return item
</a>
<a class="btn btn-sm btn-block btn-primary" href="#">Buy it again</a>
</div>
</div>
</div>
<!-- End List Item -->
</li>
<!-- End End Card -->
</ul>
<!-- Pagination -->
<nav class="d-flex justify-content-end mt-5" aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<!-- End Pagination -->
</div>
<div class="tab-pane fade" id="open-orders" role="tabpanel" aria-labelledby="open-orders-tab">
<!-- Empty State -->
<div class="text-center space-1">
<img class="avatar avatar-xl mb-3" src="../assets/svg/components/empty-state-no-data.svg" alt="Image Description">
<p class="card-text">No data to show</p>
<a class="btn btn-sm btn-white" href="#">Start Shopping</a>
</div>
<!-- End Empty State -->
</div>
<div class="tab-pane fade" id="cenceled-orders" role="tabpanel" aria-labelledby="cenceled-orders-tab">
<!-- Empty State -->
<div class="text-center space-1">
<img class="avatar avatar-xl mb-3" src="../assets/svg/components/empty-state-no-data.svg" alt="Image Description">
<p class="card-text">No data to show</p>
<a class="btn btn-sm btn-white" href="#">Start Shopping</a>
</div>
<!-- End Empty State -->
</div>
</div>
<!-- End Tab Content -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<link rel="stylesheet" href="./assets/vendor/select2/dist/css/select2.min.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/select2/dist/js/select2.full.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF SELECT2
// =======================================================
$('.js-custom-select').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
});
</script>