Component #1

预览
HTML

关于作者

法外狂徒-张三

Christina started his recruitment career on the agency side. Since then, she’s built a career helping customers get the most out of HR technology. She’s currently a Customer Success Specialist at Space and spends her time speaking to in-house recruiters all over the world - helping them solve their recruitment challenges, and get the most out of our talent acquisition software.

              
                <!-- User Profile -->
                <div class="container content-space-1">
                  <div class="row justify-content-lg-center">
                    <div class="col-lg-8">
                      <div class="mb-5">
                        <h4>关于作者</h4>
                      </div>

                      <!-- Media -->
                      <div class="d-sm-flex">
                        <div class="flex-shrink-0 mb-3 mb-sm-0">
                          <img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img9.jpg" alt="图片描述内容">
                        </div>

                        <div class="flex-grow-1 ms-sm-4">
                          <!-- Media -->
                          <div class="d-flex justify-content-between align-items-center mb-3">
                            <h3 class="mb-0">
                              <a class="text-dark" href="../blog-author-profile.html">法外狂徒-张三</a>
                            </h3>
                            <button type="button" class="btn btn-outline-primary btn-sm">
                              <i class="bi-person-plus-fill me-1"></i> Follow
                            </button>
                          </div>
                          <!-- End Media -->

                          <p>Christina started his recruitment career on the agency side. Since then, she’s built a career helping customers get the most out of HR technology. She’s currently a Customer Success Specialist at Space and spends her time speaking to in-house recruiters all over the world - helping them solve their recruitment challenges, and get the most out of our talent acquisition software.</p>
                        </div>
                      </div>
                      <!-- End Media -->
                    </div>
                  </div>
                </div>
                <!-- End User Profile -->

法外狂徒-张三

906 Posts

19.5k Followers

109 Following

              
                <!-- User Profile -->
                <div class="container content-space-1">
                  <div class="w-md-75 w-lg-65 mx-md-auto">
                    <!-- Media -->
                    <div class="d-sm-flex">
                      <div class="flex-shrink-0 mb-3 mb-sm-0">
                        <div class="avatar avatar-xxl avatar-circle">
                          <img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="图片描述内容">
                          <img class="bg-white position-absolute bottom-0 end-0 rounded-circle p-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Icon" width="32" height="32" title="Top Writer">
                        </div>
                      </div>

                      <div class="flex-grow-1 ms-sm-4">
                        <!-- Media -->
                        <div class="d-flex justify-content-between align-items-center mb-3">
                          <h1 class="h2 mb-0">法外狂徒-张三</h1>
                          
                          <button type="button" class="btn btn-outline-primary btn-sm">
                            <i class="bi-person-plus-fill me-1"></i> Follow
                          </button>
                        </div>
                        <!-- End Media -->

                        <div class="row mb-3">
                          <div class="col-auto">
                            <span class="h6">906</span>
                            <span class="ms-1">Posts</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <span class="h6">19.5k</span>
                            <span class="ms-1">Followers</span>
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <span class="h6">109</span>
                            <span class="ms-1">Following</span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <p>Christina started his recruitment career on the agency side. Since then, she’s built a career helping customers get the most out of HR technology. She’s currently a Customer Success Specialist at Space and spends her time speaking to in-house recruiters all over the world - helping them solve their recruitment challenges, and get the most out of our talent acquisition software.</p>
                      </div>
                    </div>
                    <!-- End Media -->
                  </div>
                </div>
                <!-- End User Profile -->

Component #3

预览
HTML

Save this job Saved

发表于 7 小时前
牛津, England, United Kingdom
全职

              
                <!-- Page Header -->
                <div class="container content-space-1">
                  <div class="w-lg-75 mx-lg-auto">
                    <div class="page-header">
                      <!-- Media -->
                      <div class="d-sm-flex mb-3">
                        <div class="flex-shrink-0 mb-2 mb-sm-0">
                          <a href="../demo-jobs/employer.html">
                            <img class="avatar avatar-lg mb-3" src="../assets/svg/brands/capsule-icon.svg" alt="图片描述内容">
                          </a>
                        </div>
                        
                        <div class="flex-grow-1 ms-sm-4">
                          <div class="row">
                            <div class="col">
                              <h1 class="page-header-title h2">UX/UI 设计er</h1>
                            </div>
                            <!-- End Col -->

                            <div class="col-auto">
                              <!-- Checkbbox Bookmark -->
                              <div class="form-check form-check-bookmark">
                                <input class="form-check-input" type="checkbox" value="" id="jobsPageHeaderBookmarkCheck">
                                <label class="form-check-label" for="jobsPageHeaderBookmarkCheck">
                                  <span class="form-check-bookmark-default">
                                    <i class="bi-star me-1"></i> Save this job
                                  </span>
                                  <span class="form-check-bookmark-active">
                                    <i class="bi-star-fill me-1"></i> Saved
                                  </span>
                                </label>
                              </div>
                              <!-- End Checkbbox Bookmark -->
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->

                          <ul class="list-inline list-separator d-flex align-items-center mb-2">
                            <li class="list-inline-item">
                              <a class="link" href="../demo-jobs/employer.html">胶囊</a>
                            </li>
                            
                            <li class="list-inline-item">
                              <!-- Rating -->
                              <a class="d-flex gap-1" href="../demo-jobs/employer.html">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                <img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="14">
                                <span class="ms-1">2,391评论</span>
                              </a>
                              <!-- End Rating -->
                            </li>
                          </ul>

                          <ul class="list-inline list-separator small text-body mb-2">
                            <li class="list-inline-item">发表于 7 小时前</li>
                            <li class="list-inline-item">牛津, England, United Kingdom</li>
                            <li class="list-inline-item">全职</li>
                          </ul>
                        </div>
                      </div>
                      <!-- End Media -->
                    </div>
                  </div>
                </div>
                <!-- End Page Header -->

Component #4

伦敦, UK
maria@gmail.com
+1 (062) 109-9222

Contact me

              
                <!-- Page Header -->
                <div class="container content-space-1">
                  <div class="page-header">
                    <!-- Media -->
                    <div class="d-flex align-items-lg-center">
                      <div class="flex-shrink-0">
                        <img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img9.jpg" alt="图片描述内容">
                      </div>
                      
                      <div class="flex-grow-1 ms-4">
                        <div class="row">
                          <div class="col-lg mb-3 mb-lg-0">
                            <h1 class="page-header-title h2">马克·威廉姆斯</h1>

                            <ul class="list-inline list-separator">
                              <li class="list-inline-item">
                                <i class="bi-geo-alt-fill text-primary me-1"></i> 伦敦, UK
                              </li>
                              <li class="list-inline-item">maria@gmail.com</li>
                              <li class="list-inline-item">+1 (062) 109-9222</li>
                            </ul>
                          </div>
                          <!-- End Col -->
                          
                          <div class="col-lg-auto align-self-lg-end text-lg-right">
                            <div class="d-flex gap-2">
                              <a class="btn btn-primary btn-sm" href="#">
                                <i class="bi-envelope-fill me-1"></i> Contact me
                              </a>

                              <!-- Dropdown -->
                              <div class="dropdown">
                                <a class="btn btn-outline-primary btn-sm btn-icon" href="#" id="employeeProfileShareDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-dropdown-animation>
                                  <i class="bi-share-fill"></i>
                                </a>

                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="employeeProfileShareDropdown">
                                  <a class="dropdown-item" href="#">
                                    <i class="bi-facebook dropdown-item-icon"></i> Facebook
                                  </a>
                                  <a class="dropdown-item" href="#">
                                    <i class="bi-twitter dropdown-item-icon"></i> Twitter
                                  </a>
                                  <a class="dropdown-item" href="#">
                                    <i class="bi-linkedin dropdown-item-icon"></i> LinkedIn
                                  </a>
                                </div>
                              </div>
                              <!-- End Dropdown -->
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </div>
                    <!-- End Media -->
                  </div>
                </div>
                <!-- End Page Header -->

              
                <!-- JS Front -->

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF BOOTSTRAP DROPDOWN
                    // =======================================================
                    HSBsDropdown.init()
                  })()
                </script>

Component #5

              
                <!-- Page Header -->
                <div class="container pt-4">
                  <div class="page-header">
                    <!-- Profile Cover -->
                    <div class="profile-cover">
                      <div class="profile-cover-img-wrapper">
                        <img class="profile-cover-img" src="../assets/img/1920x400/img1.jpg" alt="图片描述内容">
                      </div>
                    </div>
                    <!-- End Profile Cover -->

                    <!-- Media -->
                    <div class="d-sm-flex align-items-lg-center pt-1 px-3 pb-3">
                      <div class="flex-shrink-0 mb-2 mb-sm-0 me-4">
                        <img class="avatar avatar-xl profile-cover-avatar shadow-sm" src="../assets/svg/brands/dropbox-icon.svg" alt="图片描述内容">
                      </div>
                      
                      <div class="flex-grow-1">
                        <div class="row">
                          <div class="col-md mb-3 mb-md-0">
                            <h1 class="h2 mb-1">Dropbox <img class="avatar avatar-xs" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-bs-toggle="tooltip" data-bs-placement="top" title="已声明的个人资料"></h1>

                            <!-- Rating -->
                            <div class="d-flex gap-1">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                              <img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="14">
                              <span class="fw-semi-bold text-dark ms-1">4.5</span>
                              <span class="ms-1">2,391评论</span>
                            </div>
                            <!-- End Rating -->
                          </div>
                          <!-- End Col -->
                          
                          <div class="col-md-auto align-self-md-end">
                            <div class="d-grid d-sm-flex gap-2">
                              <a class="btn btn-primary" href="#">54 Open jobs</a>
                              <a class="btn btn-outline-primary" href="#">
                                <i class="bi-person-plus-fill me-1"></i> Follow
                              </a>
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </div>
                    <!-- End Media -->

                    <!-- Nav Scroller -->
                    <div id="pageHeaderTabParent">
                      <div class="js-nav-scroller js-sticky-block hs-nav-scroller-horizontal bg-white zi-2"
                           data-hs-sticky-block-options='{
                           "parentSelector": "#pageHeaderTabParent",
                           "breakpoint": "lg",
                           "startPoint": "#pageHeaderTabParent",
                           "endPoint": "#pageHeaderTabEndPoint"
                         }'>
                        <span class="hs-nav-scroller-arrow-prev" style="display: none;">
                          <a class="hs-nav-scroller-arrow-link" href="javascript:;">
                            <i class="bi-chevron-left"></i>
                          </a>
                        </span>

                        <span class="hs-nav-scroller-arrow-next" style="display: none;">
                          <a class="hs-nav-scroller-arrow-link" href="javascript:;">
                            <i class="bi-chevron-right"></i>
                          </a>
                        </span>

                        <!-- Nav -->
                        <ul class="js-scroll-nav nav nav-tabs page-header-tabs bg-white" id="pageHeaderTab" role="tablist"
                            data-hs-scroll-nav-options='{
                            "customOffsetTop": 40
                          }'>
                          <li class="nav-item active">
                            <a class="nav-link" href="#about-section">About</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#jobs-section">Jobs <span class="badge bg-info rounded-pill ms-1">+9</span></a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#reviews-section">Reviews</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#interview-section">面试</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#locations-section">Locations</a>
                          </li>
                        </ul>
                        <!-- End Nav -->
                      </div>
                    </div>
                    <!-- End Nav Scroller -->
                  </div>
                </div>
                <!-- End Page Header -->

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

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SCROLLSPY
                    // =======================================================
                    new bootstrap.ScrollSpy(document.body, {
                      target: '#pageHeaderTab',
                      offset: 90
                    })

                    new HSScrollspy('#pageHeaderTab', {
                      scrollOffset: -20
                    })
                  })()
                </script>

Component #6

预览
HTML

关于导师

4.87 导师评分
1,533评论
23,912 学生
29 课程

娜塔莉·加加

缪斯女神的资料公司. 数据科学主管

娜塔莉·加加拥有圣克拉拉大学机械工程学士学位和硕士学位，并拥有多年数据科学和编程专业讲师和培训师的经验。她在微流体、材料科学和数据科学技术等各个领域拥有出版物和专利。

              
                <!-- Content -->
                <div class="container content-space-1">
                  <div class="mb-4">
                    <h3>关于导师</h3>
                  </div>

                  <div class="row">
                    <div class="col-sm-4 mb-4 mb-sm-0">
                      <div class="mb-3">
                        <img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img10.jpg" alt="图片描述内容">
                      </div>

                      <ul class="list-unstyled list-py-1">
                        <li><i class="bi-star dropdown-item-icon"></i> 4.87 导师评分</li>
                        <li><i class="bi-chat-left-dots dropdown-item-icon"></i> 1,533评论</li>
                        <li><i class="bi-person dropdown-item-icon"></i> 23,912 students</li>
                        <li><i class="bi-play-circle dropdown-item-icon"></i> 29 courses</li>
                      </ul>
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-8">
                      <!-- Info -->
                      <div class="mb-2">
                        <h4 class="mb-1"><a href="../demo-course/author-profile.html">娜塔莉·加加</a></h4>
                        <p class="fw-semi-bold">Pierian Data Inc. 数据科学主管</p>
                      </div>

                      <p>娜塔莉·加加拥有圣克拉拉大学机械工程学士学位和硕士学位，并拥有多年数据科学和编程专业讲师和培训师的经验。 她在微流体、材料科学和数据科学技术等各个领域拥有出版物和专利。</p>
                      <!-- End Info -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Content -->