Directory List - Snippets | Front - Multipurpose Responsive Template

Component #1

Featured

View all

Spotify

Entertainment

Slack

Communication

Google Drive

File management

Atlassian

Developer tools

Behance

Design tools

InVision Studio

Design tools

              
                <!-- Heading -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                  <h4 class="mb-0">Featured</h4>
                  <a class="link" href="#">View all <i class="bi-chevron-right small ms-1"></i></a>
                </div>
                <!-- End Heading -->

                <div class="row gx-3 mx-n2">
                  <div class="col-sm-6 col-md-4 mb-3">
                    <!-- Card -->
                    <div class="card card-bordered card-transition h-100">
                      <a class="card-body" href="../demo-app-marketplace/app-overview.html">
                        <div class="d-flex">
                          <div class="flex-shrink-0">
                            <img class="avatar avatar-xs" src="../assets/svg/brands/spotify-icon.svg" alt="Logo">
                          </div>

                          <div class="flex-grow-1 ms-3">
                            <div class="d-flex align-items-center">
                              <h5 class="card-title mb-0">Spotify</h5>
                              <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
                            </div>
                            <p class="card-text text-body small">Entertainment</p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col-sm-6 col-md-4 mb-3">
                    <!-- Card -->
                    <div class="card card-bordered card-transition h-100">
                      <a class="card-body" href="../demo-app-marketplace/app-overview.html">
                        <div class="d-flex">
                          <div class="flex-shrink-0">
                            <img class="avatar avatar-xs" src="../assets/svg/brands/slack-icon.svg" alt="Logo">
                          </div>

                          <div class="flex-grow-1 ms-3">
                            <div class="d-flex align-items-center">
                              <h5 class="card-title mb-0">Slack</h5>
                            </div>
                            <p class="card-text text-body small">Communication</p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col-sm-6 col-md-4 mb-3">
                    <!-- Card -->
                    <div class="card card-bordered card-transition h-100">
                      <a class="card-body" href="../demo-app-marketplace/app-overview.html">
                        <div class="d-flex">
                          <div class="flex-shrink-0">
                            <img class="avatar avatar-xs" src="../assets/svg/brands/google-drive-icon.svg" alt="Logo">
                          </div>

                          <div class="flex-grow-1 ms-3">
                            <div class="d-flex align-items-center">
                              <h5 class="card-title mb-0">Google Drive</h5>
                              <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
                            </div>
                            <p class="card-text text-body small">File management</p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col-sm-6 col-md-4 mb-3">
                    <!-- Card -->
                    <div class="card card-bordered card-transition h-100">
                      <a class="card-body" href="../demo-app-marketplace/app-overview.html">
                        <div class="d-flex">
                          <div class="flex-shrink-0">
                            <img class="avatar avatar-xs" src="../assets/svg/brands/atlassian-icon.svg" alt="Logo">
                          </div>

                          <div class="flex-grow-1 ms-3">
                            <div class="d-flex align-items-center">
                              <h5 class="card-title mb-0">Atlassian</h5>
                            </div>
                            <p class="card-text text-body small">Developer tools</p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col-sm-6 col-md-4 mb-3">
                    <!-- Card -->
                    <div class="card card-bordered card-transition h-100">
                      <a class="card-body" href="../demo-app-marketplace/app-overview.html">
                        <div class="d-flex">
                          <div class="flex-shrink-0">
                            <img class="avatar avatar-xs" src="../assets/svg/brands/behance-icon.svg" alt="Logo">
                          </div>

                          <div class="flex-grow-1 ms-3">
                            <div class="d-flex align-items-center">
                              <h5 class="card-title mb-0">Behance</h5>
                              <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
                            </div>
                            <p class="card-text text-body small">Design tools</p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->

                  <div class="col-sm-6 col-md-4 mb-3">
                    <!-- Card -->
                    <div class="card card-bordered card-transition h-100">
                      <a class="card-body" href="../demo-app-marketplace/app-overview.html">
                        <div class="d-flex">
                          <div class="flex-shrink-0">
                            <img class="avatar avatar-xs" src="../assets/svg/brands/invision-studio-icon.svg" alt="Logo">
                          </div>

                          <div class="flex-grow-1 ms-3">
                            <div class="d-flex align-items-center">
                              <h5 class="card-title mb-0">InVision Studio</h5>
                            </div>
                            <p class="card-text text-body small">Design tools</p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->
                </div>
                <!-- End Row -->

              
                <script src="../node_modules/fslightbox/index.js"></script>

Component #2

New

For sale

Borrett Close, London

£689,000

3 bed
2 bath
1,428 sqft

This superb one bedroom flat rests a stones throw from Kennington tube station and Elephant and Castle train station as well as the leafy Paisley Park.

Listed on Jan 4, 2019 by

Monica Fox

(0161) 347 8854 Contact Save

For sale

The Drive, Ilford

£999,000

2 bed
1 bath
2,123 sqft

Equity estate agents are pleased to offer this modern three Bedroom ground floor split level maisonette situated within easy reach of turkey street and enfield lock Train Stations.

Listed on Jan 4, 2019 by

Equity Property

(0161) 502 9133 Contact Save

              
                <!-- Card List -->
                <div class="container content-space-1">
                  <div class="d-grid gap-5">
                    <!-- Card -->
                    <div class="card card-flush card-stretched-vertical">
                      <div class="row">
                        <div class="col-md-4">
                          <!-- Card Pinned -->
                          <a class="card-pinned" href="../assets/img/1920x1080/img19.jpg" data-fslightbox="propertyListGallery1">
                            <img class="card-img" src="../assets/img/480x320/img23.jpg" alt="Image Description">

                            <div class="card-pinned-top-start">
                              <span class="badge bg-success">New</span>
                            </div>

                            <div class="card-pinned-bottom-end">
                              <span class="btn btn-light btn-xs btn-icon">
                                <i class="bi-images"></i>
                              </span>
                            </div>
                          </a>
                          <!-- End Card Pinned -->

                          <a class="d-none" href="../assets/img/1920x1080/img20.jpg" data-fslightbox="propertyListGallery1"></a>
                          <a class="d-none" href="../assets/img/1920x1080/img17.jpg" data-fslightbox="propertyListGallery1"></a>
                          <a class="d-none" href="../assets/img/1920x1080/img16.jpg" data-fslightbox="propertyListGallery1"></a>
                        </div>
                        <!-- End Col -->

                        <div class="col-md-8">
                          <div class="card-body">
                            <div class="row mb-3">
                              <div class="col-md-7">
                                <span class="card-subtitle text-body">For sale</span>

                                <h3 class="card-title">
                                  <a class="text-dark" href="../demo-real-estate/property-overview.html">Borrett Close, London</a>
                                </h3>
                              </div>
                              <!-- End Col -->

                              <div class="col-md-5 text-md-end">
                                <h3 class="card-title">
                                  <a href="../demo-real-estate/property-overview.html">£689,000</a>
                                </h3>
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <ul class="list-inline list-separator text-body small mb-3">
                              <li class="list-inline-item">
                                <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512"><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></svg>
                                </span>
                                3 bed
                              </li>
                              <li class="list-inline-item">
                                <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
                                </span>
                                2 bath
                              </li>
                              <li class="list-inline-item">
                                <i class="bi-rulers text-muted me-1"></i> 1,428 sqft
                              </li>
                            </ul>

                            <p class="card-text">This superb one bedroom flat rests a stones throw from Kennington tube station and Elephant and Castle train station as well as the leafy Paisley Park.</p>

                            <div class="card-footer">
                              <div class="row align-items-center">
                                <div class="col-lg mb-2 mb-lg-0">
                                  <!-- Media -->
                                  <div class="d-flex">
                                    <div class="flex-shrink-0">
                                      <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description" title="Monica Fox">
                                    </div>

                                    <div class="flex-grow-1 ms-3">
                                      <p class="card-text small mb-0">Listed on Jan 4, 2019 by</p>
                                      <a class="card-link link-dark" href="#">Monica Fox</a>
                                    </div>
                                  </div>
                                  <!-- End Media -->
                                </div>
                                <!-- End Col -->

                                <div class="col-lg-auto">
                                  <!-- Contacts -->
                                  <div class="d-flex gap-2">
                                    <a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
                                      <i class="bi-telephone-inbound-fill me-1"></i> (0161) 347 8854
                                    </a>
                                    <a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
                                      <i class="bi-envelope-fill me-1"></i> Contact
                                    </a>
                                    <a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
                                      <i class="bi-star-fill me-1"></i> Save
                                    </a>
                                  </div>
                                  <!-- End Contacts -->
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>
                          </div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Card -->

                    <!-- Card -->
                    <div class="card card-flush card-stretched-vertical">
                      <div class="row">
                        <div class="col-md-4">
                          <!-- Card Pinned -->
                          <a class="card-pinned" href="../assets/img/1920x1080/img12.jpg" data-fslightbox="propertyListGallery2">
                            <img class="card-img" src="../assets/img/480x320/img19.jpg" alt="Image Description">

                            <div class="card-pinned-bottom-end">
                              <span class="btn btn-light btn-xs btn-icon">
                                <i class="bi-images"></i>
                              </span>
                            </div>
                          </a>
                          <!-- End Card Pinned -->

                          <a class="d-none" href="../assets/img/1920x1080/img11.jpg" data-fslightbox="propertyListGallery2"></a>
                          <a class="d-none" href="../assets/img/1920x1080/img14.jpg" data-fslightbox="propertyListGallery2"></a>
                        </div>
                        <!-- End Col -->

                        <div class="col-md-8">
                          <div class="card-body">
                            <div class="row mb-3">
                              <div class="col-md-7">
                                <span class="card-subtitle text-body">For sale</span>

                                <h3 class="card-title">
                                  <a class="text-dark" href="../demo-real-estate/property-overview.html">The Drive, Ilford</a>
                                </h3>
                              </div>
                              <!-- End Col -->

                              <div class="col-md-5 text-md-end">
                                <h3 class="card-title">
                                  <a href="../demo-real-estate/property-overview.html">£999,000</a>
                                </h3>
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->

                            <ul class="list-inline list-separator text-body small mb-3">
                              <li class="list-inline-item">
                                <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512"><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></svg>
                                </span>
                                2 bed
                              </li>
                              <li class="list-inline-item">
                                <span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
                                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
                                </span>
                                1 bath
                              </li>
                              <li class="list-inline-item">
                                <i class="bi-rulers text-muted me-1"></i> 2,123 sqft
                              </li>
                            </ul>

                            <p class="card-text">Equity estate agents are pleased to offer this modern three Bedroom ground floor split level maisonette situated within easy reach of turkey street and enfield lock Train Stations.</p>

                            <div class="card-footer">
                              <div class="row align-items-center">
                                <div class="col-lg mb-2 mb-lg-0">
                                  <!-- Media -->
                                  <div class="d-flex">
                                    <div class="flex-shrink-0">
                                      <span class="avatar avatar-sm avatar-soft-dark avatar-circle">
                                        <span class="avatar-initials">EP</span>
                                      </span>
                                    </div>

                                    <div class="flex-grow-1 ms-3">
                                      <p class="card-text small mb-0">Listed on Jan 4, 2019 by</p>
                                      <a class="card-link link-dark" href="#">Equity Property</a>
                                    </div>
                                  </div>
                                  <!-- End Media -->
                                </div>
                                <!-- End Col -->

                                <div class="col-lg-auto">
                                  <!-- Contacts -->
                                  <div class="d-flex gap-2">
                                    <a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
                                      <i class="bi-telephone-inbound-fill me-1"></i> (0161) 502 9133
                                    </a>
                                    <a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
                                      <i class="bi-envelope-fill me-1"></i> Contact
                                    </a>
                                    <a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
                                      <i class="bi-star-fill me-1"></i> Save
                                    </a>
                                  </div>
                                  <!-- End Contacts -->
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>
                          </div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Card -->
                  </div>
                </div>
                <!-- End Card List -->

              
                <script src="../node_modules/fslightbox/index.js"></script>

Mailchimp

Senior B2B sales consultant

Mailchimp

$125k-$135k yearly Remote

Posted 7 hours ago
Oxford
Full time

Capsule

Office assistant/Social media assistant

Capsule

$50-$135 hourly

Posted 21 hours ago
Newcastle
Part time

              
                <!-- Card List -->
                <div class="d-grid gap-5">
                  <!-- Card -->
                  <div class="card card-bordered">
                    <div class="card-body">
                      <!-- Media -->
                      <div class="d-sm-flex">
                        <!-- Media -->
                        <div class="d-flex align-items-center align-items-sm-start mb-3">
                          <div class="flex-shrink-0">
                            <img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/mailchimp-icon.svg" alt="Image Description">
                          </div>
                          <div class="d-sm-none flex-grow-1 ms-3">
                            <h6 class="card-title">
                              <a class="text-dark" href="../demo-jobs/employer.html">Mailchimp</a>
                              <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile">
                            </h6>
                          </div>
                        </div>
                        <!-- End Media -->
                        
                        <div class="flex-grow-1 ms-sm-3">
                          <div class="row">
                            <div class="col col-md-8">
                              <h3 class="card-title">
                                <a class="text-dark" href="../demo-jobs/employer.html">Senior B2B sales consultant</a>
                              </h3>
                              <div class="d-none d-sm-inline-block">
                                <h6 class="card-title">
                                  <a class="text-dark" href="../demo-jobs/employer.html">Mailchimp</a>
                                  <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile">
                                </h6>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto order-md-3">
                              <!-- Checkbbox Bookmark -->
                              <div class="form-check form-check-bookmark">
                                <input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck1">
                                <label class="form-check-label" for="jobsCardBookmarkCheck1">
                                  <span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
                                    <i class="bi-star"></i>
                                  </span>
                                  <span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
                                    <i class="bi-star-fill"></i>
                                  </span>
                                </label>
                              </div>
                              <!-- End Checkbbox Bookmark -->
                            </div>
                            <!-- End Col -->

                            <div class="col-12 col-md mt-3 mt-md-0">
                              <span class="d-block small text-body mb-1">$125k-$135k yearly</span>

                              <span class="badge bg-soft-info text-info me-2">
                                <span class="legend-indicator bg-info"></span>Remote
                              </span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </div>
                      <!-- End Media -->
                    </div>

                    <div class="card-footer pt-0">
                      <ul class="list-inline list-separator small text-body">
                        <li class="list-inline-item">Posted 7 hours ago</li>
                        <li class="list-inline-item">Oxford</li>
                        <li class="list-inline-item">Full time</li>
                      </ul>
                    </div>
                  </div>
                  <!-- End Card -->

                  <!-- Card -->
                  <div class="card card-bordered">
                    <div class="card-body">
                      <!-- Media -->
                      <div class="d-sm-flex">
                        <!-- Media -->
                        <div class="d-flex align-items-center align-items-sm-start mb-3">
                          <div class="flex-shrink-0">
                            <img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/capsule-icon.svg" alt="Image Description">
                          </div>
                          <div class="d-sm-none flex-grow-1 ms-3">
                            <h6 class="card-title">
                              <a class="text-dark" href="../demo-jobs/employer.html">Capsule</a>
                            </h6>
                          </div>
                        </div>
                        <!-- End Media -->
                        
                        <div class="flex-grow-1 ms-sm-3">
                          <div class="row">
                            <div class="col col-md-8">
                              <h3 class="card-title">
                                <a class="text-dark" href="../demo-jobs/employer.html">Office assistant/Social media assistant</a>
                              </h3>
                              <div class="d-none d-sm-inline-block">
                                <h6 class="card-title">
                                  <a class="text-dark" href="../demo-jobs/employer.html">Capsule</a>
                                </h6>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto order-md-3">
                              <!-- Checkbbox Bookmark -->
                              <div class="form-check form-check-bookmark">
                                <input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck2">
                                <label class="form-check-label" for="jobsCardBookmarkCheck2">
                                  <span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
                                    <i class="bi-star"></i>
                                  </span>
                                  <span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
                                    <i class="bi-star-fill"></i>
                                  </span>
                                </label>
                              </div>
                              <!-- End Checkbbox Bookmark -->
                            </div>
                            <!-- End Col -->

                            <div class="col-12 col-md mt-3 mt-md-0">
                              <span class="d-block small text-body mb-1">$50-$135 hourly</span>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </div>
                      <!-- End Media -->
                    </div>

                    <div class="card-footer pt-0">
                      <ul class="list-inline list-separator small text-body">
                        <li class="list-inline-item">Posted 21 hours ago</li>
                        <li class="list-inline-item">Newcastle</li>
                        <li class="list-inline-item">Part time</li>
                      </ul>
                    </div>
                  </div>
                  <!-- End Card -->
                </div>
                <!-- End Card List -->

Component #4

Preview
HTML

Bestseller

4.91 (1.5k+ reviews)

Code

Complete Python Bootcamp: Go from zero to hero in Python 3

~~$114.99~~

$99.99

10 lessons
3h 25m
All levels

Learn Python like a Professional! Start from the basics and go all the way to creating your own applications and games!

4.95 (1k+ reviews)

Design & Illustration

From the Top: Adobe Illustrator for Beginners

~~$129.99~~

$119.99

7 lessons
7h 59m
All levels

The only course you need to learn Adobe Illustrator.

              
                <div class="d-grid gap-5">
                  <!-- Card -->
                  <a class="card card-flush" href="../demo-course/course-overview.html">
                    <div class="row align-items-md-center">
                      <div class="col-sm-5 mb-3 mb-sm-0">
                        <!-- Card Pinned -->
                        <div class="card-pinned">
                          <img class="card-img" src="../assets/svg/components/card-12.svg" alt="Image Description">

                          <div class="card-pinned-top-start">
                            <small class="badge bg-success">Bestseller</small>
                          </div>

                          <div class="card-pinned-bottom-start">
                            <div class="d-flex align-items-center flex-wrap">
                              <!-- Rating -->
                              <div class="d-flex gap-1">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              </div>
                              <!-- End Rating -->
                              <div class="ms-1">
                                <span class="fw-semibold text-white small me-1">4.91</span>
                                <span class="text-white-70 small">(1.5k+ reviews)</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Card Pinned -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-7">
                        <div class="row mb-3">
                          <div class="col">
                            <small class="card-subtitle text-body">Code</small>
                            <h3 class="card-title text-inherit">Complete Python Bootcamp: Go from zero to hero in Python 3</h3>
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <div class="text-end">
                              <p class="text-muted small mb-0"><del>$114.99</del></p>
                              <h5 class="card-title text-primary">$99.99</h5>
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <div class="row align-items-center mb-2">
                          <div class="col">
                            <div class="avatar-group avatar-group-xs">
                              <span class="avatar avatar-xs avatar-circle">
                                <img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                              </span>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <ul class="list-inline list-separator text-body small">
                              <li class="list-inline-item">
                                <i class="bi-book me-1"></i> 10 lessons
                              </li>
                              <li class="list-inline-item">
                                <i class="bi-clock me-1"></i> 3h 25m
                              </li>
                              <li class="list-inline-item">
                                <i class="bi-bar-char-steps me-1"></i> All levels
                              </li>
                            </ul>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <p class="card-text text-body">Learn Python like a Professional! Start from the basics and go all the way to creating your own applications and games!</p>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </a>
                  <!-- End Card -->

                  <!-- Card -->
                  <a class="card card-flush" href="../demo-course/course-overview.html">
                    <div class="row align-items-md-center">
                      <div class="col-sm-5 mb-3 mb-sm-0">
                        <!-- Card Pinned -->
                        <div class="card-pinned">
                          <img class="card-img" src="../assets/svg/components/card-13.svg" alt="Image Description">

                          <div class="card-pinned-bottom-start">
                            <div class="d-flex align-items-center flex-wrap">
                              <!-- Rating -->
                              <div class="d-flex gap-1">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              </div>
                              <!-- End Rating -->
                              <div class="ms-1">
                                <span class="fw-semibold text-white small me-1">4.95</span>
                                <span class="text-white-70 small">(1k+ reviews)</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Card Pinned -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-7">
                        <div class="row mb-3">
                          <div class="col">
                            <small class="card-subtitle text-body">Design & Illustration</small>
                            <h3 class="card-title text-inherit">From the Top: Adobe Illustrator for Beginners</h3>
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <div class="text-end">
                              <p class="text-muted small mb-0"><del>$129.99</del></p>
                              <h5 class="card-title text-primary">$119.99</h5>
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <div class="row align-items-center mb-2">
                          <div class="col">
                            <div class="avatar-group avatar-group-xs">
                              <span class="avatar avatar-xs avatar-circle">
                                <img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
                              </span>
                              <span class="avatar avatar-xs avatar-circle">
                                <img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
                              </span>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <ul class="list-inline list-separator text-body small">
                              <li class="list-inline-item">
                                <i class="bi-book me-1"></i> 7 lessons
                              </li>
                              <li class="list-inline-item">
                                <i class="bi-clock me-1"></i> 7h 59m
                              </li>
                              <li class="list-inline-item">
                                <i class="bi-bar-char-steps me-1"></i> All levels
                              </li>
                            </ul>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <p class="card-text text-body">The only course you need to learn Adobe Illustrator.</p>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </a>
                  <!-- End Card -->
                </div>

Component #5

Preview
HTML

Students also bought

Get started with Vue.js

4.95

10 lessons

3h 25m

~~$114.99~~

$99.99

Coding block for WordPress

4.95

8 lessons

1h 14m

~~$59.99~~

$39.99

The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert

4.87

23 lessons

7h 47m

~~$99.99~~

$89.99

              
                <!-- Content -->
                <div class="container content-space-1">
                  <h3 class="mb-4">Students also bought</h3>
                  
                  <div class="d-grid gap-5">
                    <!-- Card -->
                    <a class="d-block" href="../demo-course/course-overview.html">
                      <div class="row">
                        <div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
                          <img class="card-img" src="../assets/svg/components/card-6.svg" alt="Image Description">
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-7 col-lg-9">
                          <div class="row">
                            <div class="col-lg-6 mb-2 mb-lg-0">
                              <h5 class="text-inherit">Get started with Vue.js</h5>

                              <div class="d-flex align-items-center flex-wrap">
                                <!-- Rating -->
                                <div class="d-flex gap-1">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                </div>
                                <!-- End Rating -->
                                <div class="ms-1">
                                  <span class="text-body ms-1">4.95</span>
                                </div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-lg-6">
                              <div class="row">
                                <div class="col-7">
                                  <div class="text-muted small mb-2">
                                    <i class="bi-book me-1"></i> 10 lessons
                                  </div>
                                  <div class="text-muted small">
                                    <i class="bi-clock me-1"></i> 3h 25m
                                  </div>
                                </div>
                                <!-- End Col -->

                                <div class="col-5 text-end">
                                  <p class="text-muted small mb-0"><del>$114.99</del></p>
                                  <h5 class="text-primary mb-0">$99.99</h5>
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </a>
                    <!-- End Card -->

                    <!-- Card -->
                    <a class="d-block" href="../demo-course/course-overview.html">
                      <div class="row">
                        <div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
                          <img class="card-img" src="../assets/svg/components/card-4.svg" alt="Image Description">
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-7 col-lg-9">
                          <div class="row">
                            <div class="col-lg-6 mb-2 mb-lg-0">
                              <h5 class="text-inherit">Coding block for WordPress</h5>

                              <div class="d-flex align-items-center flex-wrap">
                                <!-- Rating -->
                                <div class="d-flex gap-1">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                </div>
                                <!-- End Rating -->
                                <div class="ms-1">
                                  <span class="text-body ms-1">4.95</span>
                                </div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-lg-6">
                              <div class="row">
                                <div class="col-7">
                                  <div class="text-muted small mb-2">
                                    <i class="bi-book me-1"></i> 8 lessons
                                  </div>
                                  <div class="text-muted small">
                                    <i class="bi-clock me-1"></i> 1h 14m
                                  </div>
                                </div>
                                <!-- End Col -->

                                <div class="col-5 text-end">
                                  <p class="text-muted small mb-0"><del>$59.99</del></p>
                                  <h5 class="text-primary mb-0">$39.99</h5>
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </a>
                    <!-- End Card -->

                    <!-- Card -->
                    <a class="d-block" href="../demo-course/course-overview.html">
                      <div class="row">
                        <div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
                          <img class="card-img" src="../assets/svg/components/card-15.svg" alt="Image Description">
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-7 col-lg-9">
                          <div class="row">
                            <div class="col-lg-6 mb-2 mb-lg-0">
                              <h5 class="text-inherit">The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert</h5>

                              <div class="d-flex align-items-center flex-wrap">
                                <!-- Rating -->
                                <div class="d-flex gap-1">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                </div>
                                <!-- End Rating -->
                                <div class="ms-1">
                                  <span class="text-body ms-1">4.87</span>
                                </div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-lg-6">
                              <div class="row">
                                <div class="col-7">
                                  <div class="text-muted small mb-2">
                                    <i class="bi-book me-1"></i> 23 lessons
                                  </div>
                                  <div class="text-muted small">
                                    <i class="bi-clock me-1"></i> 7h 47m
                                  </div>
                                </div>
                                <!-- End Col -->

                                <div class="col-5 text-end">
                                  <p class="text-muted small mb-0"><del>$99.99</del></p>
                                  <h5 class="text-primary mb-0">$89.99</h5>
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </a>
                    <!-- End Card -->
                  </div>
                </div>
                <!-- End Content -->

Component #6

Preview
HTML

New arrival

Accessories

Herschel backpack in dark blue

$56.99

Clothing

Front hoodie

$91.88

              
                <div class="d-grid gap-3">
                  <!-- Card -->
                  <div class="card card-bordered card-stretched-vertical shadow-none">
                    <div class="row">
                      <div class="col-sm-4">
                        <div class="card-pinned">
                          <img class="card-img-top" src="../assets/img/300x180/img3.jpg" alt="Image Description">

                          <div class="card-pinned-top-start">
                            <span class="badge bg-success rounded-pill">New arrival</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-8">
                        <div class="card-body">
                          <div class="mb-2">
                            <a class="link-sm link-secondary" href="#">Accessories</a>
                          </div>

                          <div class="mb-2">
                            <h4 class="card-title">
                              <a class="text-dark" href="../demo-shop/product-overview.html">Herschel backpack in dark blue</a>
                            </h4>
                            <p class="card-text text-dark">$56.99</p>
                          </div>

                          <!-- Rating -->
                          <div class="mb-3">
                            <a class="d-inline-flex align-items-center" href="#">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                              </div>
                              <span class="small">0</span>
                            </a>
                          </div>
                          <!-- End Rating -->
                          
                          <div class="card-footer">
                            <div class="d-flex gap-2">
                              <button type="button" class="btn btn-outline-primary btn-sm btn-transition rounded-pill">Add to cart</button>
                              <button type="button" class="btn btn-soft-secondary btn-sm btn-transition rounded-pill">
                                <i class="bi-heart me-1"></i> Wishlist
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                  <!-- End Card -->

                  <!-- Card -->
                  <div class="card card-bordered card-stretched-vertical shadow-none">
                    <div class="row">
                      <div class="col-sm-4">
                        <div class="card-pinned">
                          <img class="card-img" src="../assets/img/300x180/img1.jpg" alt="Image Description">
                        </div>
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-8">
                        <div class="card-body">
                          <div class="mb-2">
                            <a class="link-sm link-secondary" href="#">Clothing</a>
                          </div>

                          <div class="mb-2">
                            <h4 class="card-title">
                              <a class="text-dark" href="../demo-shop/product-overview.html">Front hoodie</a>
                            </h4>
                            <p class="card-text text-dark">$91.88</p>
                          </div>

                          <!-- Rating -->
                          <div class="mb-3">
                            <a class="d-inline-flex align-items-center" href="#">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                              </div>
                              <span class="small">40</span>
                            </a>
                          </div>
                          <!-- End Rating -->
                          
                          <div class="card-footer">
                            <div class="d-flex gap-2">
                              <button type="button" class="btn btn-outline-primary btn-sm btn-transition rounded-pill">Add to cart</button>
                              <button type="button" class="btn btn-soft-secondary btn-sm btn-transition rounded-pill">
                                <i class="bi-heart me-1"></i> Wishlist
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                  <!-- End Card -->
                </div>