E-commerce

Component #1

The better way to shop with Front top-products

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description

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 border 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 border 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 border 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

                    
                      <!-- 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 border 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 border 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 border 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 border 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 border 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 border 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 border 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 border 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

Image Description
Image Description
Image Description
Image Description
                    
                      <!-- 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 border 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 border 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 border 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 border 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 border 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 border 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

SVG

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.

Start Shopping
                    
                      <!-- 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.

Continue Shopping
                    
                      <!-- 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.99 $179.99
Select quantity

We 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.

SVG
Need Help? Chat now
                    
                      <!-- 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"
                                     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" src="../../assets/img/600x600/img1.jpg" alt="Image Description">
                                  </div>
                                  <div class="js-slide">
                                    <img class="img-fluid w-100 rounded" src="../../assets/img/600x600/img2.jpg" alt="Image Description">
                                  </div>
                                  <div class="js-slide">
                                    <img class="img-fluid w-100 rounded" 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 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 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 border 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 border 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 -->
                      <script src="../../assets/js/hs.slick-carousel.js"></script>

                      <!-- 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
Image Description
Originals national backpack
$29.99
Gender: Men
Color: Grey
Size: One size Edit
$29.99
Image Description
Vans large image t-shirt
$29.99
Gender: Women
Color: Core Black / Carbon
Size: SM Edit
$43.99
                    
                      <!-- 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

Order summary

Item subtotal (2)
$73.98
Delivery
Free
Estimated tax
--
Total
$73.98
SVG
Need Help? Chat now
                    
                      <!-- 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 rounded">
                                  <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 p-4" 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

Image Description 1

Originals national backpack

Gender: Men
Color: Grey
Size: One size
Image Description 1

Vans large image t-shirt

Gender: Women
Color: Core Black / Carbon
Size: SM
Item subtotal (2)
$73.98
Delivery
Free
Estimated tax
--
Total
$73.98
SVG
Need Help? Chat now
                    
                      <!-- 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 rounded">
                                  <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 p-4" 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" 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" 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" 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" 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" 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

                    
                      <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" 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" 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 border 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 border 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 border 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 -->