Directory List - Snippets | Front - 基于Boostrap5的多用途响应式模板库

Component #1

主打产品

View all

Spotify

Entertainment

Slack

Communication

Google Drive

File management

Atlassian

Developer tools

比安

设计工具

InVision Studio

设计工具

              
                <!-- 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="图片描述内容" 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="图片描述内容" 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">比安</h5>
                              <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="图片描述内容" title="Top Vendor">
                            </div>
                            <p class="card-text text-body small">设计 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">设计 tools</p>
                          </div>
                        </div>
                      </a>
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Col -->
                </div>
                <!-- End Row -->

              
                <script src="../assets/vendor/fslightbox/index.js"></script>

Component #2

New

For sale

Borrett Close, 伦敦

£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="图片描述内容">

                            <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, 伦敦</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="图片描述内容" 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="图片描述内容">

                            <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="../assets/vendor/fslightbox/index.js"></script>

邮递员

B2B 高级销售顾问

邮递员

$125k-$135k 每年远程

发表于 7 小时前
牛津
全职

胶囊

办公室助理/社交媒体助理

胶囊

$50-$135 每小时

Posted 21 hours ago
纽卡斯尔
兼职

              
                <!-- 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="图片描述内容">
                          </div>
                          <div class="d-sm-none flex-grow-1 ms-3">
                            <h6 class="card-title">
                              <a class="text-dark" href="../demo-jobs/employer.html">邮递员</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="已声明的个人资料">
                            </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">B2B 高级销售顾问</a>
                              </h3>
                              <div class="d-none d-sm-inline-block">
                                <h6 class="card-title">
                                  <a class="text-dark" href="../demo-jobs/employer.html">邮递员</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="已声明的个人资料">
                                </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 每年</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">发表于 7 小时前</li>
                        <li class="list-inline-item">牛津</li>
                        <li class="list-inline-item">全职</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="图片描述内容">
                          </div>
                          <div class="d-sm-none flex-grow-1 ms-3">
                            <h6 class="card-title">
                              <a class="text-dark" href="../demo-jobs/employer.html">胶囊</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">办公室助理/社交媒体助理</a>
                              </h3>
                              <div class="d-none d-sm-inline-block">
                                <h6 class="card-title">
                                  <a class="text-dark" href="../demo-jobs/employer.html">胶囊</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 每小时</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">纽卡斯尔</li>
                        <li class="list-inline-item">兼职</li>
                      </ul>
                    </div>
                  </div>
                  <!-- End Card -->
                </div>
                <!-- End Card List -->

Component #4

预览
HTML

畅销品

4.91 (1.5k+ 评论)

代码

完成Python训练营:在Python中从零变成英雄 3

~~$114.99~~

128元

10 课程
3h 25m
All levels

像专业人士一样学习Python !从基础开始，一路走到创建自己的应用程序和游戏!

4.95 (1k+ 评论)

设计,插图

从零开始:Adobe Illustrator初学者

~~$129.99~~

$119.99

7 课程
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="图片描述内容">

                          <div class="card-pinned-top-start">
                            <small class="badge bg-success">畅销品</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-semi-bold text-white small me-1">4.91</span>
                                <span class="text-white-70 small">(1.5k+ 评论)</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">完成Python训练营:在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">128元</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="图片描述内容">
                              </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 课程
                              </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">像专业人士一样学习Python !从基础开始，一路走到创建自己的应用程序和游戏!</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="图片描述内容">

                          <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-semi-bold text-white small me-1">4.95</span>
                                <span class="text-white-70 small">(1k+ 评论)</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">设计,插图</small>
                            <h3 class="card-title text-inherit">从零开始:Adobe Illustrator初学者</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="图片描述内容">
                              </span>
                              <span class="avatar avatar-xs avatar-circle">
                                <img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="图片描述内容">
                              </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 课程
                              </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

预览
HTML

students也买了

开始使用 Vue.js

4.95

10 课程

3h 25m

~~$114.99~~

128元

WordPress的代码块

4.95

8 课程

1小时14分钟

~~$59.99~~

$39.99

终极MySQL训练营:从SQL初学者到专家

4.87

23 课程

7小时45分钟

~~128元~~

$89.99

              
                <!-- Content -->
                <div class="container content-space-1">
                  <h3 class="mb-4">students也买了</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="图片描述内容">
                        </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">开始使用 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 课程
                                  </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">128元</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="图片描述内容">
                        </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">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 课程
                                  </div>
                                  <div class="text-muted small">
                                    <i class="bi-clock me-1"></i> 1小时14分钟
                                  </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="图片描述内容">
                        </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">终极MySQL训练营:从SQL初学者到专家</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 课程
                                  </div>
                                  <div class="text-muted small">
                                    <i class="bi-clock me-1"></i> 7小时45分钟
                                  </div>
                                </div>
                                <!-- End Col -->

                                <div class="col-5 text-end">
                                  <p class="text-muted small mb-0"><del>128元</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

预览
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="图片描述内容">

                          <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> 愿望单
                              </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="图片描述内容">
                        </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> 愿望单
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                  <!-- End Card -->
                </div>