侧边栏示例

              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-lg-3">
                  <div class="row justify-content-lg-between">
                    <div class="col-lg-3">
                      <div class="mb-7">
                        <div class="mb-3">
                          <h3>Newsletter</h3>
                        </div>

                        <!-- Form -->
                        <form>
                          <div class="mb-2">
                            <input type="text" class="form-control" placeholder="Enter email" aria-label="Enter email">
                          </div>
                          <div class="d-grid">
                            <button type="button" class="btn btn-primary">Subscribe</button>
                          </div>
                        </form>
                        <!-- End Form -->

                        <p class="form-text">Get special offers on the latest developments from Front.</p>
                      </div>

                      <div class="mb-7">
                        <div class="mb-3">
                          <h3>Productivity</h3>
                        </div>

                        <!-- List Group -->
                        <ul class="list-group list-group-lg">
                          <!-- Item -->
                          <li class="list-group-item">
                            <a href="#">
                              <div class="row align-items-center">
                                <div class="col">
                                  <h5 class="mb-1">Here's how to dodge distractions</h5>
                                  <p class="text-body small mb-0">Feb 08, 2020</p>
                                </div>
                                <!-- End Col -->

                                <div class="col-auto">
                                  <i class="bi-chevron-right"></i>
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </a>
                          </li>
                          <!-- End Item -->

                          <!-- Item -->
                          <li class="list-group-item">
                            <a href="#">
                              <div class="row align-items-center">
                                <div class="col">
                                  <h5 class="mb-1">Ideas to stay productive</h5>
                                  <p class="text-body small mb-0">Feb 09, 2020</p>
                                </div>
                                <!-- End Col -->

                                <div class="col-auto">
                                  <i class="bi-chevron-right"></i>
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </a>
                          </li>
                          <!-- End Item -->

                          <!-- Item -->
                          <li class="list-group-item">
                            <a href="#">
                              <div class="row align-items-center">
                                <div class="col">
                                  <h5 class="mb-1">Classic design principles</h5>
                                  <p class="text-body small mb-0">Feb 10, 2020</p>
                                </div>
                                <!-- End Col -->

                                <div class="col-auto">
                                  <i class="bi-chevron-right"></i>
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </a>
                          </li>
                          <!-- End Item -->
                        </ul>
                        <!-- End List Group -->
                      </div>

                      <!-- Sticky Block Start Point -->
                      <div id="stickyBlockStartPointEg5"></div>

                      <div class="js-sticky-block"
                           data-hs-sticky-block-options='{
                             "parentSelector": "#stickyBlockStartPointEg5",
                             "targetSelector": "#header",
                             "breakpoint": "md",
                             "startPoint": "#stickyBlockStartPointEg5",
                             "endPoint": "#stickyBlockEndPoint",
                             "stickyOffsetTop": 80
                           }'>
                        <div class="mb-7">
                          <div class="mb-3">
                            <h3>Front culture</h3>
                          </div>

                          <div class="d-grid gap-2">
                            <!-- Card -->
                            <a class="d-block" href="../blog-article.html">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <div class="avatar avatar-lg">
                                    <img class="avatar-img" src="../assets/img/320x320/img1.jpg" alt="图片描述内容">
                                  </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h5 class="text-inherit mb-0">Announcing a free plan for small teams</h5>
                                </div>
                              </div>
                            </a>
                            <!-- End Card -->

                            <!-- Card -->
                            <a class="d-block" href="../blog-article.html">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <div class="avatar avatar-lg">
                                    <img class="avatar-img" src="../assets/img/320x320/img10.jpg" alt="图片描述内容">
                                  </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h5 class="text-inherit mb-0">Mapping the first family tree for Front office</h5>
                                </div>
                              </div>
                            </a>
                            <!-- End Card -->
                            
                            <!-- Card -->
                            <a class="d-block" href="../blog-article.html">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <div class="avatar avatar-lg">
                                    <img class="avatar-img" src="../assets/img/320x320/img9.jpg" alt="图片描述内容">
                                  </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h5 class="text-inherit mb-0">Felling eyeing first major Classic win in 2018</h5>
                                </div>
                              </div>
                            </a>
                            <!-- End Card -->
                          </div>
                        </div>

                        <div class="mb-7">
                          <div class="mb-3">
                            <h3>Tags</h3>
                          </div>

                          <a class="btn btn-soft-secondary btn-xs mb-1" href="#">Business</a>
                          <a class="btn btn-soft-secondary btn-xs mb-1" href="#">Adventure</a>
                          <a class="btn btn-soft-secondary btn-xs mb-1" href="#">Community</a>
                          <a class="btn btn-soft-secondary btn-xs mb-1" href="#">Announcements</a>
                          <a class="btn btn-soft-secondary btn-xs mb-1" href="#">Tutorials</a>
                          <a class="btn btn-soft-secondary btn-xs mb-1" href="#">Resources</a>
                          <a class="btn btn-soft-secondary btn-xs mb-1" href="#">Classic</a>
                          <a class="btn btn-soft-secondary btn-xs mb-1" href="#">Photography</a>
                          <a class="btn btn-soft-secondary btn-xs mb-1" href="#">面试</a>
                        </div>
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <!-- Sticky Block End Point -->
                  <div id="stickyBlockEndPoint"></div>
                </div>
                <!-- End Card Grid -->
              
            

              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF STICKY BLOCKS
                    // =======================================================
                    new HSStickyBlock('.js-sticky-block', {
                      targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
                    })
                  })()
                </script>
              
            

              
                <!-- Content Section -->
                <div class="container content-space-1">
                  <div class="row">
                    <div class="col-lg-3">
                      <!-- Navbar -->
                      <div class="navbar-expand-lg navbar-light">
                        <div id="sidebarNav" class="collapse navbar-collapse navbar-vertical">
                          <!-- Card -->
                          <div class="card flex-grow-1 mb-5">
                            <div class="card-body">
                              <!-- Avatar -->
                              <div class="d-none d-lg-block text-center mb-5">
                                <div class="avatar avatar-xxl avatar-circle mb-3">
                                  <img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="图片描述内容">
                                  <img class="avatar-status avatar-lg-status" src="../assets/svg/illustrations/top-vendor.svg" alt="图片描述内容" data-bs-toggle="tooltip" data-bs-placement="top" title="验证用户">
                                </div>

                                <h4 class="card-title mb-0">梁桐铭 微软MVP</h4>
                                <p class="card-text small">werltm@hotmail.com</p>
                              </div>
                              <!-- End Avatar -->

                              <!-- Nav -->
                              <span class="text-cap">Account</span>

                              <!-- List -->
                              <ul class="nav nav-sm nav-tabs nav-vertical mb-4">
                                <li class="nav-item">
                                  <a class="nav-link active" href="../account-overview.html">
                                    <i class="bi-person-badge nav-icon"></i> 个人资料
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link " href="../account-security.html">
                                    <i class="bi-shield-shaded nav-icon"></i> 安全保护
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link " href="../account-notifications.html">
                                    <i class="bi-bell nav-icon"></i> 通知
                                    <span class="badge bg-soft-dark text-dark rounded-pill nav-link-badge">1</span>
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link " href="../account-preferences.html">
                                    <i class="bi-sliders nav-icon"></i> 偏好设置
                                  </a>
                                </li>
                              </ul>
                              <!-- End List -->

                              <span class="text-cap">我的购物单</span>

                              <!-- List -->
                              <ul class="nav nav-sm nav-tabs nav-vertical mb-4">
                                <li class="nav-item">
                                  <a class="nav-link " href="../account-orders.html">
                                    <i class="bi-basket nav-icon"></i> 我的订单
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link " href="../account-wishlist.html">
                                    <i class="bi-heart nav-icon"></i> 愿望单
                                    <span class="badge bg-soft-dark text-dark rounded-pill nav-link-badge">2</span>
                                  </a>
                                </li>
                              </ul>
                              <!-- End List -->

                              <span class="text-cap">账单</span>

                              <!-- List -->
                              <ul class="nav nav-sm nav-tabs nav-vertical">
                                <li class="nav-item">
                                  <a class="nav-link " href="../account-payments.html">
                                    <i class="bi-credit-card nav-icon"></i> Payments
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link " href="../account-address.html">
                                    <i class="bi-geo-alt nav-icon"></i> 地址信息
                                  </a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link " href="../account-teams.html">
                                    <i class="bi-people nav-icon"></i> 团队
                                    <span class="badge bg-soft-dark text-dark rounded-pill nav-link-badge">+2 新用户</span>
                                  </a>
                                </li>
                              </ul>
                              <!-- End List -->

                              <div class="d-lg-none">
                                <div class="dropdown-divider"></div>

                                <!-- List -->
                                <ul class="nav nav-sm nav-tabs nav-vertical">
                                  <li class="nav-item">
                                    <a class="nav-link" href="#">
                                      <i class="bi-box-arrow-right nav-icon"></i> 注销
                                    </a>
                                  </li>
                                </ul>
                                <!-- End List -->
                              </div>
                              <!-- End Nav -->
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                      </div>
                      <!-- End Navbar -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Content Section -->
              
            

              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-lg-3">
                  <div class="row col-lg-divider">
                    <div class="col-lg-3">
                      <!-- Navbar -->
                      <div class="navbar-expand-lg">
                        <!-- Navbar Toggle -->
                        <div class="d-grid">
                          <button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg1" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg1">
                            <span class="d-flex justify-content-between align-items-center">
                              <span class="text-dark">Menu</span>

                              <span class="navbar-toggler-default">
                                <i class="bi-list"></i>
                              </span>

                              <span class="navbar-toggler-toggled">
                                <i class="bi-x"></i>
                              </span>
                            </span>
                          </button>
                        </div>
                        <!-- End Navbar Toggle -->

                        <!-- Navbar Collapse -->
                        <div id="navbarVerticalNavMenuEg1" class="collapse navbar-collapse">
                          <div class="d-grid gap-4 flex-grow-1">
                            <div class="d-grid">
                              <h5 class="dropdown-header">Explore</h5>
                              <a class="dropdown-item d-flex justify-content-between" href="#">All <span class="badge text-dark border rounded-pill">30+</span></a>
                              <a class="dropdown-item" href="#">Top rated</a>
                              <a class="dropdown-item" href="#">Featured</a>
                              <a class="dropdown-item" href="#">Daily tools</a>
                              <a class="dropdown-item d-flex justify-content-between" href="#">New <span class="badge text-dark border rounded-pill">18</span></a>
                              <a class="dropdown-item" href="#">Channels</a>
                            </div>

                            <div class="d-grid">
                              <h5 class="dropdown-header">Categories</h5>
                              <a class="dropdown-item" href="#">API management</a>
                              <a class="dropdown-item" href="#">Code quality</a>
                              <a class="dropdown-item" href="#">Code review</a>
                              <a class="dropdown-item d-flex justify-content-between" href="#">Integration <span class="badge text-dark border rounded-pill">4</span></a>
                              <a class="dropdown-item" href="#">File management</a>
                              <a class="dropdown-item" href="#">Mobile</a>
                              <a class="dropdown-item" href="#">Monitoring</a>
                              <a class="dropdown-item" href="#">Publishing</a>
                              <a class="dropdown-item d-flex justify-content-between" href="#">安全保护 <span class="badge text-dark border rounded-pill">20</span></a>
                              <a class="dropdown-item d-flex justify-content-between" href="#">File management <span class="badge text-dark border rounded-pill">1</span></a>
                            </div>

                            <div class="d-grid">
                              <h5 class="dropdown-header">Filters</h5>
                              <a class="dropdown-item d-flex justify-content-between" href="#">Free <span class="badge text-dark border rounded-pill">9+</span></a>
                              <a class="dropdown-item" href="#">Free trial</a>
                            </div>

                            <div class="d-grid">
                              <h5 class="dropdown-header">Verification</h5>
                              <a class="dropdown-item" href="#">Verified</a>
                              <a class="dropdown-item" href="#">Unverified</a>
                            </div>
                          </div>
                        </div>
                        <!-- End Navbar Collapse -->
                      </div>
                      <!-- End Navbar -->
                    </div>
                    <!-- End Col -->

                    <div class="col-lg-9">
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card Grid -->
              
            

              
                <!-- Content -->
                <div class="container">
                  <div class="row">
                    <div class="col-md-5 col-lg-4">
                      <!-- Sticky Block -->
                      <div id="stickyBlockStartPointEg1">
                        <div class="js-sticky-block"
                             data-hs-sticky-block-options='{
                               "parentSelector": "#stickyBlockStartPointEg1",
                               "breakpoint": "md",
                               "startPoint": "#stickyBlockStartPointEg1",
                               "endPoint": "#stickyBlockEndPoint",
                               "stickyOffsetTop": 12,
                               "stickyOffsetBottom": 12
                             }'>
                          <!-- Card -->
                          <div class="card">
                            <!-- Card Header -->
                            <div class="card-header text-center">
                              <div class="mb-3">
                                <img class="avatar avatar-xxl avatar-circle avatar-centered" src="../assets/img/160x160/img10.jpg" alt="图片描述内容">
                              </div>

                              <span class="d-block text-body small mb-3">Joined in 2017</span>

                              <a class="btn btn-outline-primary btn-transition" href="#">
                                <i class="bi-envelope me-2"></i> 发信息
                              </a>
                            </div>
                            <!-- End Card Header -->

                            <!-- Card Body -->
                            <div class="card-body">
                              <div class="row mb-7">
                                <div class="col-6 col-md-12 col-lg-6 mb-4">
                                  <!-- Icon Block -->
                                  <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                      <span class="avatar avatar-xs">
                                        <img class="avatar-img" src="../assets/svg/illustrations/review-rating-shield.svg" alt="图片描述内容">
                                      </span>
                                    </div>
                                    
                                    <div class="flex-grow-1 ms-3">
                                      <span class="text-body small">533 Reviews</span>
                                    </div>
                                  </div>
                                  <!-- End Icon Block -->
                                </div>
                                <!-- End Col -->

                                <div class="col-6 col-md-12 col-lg-6 mb-4">
                                  <!-- Icon Block -->
                                  <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                      <span class="avatar avatar-xs">
                                        <img class="avatar-img" src="../assets/svg/illustrations/star.svg" alt="图片描述内容">
                                      </span>
                                    </div>
                                    
                                    <div class="flex-grow-1 ms-3">
                                      <span class="text-body small">4.87 rating</span>
                                    </div>
                                  </div>
                                  <!-- End Icon Block -->
                                </div>
                                <!-- End Col -->

                                <div class="col-6 col-md-12 col-lg-6 mb-4 col-6 col-md-12 mb-lg-0">
                                  <!-- Icon Block -->
                                  <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                      <span class="avatar avatar-xs">
                                        <img class="avatar-img" src="../assets/svg/illustrations/medal.svg" alt="图片描述内容">
                                      </span>
                                    </div>
                                    
                                    <div class="flex-grow-1 ms-3">
                                      <span class="text-body small">名师</span>
                                    </div>
                                  </div>
                                  <!-- End Icon Block -->
                                </div>
                                <!-- End Col -->

                                <div class="col-6 col-md-12 col-lg-6">
                                  <!-- Icon Block -->
                                  <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                      <span class="avatar avatar-xs">
                                        <img class="avatar-img" src="../assets/svg/illustrations/add-file.svg" alt="图片描述内容">
                                      </span>
                                    </div>
                                    
                                    <div class="flex-grow-1 ms-3">
                                      <span class="text-body small">29 courses</span>
                                    </div>
                                  </div>
                                  <!-- End Icon Block -->
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->

                              <div class="mb-4">
                                <h4>关联账户</h4>
                              </div>

                              <div class="row">
                                <div class="col-6 col-md-12 col-lg-6 mb-4">
                                  <!-- Media -->
                                  <a class="d-flex" href="#">
                                    <div class="flex-shrink-0">
                                      <div class="icon icon-xs icon-soft-secondary">
                                        <i class="bi-github"></i>
                                      </div>
                                    </div>

                                    <div class="flex-grow-1 mt-n1 ms-3">
                                      <span class="d-block small fw-semi-bold">比安</span>
                                      <small class="d-block text-body">1.2k 粉丝</small>
                                    </div>
                                  </a>
                                  <!-- End Media -->
                                </div>
                                <!-- End Col -->

                                <div class="col-6 col-md-12 col-lg-6 mb-4">
                                  <!-- Media -->
                                  <a class="d-flex" href="#">
                                    <div class="flex-shrink-0">
                                      <div class="icon icon-xs icon-soft-secondary">
                                        <i class="bi-slack"></i>
                                      </div>
                                    </div>

                                    <div class="flex-grow-1 mt-n1 ms-3">
                                      <span class="d-block small fw-semi-bold">Slack</span>
                                      <small class="d-block text-body">4.5k 粉丝</small>
                                    </div>
                                  </a>
                                  <!-- End Media -->
                                </div>
                                <!-- End Col -->

                                <div class="col-6 col-md-12 col-lg-6 mb-0 mb-md-4 mb-lg-0">
                                  <!-- Media -->
                                  <a class="d-flex" href="#">
                                    <div class="flex-shrink-0">
                                      <div class="icon icon-xs icon-soft-secondary">
                                        <i class="bi-twitter"></i>
                                      </div>
                                    </div>

                                    <div class="flex-grow-1 mt-n1 ms-3">
                                      <span class="d-block small fw-semi-bold">Twitter</span>
                                      <small class="d-block text-body">2.7k 粉丝</small>
                                    </div>
                                  </a>
                                  <!-- End Media -->
                                </div>
                                <!-- End Col -->

                                <div class="col-6 col-md-12 col-lg-6">
                                  <!-- Media -->
                                  <a class="d-flex" href="#">
                                    <div class="flex-shrink-0">
                                      <div class="icon icon-xs icon-soft-secondary">
                                        <i class="bi-facebook"></i>
                                      </div>
                                    </div>

                                    <div class="flex-grow-1 mt-n1 ms-3">
                                      <span class="d-block small fw-semi-bold">Facebook</span>
                                      <small class="d-block text-body">3k 粉丝</small>
                                    </div>
                                  </a>
                                  <!-- End Media -->
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>
                            <!-- End Card Body -->
                            
                            <a class="card-footer text-body small text-center" href="#">
                              <i class="bi-flag me-1"></i> 举报该作者
                            </a>
                          </div>
                          <!-- End Card -->
                        </div>
                      </div>
                      <!-- End Sticky Block -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Content -->
              
            

              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF STICKY BLOCKS
                    // =======================================================
                    new HSStickyBlock('.js-sticky-block', {
                      targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
                    })
                  })()
                </script>
              
            

              
                <!-- Sidebar Example -->
                <div class="container content-space-2 content-space-lg-3">
                  <div class="row">
                    <div class="col-lg-3 mb-5 mb-lg-0">
                      <!-- Navbar -->
                      <div class="navbar-expand-lg">
                        <!-- Navbar Toggle -->
                        <div class="d-grid">
                          <button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg2" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg2">
                            <span class="d-flex justify-content-between align-items-center">
                              <span class="text-dark">Menu</span>

                              <span class="navbar-toggler-default">
                                <i class="bi-list"></i>
                              </span>

                              <span class="navbar-toggler-toggled">
                                <i class="bi-x"></i>
                              </span>
                            </span>
                          </button>
                        </div>
                        <!-- End Navbar Toggle -->

                        <!-- Navbar Collapse -->
                        <div id="navbarVerticalNavMenuEg2" class="collapse navbar-collapse">
                          <div class="d-grid gap-4 flex-grow-1">
                            <div class="d-grid">
                              <h5 class="dropdown-header">人工智能</h5>
                              <a class="dropdown-item d-flex justify-content-between" href="#">人工智能产品经理 <span class="badge text-dark border rounded-pill">30+</span></a>
                              <a class="dropdown-item" href="#">使用 Python 进行人工智能编程</a>
                              <a class="dropdown-item d-flex justify-content-between" href="#">计算机视觉 <span class="badge bg-success rounded-pill">New</span></a>
                              <a class="dropdown-item" href="#">深度学习</a>
                              <a class="dropdown-item d-flex justify-content-between" href="#">深度强化学习 <span class="badge text-dark border rounded-pill">18</span></a>
                            </div>

                            <div class="d-grid">
                              <h5 class="dropdown-header">数据科学</h5>
                              <a class="dropdown-item" href="#">Business Analytics</a>
                              <a class="dropdown-item d-flex justify-content-between" href="#">数据分析师 <span class="badge bg-success rounded-pill">New</span></a>
                              <a class="dropdown-item" href="#">Data Engineer</a>
                              <a class="dropdown-item d-flex justify-content-between" href="#">Data Scientist <span class="badge text-dark border rounded-pill">4</span></a>
                              <a class="dropdown-item" href="#">Data Visualization</a>
                              <a class="dropdown-item" href="#">商业预测分析</a>
                              <a class="dropdown-item" href="#">Programming for 数据科学</a>
                            </div>

                            <div class="d-grid">
                              <h5 class="dropdown-header">Programming and Development</h5>
                              <a class="dropdown-item" href="#">使用 Python 进行人工智能编程</a>
                              <a class="dropdown-item" href="#">Android Basics</a>
                              <a class="dropdown-item" href="#">Android Developer</a>
                              <a class="dropdown-item d-flex justify-content-between" href="#">Blockchain <span class="badge text-dark border rounded-pill">7</span></a>
                              <a class="dropdown-item" href="#">C++</a>
                              <a class="dropdown-item" href="#">Front End Web Developer</a>
                              <a class="dropdown-item" href="#">Java Developer</a>
                              <a class="dropdown-item d-flex justify-content-between" href="#">iOS <span class="badge bg-success rounded-pill">New</span></a>
                              <a class="dropdown-item" href="#">Intro to Programming</a>
                            </div>

                            <div class="d-grid">
                              <h5 class="dropdown-header">Cloud Computing</h5>
                              <a class="dropdown-item d-flex justify-content-between" href="#">Cloud Developer <span class="badge text-dark border rounded-pill">9+</span></a>
                              <a class="dropdown-item" href="#">Cloud Dev Ops Engineer</a>
                            </div>

                            <div class="d-grid">
                              <h5 class="dropdown-header">Business</h5>
                              <a class="dropdown-item" href="#">Business Analytics</a>
                              <a class="dropdown-item" href="#">数字营销</a>
                              <a class="dropdown-item" href="#">Marketing Analytics</a>
                            </div>

                            <div class="d-grid">
                              <h5 class="dropdown-header">Career</h5>
                              <a class="dropdown-item" href="#">求职</a>
                              <a class="dropdown-item" href="#">面试</a>
                            </div>
                          </div>
                        </div>
                        <!-- End Navbar Collapse -->
                      </div>
                      <!-- End Navbar -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Sidebar Example -->
              
            

              
                <div class="position-relative">
                  <!-- Sidebar -->
                  <div class="container content-space-t-md-2 position-md-absolute top-0 start-0 end-0">
                    <div class="row justify-content-end">
                      <div class="col-md-5 col-lg-4 position-relative zi-2 mb-7 mb-md-0">
                        <!-- Sticky Block -->
                        <div id="stickyBlockStartPointEg4">
                          <div class="js-sticky-block"
                               data-hs-sticky-block-options='{
                                 "parentSelector": "#stickyBlockStartPointEg4",
                                 "breakpoint": "md",
                                 "startPoint": "#stickyBlockStartPointEg4",
                                 "endPoint": "#stickyBlockEndPoint",
                                 "stickyOffsetTop": 12,
                                 "stickyOffsetBottom": 12
                               }'>
                            <!-- Card -->
                            <div class="card">
                              <div class="p-1">
                                <!-- Fancybox -->
                                <div class="bg-img-start text-center rounded-2 py-10 px-5" style="background-image: url(../assets/svg/components/card-4.svg);">
                                  <a class="video-player video-player-btn" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
                                    <span class="d-flex justify-content-center align-items-center">
                                      <span class="video-player-icon shadow-sm">
                                        <i class="bi-play-fill"></i>
                                      </span>
                                    </span>
                                    <span class="text-white">Preview this course</span>
                                  </a>
                                </div>
                                <!-- End Fancybox -->
                              </div>
                              
                              <!-- Card Body -->
                              <div class="card-body">
                                <div class="mb-3">
                                  <span class="card-title h2">128元</span>
                                  <span class="text-muted"><del>$114.99</del></span>
                                </div>

                                <div class="d-grid mb-2">
                                  <a class="btn btn-primary btn-transition" href="#">Buy now</a>
                                </div>

                                <div class="text-center mb-4">
                                  <p class="card-text small">30天退款保证</p>
                                </div>

                                <h4 class="card-title">本课程包括</h4>
                                  
                                <ul class="list-unstyled list-py-1">
                                  <li><i class="bi-camera-video nav-icon"></i> 46.5小时点播视频</li>
                                  <li><i class="bi-file-text nav-icon"></i> 77篇文章</li>
                                  <li><i class="bi-file-earmark-arrow-down nav-icon"></i>85下载资源</li>
                                  <li><i class="bi-stopwatch nav-icon"></i> 全天候使用</li>
                                  <li><i class="bi-phone nav-icon"></i> 通过手机和平板电脑访问</li>
                                  <li><i class="bi-award nav-icon"></i> 结业证书</li>
                                </ul>
                              </div>
                              <!-- End Card Body -->
                            </div>
                            <!-- End Card -->
                          </div>
                        </div>
                        <!-- End Sticky Block -->
                      </div>
                    </div>
                  </div>
                  <!-- End Sidebar -->
                </div>

                <!-- Sticky Block End Point -->
                <div id="stickyBlockEndPoint"></div>
              
            

              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF STICKY BLOCKS
                    // =======================================================
                    new HSStickyBlock('.js-sticky-block', {
                      targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
                    })
                  })()
                </script>
              
            

              
                <!-- Categories Section -->
                <div class="container content-space-2 content-space-lg-3">
                  <div class="row">
                    <div class="col-lg-3 mb-5 mb-lg-0">
                      <!-- Navbar -->
                      <div class="navbar-expand-lg">
                        <!-- Navbar Toggle -->
                        <div class="d-grid">
                          <button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg3" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg3">
                            <span class="d-flex justify-content-between align-items-center">
                              <span class="text-dark">Menu</span>

                              <span class="navbar-toggler-default">
                                <i class="bi-list"></i>
                              </span>

                              <span class="navbar-toggler-toggled">
                                <i class="bi-x"></i>
                              </span>
                            </span>
                          </button>
                        </div>
                        <!-- End Navbar Toggle -->

                        <!-- Navbar Collapse -->
                        <div id="navbarVerticalNavMenuEg3" class="collapse navbar-collapse">
                          <div id="shopNavCategories" class="nav nav-pills nav-vertical">
                            <!-- Collapse -->
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesTwo" aria-expanded="true" aria-controls="shopCategoriesTwo">
                              <i class="bi-tv nav-icon"></i> TV & home appliances
                            </a>

                            <div id="shopCategoriesTwo" class="nav-collapse collapse show" data-bs-parent="#shopNavCategories">
                              <div id="shopNavCategoriesTwo">
                                <!-- Collapse -->
                                <a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesTwoSubOne" aria-expanded="true" aria-controls="shopCategoriesTwoSubOne">
                                  TV & video devices
                                </a>

                                <div id="shopCategoriesTwoSubOne" class="nav-collapse collapse show" data-bs-parent="#shopNavCategoriesTwo">
                                  <a class="nav-link active" href="#">Accessories</a>
                                  <a class="nav-link" href="#">Kitchen</a>
                                  <a class="nav-link" href="#">Living room</a>
                                </div>
                                <!-- End Collapse -->
                                
                                <a class="nav-link" href="#">Cooling & air treatment</a>
                                <a class="nav-link" href="#">Vacuums & floor care</a>
                              </div>
                            </div>
                            <!-- End Collapse -->

                            <!-- Collapse -->
                            <a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesOne" aria-expanded="false" aria-controls="shopCategoriesOne">
                              <i class="bi-display nav-icon"></i> Electronic devices
                            </a>

                            <div id="shopCategoriesOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
                              <div id="shopNavCategoriesOne">
                                <!-- Collapse -->
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesOneSubOne" aria-expanded="false" aria-controls="shopCategoriesOneSubOne">
                                  Electronic accessories
                                </a>

                                <div id="shopCategoriesOneSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesOne">
                                  <a class="nav-link" href="#">Mobile accessories</a>
                                  <a class="nav-link" href="#">Portable audio</a>
                                  <a class="nav-link" href="#">Wearable</a>
                                  <a class="nav-link" href="#">Console accessories</a>
                                  <a class="nav-link" href="#">Camera accessories</a>
                                  <a class="nav-link" href="#">Computer accessories</a>
                                  <a class="nav-link" href="#">Storage</a>
                                  <a class="nav-link" href="#">Printers</a>
                                  <a class="nav-link" href="#">Computer components</a>
                                </div>
                                <!-- End Collapse -->

                                <a class="nav-link" href="#">Mobiles</a>
                                <a class="nav-link" href="#">Tablets</a>
                                <a class="nav-link" href="#">Laptops</a>
                                <a class="nav-link" href="#">Desktops</a>
                                <a class="nav-link" href="#">Gaming consoles</a>
                                <a class="nav-link" href="#">Car cameras</a>
                                <a class="nav-link" href="#">安全保护 cameras</a>
                                <a class="nav-link" href="#">Digital cameras</a>
                                <a class="nav-link" href="#">Gadgets</a>
                              </div>
                            </div>
                            <!-- End Collapse -->
                            
                            <a class="nav-link" href="#">
                              <i class="bi-shop nav-icon"></i> Clothing
                            </a>
                            
                            <!-- Collapse -->
                            <a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesThree" aria-expanded="false" aria-controls="shopCategoriesThree">
                              <i class="bi-heart nav-icon"></i> Health & beauty
                            </a>

                            <div id="shopCategoriesThree" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
                              <div id="shopNavCategoriesThree">
                                <a class="nav-link" href="#">Food supplements</a>
                                <a class="nav-link" href="#">Skincare</a>
                                <a class="nav-link" href="#">Makeup</a>

                                <!-- Collapse -->
                                <a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesThreeSubOne" aria-expanded="false" aria-controls="shopCategoriesThreeSubOne">
                                  Beauty tools
                                </a>

                                <div id="shopCategoriesThreeSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesThree">
                                  <a class="nav-link" href="#">男</a>
                                  <a class="nav-link" href="#">Women</a>
                                </div>
                                <!-- End Collapse -->
                                
                                <!-- Collapse -->
                                <a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesThreeSubTwo" aria-expanded="false" aria-controls="shopCategoriesThreeSubTwo">
                                  Medical supplies
                                </a>

                                <div id="shopCategoriesThreeSubTwo" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesThree">
                                  <a class="nav-link" href="#">男</a>
                                  <a class="nav-link" href="#">Women</a>
                                </div>
                                <!-- End Collapse -->
                              </div>
                            </div>
                            <!-- End Collapse -->

                            <a class="nav-link" href="#">
                              <i class="bi-earbuds nav-icon"></i> Accessories
                            </a>

                            <a class="nav-link" href="#">
                              <i class="bi-speaker-fill nav-icon"></i> Sound System
                            </a>

                            <a class="nav-link" href="#">
                              <i class="bi-smartwatch nav-icon"></i> Smartwatch
                            </a>

                            <!-- Collapse -->
                            <a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFour" aria-expanded="false" aria-controls="shopCategoriesFour">
                              <i class="bi-piggy-bank nav-icon"></i> Babies & toys
                            </a>

                            <div id="shopCategoriesFour" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
                              <div id="shopNavCategoriesFour">
                                <!-- Collapse -->
                                <a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFourSubOne" aria-expanded="false" aria-controls="shopCategoriesFourSubOne">
                                  Foods
                                </a>

                                <div id="shopCategoriesFourSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesFour">
                                  <a class="nav-link" href="#">Feeding</a>
                                  <a class="nav-link" href="#">Milk formula</a>
                                </div>
                                <!-- End Collapse -->
                                
                                <a class="nav-link" href="#">Diapering & potty</a>
                                <a class="nav-link" href="#">Nursery</a>
                                <a class="nav-link" href="#">Baby personal care</a>
                                <a class="nav-link" href="#">Clothing & accessories</a>
                                <a class="nav-link" href="#">Baby and & toys</a>
                              </div>
                            </div>
                            <!-- End Collapse -->

                            <a class="nav-link" href="#">
                              <i class="bi-tools nav-icon"></i> Tools
                            </a>

                            <a class="nav-link" href="#">
                              <i class="bi-eyeglasses nav-icon"></i> Glasses
                            </a>

                            <!-- Collapse -->
                            <a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFive" aria-expanded="false" aria-controls="shopCategoriesFive">
                              <i class="bi-truck nav-icon"></i> Automotive & motorcycles
                            </a>

                            <div id="shopCategoriesFive" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
                              <!-- Collapse -->
                              <a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFiveSubOne" aria-expanded="false" aria-controls="shopCategoriesFiveSubOne">
                                Automotive
                              </a>

                              <div id="shopCategoriesFiveSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesFour">
                                <a class="nav-link" href="#">Services & installations</a>
                                <a class="nav-link" href="#">Auto oils & fluids</a>
                              </div>
                              <!-- End Collapse -->
                              
                              <a class="nav-link" href="#">Interior accessories</a>
                              <a class="nav-link" href="#">Exterior accessories</a>
                              <a class="nav-link" href="#">Car audio</a>
                              <a class="nav-link" href="#">Auto care</a>
                              <a class="nav-link" href="#">Riding gear</a>
                            </div>
                            <!-- End Collapse -->
                          </div>
                        </div>
                        <!-- End Navbar Collapse -->
                      </div>
                      <!-- End Navbar -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Categories Section -->