E-commerce

Component #1

The better way to shop with Front top-products

Image Description
Image Description
Image Description

T-shirts

Starting from $29.99 View All
Image Description
Image Description
Image Description

Tech covers

Starting from $399.99 View All
Image Description
Image Description
Image Description

Caps

Starting from $13.99 View All

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

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

Component #3

What's trending

Image Description

New releases

Be well suited View All
Image Description

Sale

30% off orders $50+ View All
Image Description

Best sellers

Pole and interesting View All
Image Description

Casual

Can you casual it? View All 
<!-- 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 -->
Copy

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

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

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

Component #7

Read all 287 reviews

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 -->
Copy
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
Copy
<!-- 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>
Copy

Component #8

Shopping cart

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

Component #9

Order summary

Item subtotal (2)
$73.98
Delivery
Free
Estimated tax
--
Total
$73.98
Checkout
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 -->
Copy

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

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

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

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

Component #14

Featured courses

Discover your perfect program in our courses.

See all 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 -->
Copy

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