# Sidebar Examples

## Component #1

- Preview
- HTML
- JS

### Newsletter

Get special offers on the latest developments from Front.

### Productivity

- ##### Here's how to dodge distractions

  Feb 08, 2020

- ##### Ideas to stay productive

  Feb 09, 2020

- ##### Classic design principles

  Feb 10, 2020

### Front culture

##### Announcing a free plan for small teams

##### Mapping the first family tree for Front office

##### Felling eyeing first major Classic win in 2018

### Tags

Business Adventure Community Announcements Tutorials Resources Classic Photography Interview

                    <!-- 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="Image Description">
                                      </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="Image Description">
                                      </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="Image Description">
                                      </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="#">Interview</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>

## Component #2

- Preview
- HTML

#### Natalie Curtis

natalie@example.com

Account

- Personal info
- Security
- Notifications 1
- Preferences

Shopping

- Your orders
- Wishlist 2

Billing

- Payments
- Address
- Teams +2 new users

- Log out

                    <!-- 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="Image Description">
                                      <img class="avatar-status avatar-lg-status" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="Verified user">
                                    </div>

                                    <h4 class="card-title mb-0">Natalie Curtis</h4>
                                    <p class="card-text small">natalie@example.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> Personal info
                                      </a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link " href="../account-security.html">
                                        <i class="bi-shield-shaded nav-icon"></i> Security
                                      </a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link " href="../account-notifications.html">
                                        <i class="bi-bell nav-icon"></i> Notifications
                                        <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> Preferences
                                      </a>
                                    </li>
                                  </ul>
                                  <!-- End List -->

                                  <span class="text-cap">Shopping</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> Your orders
                                      </a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link " href="../account-wishlist.html">
                                        <i class="bi-heart nav-icon"></i> Wishlist
                                        <span class="badge bg-soft-dark text-dark rounded-pill nav-link-badge">2</span>
                                      </a>
                                    </li>
                                  </ul>
                                  <!-- End List -->

                                  <span class="text-cap">Billing</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> Address
                                      </a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link " href="../account-teams.html">
                                        <i class="bi-people nav-icon"></i> Teams
                                        <span class="badge bg-soft-dark text-dark rounded-pill nav-link-badge">+2 new users</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> Log out
                                        </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 -->

## Component #3

- Preview
- HTML

##### Explore

All 30+ Top rated Featured Daily tools New 18 Channels

##### Categories

API management Code quality Code review Integration 4 File management Mobile Monitoring Publishing Security 20 File management 1

##### Filters

Free 9+ Free trial

##### Verification

Verified Unverified

                    <!-- 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="#">Security <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 -->

## Component #4

- Preview
- HTML
- JS

Joined in 2017 Send Message
533 Reviews
4.87 rating
Top teacher
29 courses

#### Connected accounts

Behance 1.2k followers
Slack 4.5k followers
Twitter 2.7k followers
Facebook 3k followers
Report this author

                    <!-- 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="Image Description">
                                  </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> Send Message
                                  </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="Image Description">
                                          </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="Image Description">
                                          </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="Image Description">
                                          </span>
                                        </div>

                                        <div class="flex-grow-1 ms-3">
                                          <span class="text-body small">Top teacher</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="Image Description">
                                          </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>Connected accounts</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">Behance</span>
                                          <small class="d-block text-body">1.2k followers</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 followers</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 followers</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 followers</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> Report this author
                                </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>

## Component #5

- Preview
- HTML

##### Artificial Intelligence

AI Product Manager 30+ AI Programming with Python Computer Vision New Deep Learning Deep Reinforcement Learning 18

##### Data Science

Business Analytics Data Analyst New Data Engineer Data Scientist 4 Data Visualization Predictive Analytics for Business Programming for Data Science

##### Programming and Development

AI Programming with Python Android Basics Android Developer Blockchain 7 C++ Front End Web Developer Java Developer iOS New Intro to Programming

##### Cloud Computing

Cloud Developer 9+ Cloud Dev Ops Engineer

##### Business

Business Analytics Digital Marketing Marketing Analytics

##### Career

Applying to Jobs Interviewing

                    <!-- 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">Artificial Intelligence</h5>
                                  <a class="dropdown-item d-flex justify-content-between" href="#">AI Product Manager <span class="badge text-dark border rounded-pill">30+</span></a>
                                  <a class="dropdown-item" href="#">AI Programming with Python</a>
                                  <a class="dropdown-item d-flex justify-content-between" href="#">Computer Vision <span class="badge bg-success rounded-pill">New</span></a>
                                  <a class="dropdown-item" href="#">Deep Learning</a>
                                  <a class="dropdown-item d-flex justify-content-between" href="#">Deep Reinforcement Learning <span class="badge text-dark border rounded-pill">18</span></a>
                                </div>

                                <div class="d-grid">
                                  <h5 class="dropdown-header">Data Science</h5>
                                  <a class="dropdown-item" href="#">Business Analytics</a>
                                  <a class="dropdown-item d-flex justify-content-between" href="#">Data Analyst <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="#">Predictive Analytics for Business</a>
                                  <a class="dropdown-item" href="#">Programming for Data Science</a>
                                </div>

                                <div class="d-grid">
                                  <h5 class="dropdown-header">Programming and Development</h5>
                                  <a class="dropdown-item" href="#">AI Programming with 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="#">Digital Marketing</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="#">Applying to Jobs</a>
                                  <a class="dropdown-item" href="#">Interviewing</a>
                                </div>
                              </div>
                            </div>
                            <!-- End Navbar Collapse -->
                          </div>
                          <!-- End Navbar -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Sidebar Example -->

## Component #6

- Preview
- HTML
- JS

Preview this course
$99.99 $114.99
Buy now

30-day money-back guarantee

#### This course includes

- 46.5 hours on-demand video
- 77 articles
- 85 downloadable resources
- Full time access
- Access on mobile and Tablet
- Certificate of Completion

                    <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">$99.99</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-day money-back guarantee</p>
                                    </div>

                                    <h4 class="card-title">This course includes</h4>

                                    <ul class="list-unstyled list-py-1">
                                      <li><i class="bi-camera-video nav-icon"></i> 46.5 hours on-demand video</li>
                                      <li><i class="bi-file-text nav-icon"></i> 77 articles</li>
                                      <li><i class="bi-file-earmark-arrow-down nav-icon"></i> 85 downloadable resources</li>
                                      <li><i class="bi-stopwatch nav-icon"></i> Full time access</li>
                                      <li><i class="bi-phone nav-icon"></i> Access on mobile and Tablet</li>
                                      <li><i class="bi-award nav-icon"></i> Certificate of Completion</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>

## Component #7

- Preview
- HTML

TV & home appliances
TV & video devices
Accessories Kitchen Living room
Cooling & air treatment Vacuums & floor care
Electronic devices
Electronic accessories
Mobile accessories Portable audio Wearable Console accessories Camera accessories Computer accessories Storage Printers Computer components
Mobiles Tablets Laptops Desktops Gaming consoles Car cameras Security cameras Digital cameras Gadgets
Clothing Health & beauty
Food supplements Skincare Makeup Beauty tools
Men Women
Medical supplies
Men Women
Accessories Sound System Smartwatch Babies & toys
Foods
Feeding Milk formula
Diapering & potty Nursery Baby personal care Clothing & accessories Baby and & toys
Tools Glasses Automotive & motorcycles
Automotive
Services & installations Auto oils & fluids
Interior accessories Exterior accessories Car audio Auto care Riding gear

                    <!-- 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="#">Security 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="#">Men</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="#">Men</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 -->