# User Profile

## Component #1

- Preview
- HTML

#### About the author

### Christina Kray

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>About the author</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="Image Description">
                            </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">Christina Kray</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 -->

## Component #2

- Preview
- HTML

# Christina Kray

906 Posts
19.5k Followers
109 Following

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="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="Image Description">
                              <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">Christina Kray</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

- Preview
- HTML

# UX/UI Designer

Save this job Saved

- Capsule
- 2,391 reviews

- Posted 7 hours ago
- Oxford, England, United Kingdom
- Full time

                    <!-- 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="Image Description">
                              </a>
                            </div>

                            <div class="flex-grow-1 ms-sm-4">
                              <div class="row">
                                <div class="col">
                                  <h1 class="page-header-title h2">UX/UI Designer</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">Capsule</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 reviews</span>
                                  </a>
                                  <!-- End Rating -->
                                </li>
                              </ul>

                              <ul class="list-inline list-separator small text-body mb-2">
                                <li class="list-inline-item">Posted 7 hours ago</li>
                                <li class="list-inline-item">Oxford, England, United Kingdom</li>
                                <li class="list-inline-item">Full time</li>
                              </ul>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                      </div>
                    </div>
                    <!-- End Page Header -->

## Component #4

- Preview
- HTML
- JS

# Maria Williams

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

Contact me
Facebook Twitter LinkedIn

                    <!-- 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="Image Description">
                          </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">Maria Williams</h1>

                                <ul class="list-inline list-separator">
                                  <li class="list-inline-item">
                                    <i class="bi-geo-alt-fill text-primary me-1"></i> London, 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 -->
                    <script src="../assets/js/hs.bs-dropdown.js"></script>

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

## Component #5

- Preview
- HTML
- JS

# Dropbox

4.5 2,391 reviews
54 Open jobs Follow

- About
- Jobs +9
- Reviews
- Interview
- Locations

                    <!-- 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="Image Description">
                          </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="Image Description">
                          </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="Claimed profile"></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 reviews</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">Interview</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

- Preview
- HTML

### About the instructor

- 4.87 Instructor rating
- 1,533 reviews
- 23,912 students
- 29 courses

#### Nataly Gaga

Head of Data Science, Pierian Data Inc.

Nataly Gaga has a BS and MS in Mechanical Engineering from Santa Clara University and years of experience as a professional instructor and trainer for Data Science and programming. She has publications and patents in various fields such as microfluidics, materials science, and data science technologies.

                    <!-- Content -->
                    <div class="container content-space-1">
                      <div class="mb-4">
                        <h3>About the instructor</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="Image Description">
                          </div>

                          <ul class="list-unstyled list-py-1">
                            <li><i class="bi-star dropdown-item-icon"></i> 4.87 Instructor rating</li>
                            <li><i class="bi-chat-left-dots dropdown-item-icon"></i> 1,533 reviews</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">Nataly Gaga</a></h4>
                            <p class="fw-semi-bold">Head of Data Science, Pierian Data Inc.</p>
                          </div>

                          <p>Nataly Gaga has a BS and MS in Mechanical Engineering from Santa Clara University and years of experience as a professional instructor and trainer for Data Science and programming. She has publications and patents in various fields such as microfluidics, materials science, and data science technologies.</p>
                          <!-- End Info -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Content -->