Sidebar examples
Component #1
Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.
- Industry
- E-commerce
- Location
- Seattle, Washington, U.S.
- Goals
- Build campaigns that bring in quality leads who convert from free to paid.
- Type
- B2C
Products used
-
-
Amazon wallet
Send targeted currencies to the right people at the right time.
-
-
Amazon Fire TV
Amazon Fire TV is a digital media player and its microconsole remote.
<!-- Content Section -->
<div class="container space-2 space-lg-0">
<div class="row">
<div id="stickyBlockStartPoint" class="col-lg-4 mt-lg-n11 mb-7 mb-lg-0">
<!-- Sidebar Content -->
<div class="js-sticky-block card bg-white"
data-hs-sticky-block-options='{
"parentSelector": "#stickyBlockStartPoint",
"startPoint": "#stickyBlockStartPoint",
"endPoint": "#stickyBlockEndPoint",
"stickyOffsetTop": 24,
"stickyOffsetBottom": 24
}'>
<div class="card-header text-center py-5">
<div class="w-100 max-w-27rem mx-auto">
<img class="img-fluid" src="../assets/svg/clients-logo/amazon-original.svg" alt="Image Description">
</div>
</div>
<div class="card-body">
<div class="border-bottom pb-2 mb-4">
<dl class="row font-size-1">
<dt class="col-sm-4 text-dark">Industry</dt>
<dd class="col-sm-8 text-body">E-commerce</dd>
</dl>
<dl class="row font-size-1">
<dt class="col-sm-4 text-dark">Location</dt>
<dd class="col-sm-8 text-body">Seattle, Washington, U.S.</dd>
</dl>
<dl class="row font-size-1">
<dt class="col-sm-4 text-dark">Goals</dt>
<dd class="col-sm-8 text-body">Build campaigns that bring in quality leads who convert from free to paid.</dd>
</dl>
<dl class="row font-size-1">
<dt class="col-sm-4 text-dark">Type</dt>
<dd class="col-sm-8 text-body">B2C</dd>
</dl>
</div>
<div class="mb-3">
<h4>Products used</h4>
</div>
<dl class="row font-size-1">
<dt class="col-sm-4 mb-2 mb-sm-0">
<figure class="max-w-8rem w-100">
<img class="img-fluid" src="../assets/svg/icons/icon-34.svg" alt="SVG">
</figure>
</dt>
<dd class="col-sm-8 text-body">
<h4 class="font-size-1 mb-0">Amazon wallet</h4>
<p class="font-size-1 mb-0">Send targeted currencies to the right people at the right time.</p>
</dd>
</dl>
<dl class="row font-size-1 mb-0">
<dt class="col-sm-4 mb-2 mb-sm-0">
<figure class="max-w-8rem w-100">
<img class="img-fluid" src="../assets/svg/icons/icon-41.svg" alt="SVG">
</figure>
</dt>
<dd class="col-sm-8 text-body">
<h4 class="font-size-1 mb-0">Amazon Fire TV</h4>
<p class="font-size-1 mb-0">Amazon Fire TV is a digital media player and its microconsole remote.</p>
</dd>
</dl>
</div>
</div>
<!-- End Sidebar Content -->
</div>
</div>
</div>
<!-- End Content Section -->
<!-- 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>
$(document).on('ready', function () {
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
$('.js-sticky-block').each(function () {
var stickyBlock = new HSStickyBlock($(this)).init();
});
});
</script>
Component #2
Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.
Newsletter
Get special offers on the latest developments from Front.
Front culture
<!-- Blogs Section -->
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="mb-7">
<div class="mb-3">
<h3>Newsletter</h3>
</div>
<!-- Form -->
<form class="js-validate mb-2">
<label class="sr-only" for="subscribeSr">Subscribe</label>
<div class="input-group input-group-flush mb-3">
<input type="email" class="form-control form-control-sm" name="email" id="subscribeSr" placeholder="Your email" aria-label="Your email" required
data-msg="Please enter a valid email address.">
</div>
<button type="submit" class="btn btn-sm btn-primary btn-block">Subscribe</button>
</form>
<!-- End Form -->
<p class="small">Get special offers on the latest developments from Front.</p>
</div>
<div class="mb-7">
<div class="mb-3">
<h3>Productivity</h3>
</div>
<!-- Blog -->
<article class="mb-3">
<a class="card card-frame p-3" href="#">
<div class="media align-items-center">
<div class="media-body mr-2">
<h4 class="h6 mb-0">Here's how to dodge distractions</h4>
<span class="d-block font-size-1 text-body">Feb 08, 2020</span>
</div>
<i class="fas fa-angle-right"></i>
</div>
</a>
</article>
<!-- End Blog -->
<!-- Blog -->
<article class="mb-3">
<a class="card card-frame p-3" href="#">
<div class="media align-items-center">
<div class="media-body mr-2">
<h4 class="h6 mb-0">Ideas to stay productive</h4>
<span class="d-block font-size-1 text-body">Feb 09, 2020</span>
</div>
<i class="fas fa-angle-right"></i>
</div>
</a>
</article>
<!-- End Blog -->
<!-- Blog -->
<article class="mb-3">
<a class="card card-frame p-3" href="#">
<div class="media align-items-center">
<div class="media-body mr-2">
<h4 class="h6 mb-0">Classic design principles</h4>
<span class="d-block font-size-1 text-body">Feb 10, 2020</span>
</div>
<i class="fas fa-angle-right"></i>
</div>
</a>
</article>
<!-- End Blog -->
</div>
<!-- Sticky Block Start Point -->
<div id="stickyBlockStartPoint"></div>
<div class="js-sticky-block"
data-hs-sticky-block-options='{
"parentSelector": "#stickyBlockStartPoint",
"breakpoint": "lg",
"startPoint": "#stickyBlockStartPoint",
"endPoint": "#stickyBlockEndPoint",
"stickyOffsetTop": 24,
"stickyOffsetBottom": 24
}'>
<div class="mb-7">
<div class="mb-3">
<h3>Front culture</h3>
</div>
<!-- Blog -->
<article class="mb-5">
<div class="media align-items-center text-inherit">
<div class="avatar avatar-lg mr-3">
<img class="avatar-img" src="../assets/img/320x320/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0"><a class="text-inherit" href="#">Announcing a free plan for small teams</a></h4>
</div>
</div>
</article>
<!-- End Blog -->
<!-- Blog -->
<article class="mb-5">
<div class="media align-items-center text-inherit">
<div class="avatar avatar-lg mr-3">
<img class="avatar-img" src="../assets/img/320x320/img10.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0"><a class="text-inherit" href="#">Mapping the first family tree for Front office</a></h4>
</div>
</div>
</article>
<!-- End Blog -->
<!-- Blog -->
<article class="mb-5">
<div class="media align-items-center text-inherit">
<div class="avatar avatar-lg mr-3">
<img class="avatar-img" src="../assets/img/320x320/img9.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0"><a class="text-inherit" href="#">Felline eyeing first major Classic win in 2018</a></h4>
</div>
</div>
</article>
<!-- End Blog -->
</div>
<div class="mb-7">
<div class="mb-3">
<h3>Tags</h3>
</div>
<a class="btn btn-xs btn-soft-secondary mb-1" href="#">Business</a>
<a class="btn btn-xs btn-soft-secondary mb-1" href="#">Adventure</a>
<a class="btn btn-xs btn-soft-secondary mb-1" href="#">Community</a>
<a class="btn btn-xs btn-soft-secondary mb-1" href="#">Announcements</a>
<a class="btn btn-xs btn-soft-secondary mb-1" href="#">Tutorials</a>
<a class="btn btn-xs btn-soft-secondary mb-1" href="#">Resources</a>
<a class="btn btn-xs btn-soft-secondary mb-1" href="#">Classic</a>
<a class="btn btn-xs btn-soft-secondary mb-1" href="#">Photography</a>
<a class="btn btn-xs btn-soft-secondary mb-1" href="#">Interview</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Blogs Section -->
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<script src="./node_modules/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="./assets/js/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
$('.js-sticky-block').each(function () {
var stickyBlock = new HSStickyBlock($(this)).init();
});
// INITIALIZATION OF FORM VALIDATION
// =======================================================
$('.js-validate').each(function () {
var validation = $.HSCore.components.HSValidation.init($(this));
});
});
</script>
Component #3
<!-- App Description Section -->
<div class="container">
<!-- Content -->
<div class="row">
<div class="col-md-4 col-lg-3 mb-9 mb-md-0">
<!-- App Info -->
<div class="mr-lg-2">
<div class="mb-7">
<div class="text-center mx-auto mb-3">
<img class="img-fluid" src="../assets/img/160x160/img23.png" alt="Image Description" width="130">
</div>
<a class="btn btn-sm btn-block btn-primary transition-3d-hover" href="#">Install Now</a>
</div>
<div class="mb-md-7">
<h1 class="h4">Categories</h1>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Featured</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">File management</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Productivity</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Essential apps</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Free</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Paid</a></span>
<span class="d-inline-block mr-1 mb-2"><a class="btn btn-xs btn-soft-secondary" href="#">Google</a></span>
</div>
<div class="d-none d-md-block mb-7">
<h2 class="h4">Developer</h2>
<a class="d-inline-block text-body" href="#">
<div class="media align-items-center">
<div class="avatar avatar-xs mr-3">
<img class="avatar-img" src="../assets/img/160x160/img23.png" alt="Image Description">
</div>
<div class="media-body">
Google Drive
</div>
</div>
</a>
</div>
<div class="d-none d-md-block mb-7">
<h2 class="h4">Website</h2>
<a href="#">https://www.google.com/drive/</a>
</div>
<div class="d-none d-md-block mb-7">
<h3 class="h4">Developer links</h3>
<ul class="list-unstyled font-size-1">
<li><a class="text-body" href="#"><i class="fas fa-angle-right mr-1"></i> Support</a></li>
<li><a class="text-body" href="#"><i class="fas fa-angle-right mr-1"></i> Documentation</a></li>
<li><a class="text-body" href="#"><i class="fas fa-angle-right mr-1"></i> Privacy Policy</a></li>
</ul>
</div>
<div class="d-none d-md-block">
<a class="small text-body" href="#"><i class="far fa-flag mr-1"></i> Report abuse</a>
</div>
</div>
<!-- End App Info -->
</div>
</div>
<!-- End Content -->
</div>
<!-- End App Description Section -->
Component #4
Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.
$59.00
$114.99
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
<!-- Sidebar Content Section -->
<div class="container position-md-absolute top-0 right-0 left-0">
<div class="row">
<div id="stickyBlockStartPoint" class="col-md-5 col-lg-4 position-relative z-index-2">
<div class="js-sticky-block card card-bordered"
data-hs-sticky-block-options='{
"parentSelector": "#stickyBlockStartPoint",
"breakpoint": "md",
"startPoint": "#stickyBlockStartPoint",
"endPoint": "#stickyBlockEndPoint",
"stickyOffsetTop": 12,
"stickyOffsetBottom": 12
}'>
<div class="position-relative p-1">
<!-- Video Popup -->
<a class="js-fancybox video-player" href="javascript:;"
data-hs-fancybox-options='{
"src": "//youtube.com/0qisGSwZym4",
"caption": "Front - Responsive Website Template",
"speed": 700,
"buttons": ["fullScreen", "close"],
"youtube": {
"autoplay": 1
}
}'>
<img class="card-img-top" src="../assets/svg/components/graphics-1.svg" alt="Image Description">
<span class="video-player-btn video-player-centered text-center">
<span class="video-player-icon mb-2">
<i class="fa fa-play"></i>
</span>
<span class="d-block text-center text-white">
Preview this course
</span>
</span>
</a>
<!-- End Video Popup -->
</div>
<div class="card-body">
<div class="mb-3">
<span class="h2 text-lh-sm mr-1 mb-0">$59.00</span>
<span class="lead text-muted text-lh-sm"><del>$114.99</del></span>
</div>
<div class="mb-2">
<a class="btn btn-block btn-primary transition-3d-hover" href="#">Buy Now</a>
</div>
<div class="text-center mb-4">
<p class="small">30-day money-back guarantee</p>
</div>
<h2 class="h4">This course includes</h2>
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-2">
<div class="min-w-3rem text-center mr-3">
<i class="fa fa-video"></i>
</div>
<div class="media-body">
46.5 hours on-demand video
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-2">
<div class="min-w-3rem text-center mr-3">
<i class="fa fa-file"></i>
</div>
<div class="media-body">
77 articles
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-2">
<div class="min-w-3rem text-center mr-3">
<i class="fa fa-file-download"></i>
</div>
<div class="media-body">
85 downloadable resources
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-2">
<div class="min-w-3rem text-center mr-3">
<i class="fa fa-infinity"></i>
</div>
<div class="media-body">
Full time access
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-2">
<div class="min-w-3rem text-center mr-3">
<i class="fa fa-mobile"></i>
</div>
<div class="media-body">
Access on mobile and Tablet
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media text-body font-size-1 mb-2">
<div class="min-w-3rem text-center mr-3">
<i class="fa fa-certificate"></i>
</div>
<div class="media-body">
Certificate of Completion
</div>
</div>
<!-- End Icon Block -->
</div>
<!-- Button trigger modal -->
<a class="card-footer text-center font-weight-bold py-3" data-toggle="modal" data-target="#copyToClipboardModal" href="javascript:;">
<i class="fa fa-share mr-1"></i>
Share
</a>
<!-- End Button trigger modal -->
</div>
</div>
</div>
</div>
<!-- End Sidebar Content Section -->
<!-- Sticky Block End Point -->
<div id="stickyBlockEndPoint"></div>
<!-- Copy to Clipboard Modal -->
<div class="modal fade" id="copyToClipboardModal" tabindex="-1" role="dialog" aria-labelledby="copyToClipboardModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 id="copyToClipboardModalTitle" class="mb-0">Share this course</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<svg aria-hidden="true" class="mb-0" width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<form>
<!-- Clipboard -->
<div class="input-group mb-4">
<input id="copyToClipboard" type="text" class="form-control" value="http://www.front-course.com/share/3874/">
<div class="input-group-append">
<a class="js-clipboard input-group-text" href="javascript:;"
data-hs-clipboard-options='{
"contentTarget": "#copyToClipboard",
"successText": "Copied!",
"container": "#copyToClipboardModal"
}'>Copy</a>
</div>
</div>
<!-- End Clipboard -->
</form>
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-outline-secondary" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-outline-secondary" href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-outline-secondary" href="#">
<i class="fab fa-medium-m"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-outline-secondary" href="#">
<i class="fa fa-envelope"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-outline-secondary" href="#">
<i class="fab fa-slack"></i>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- End Copy to Clipboard Modal -->
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<script src="./assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script>
<script src="./node_modules/clipboard/dist/clipboard.min.js"></script>
<!-- JS Front -->
<script src="./assets/js/hs.fancybox.js"></script>
<script src="./assets/js/hs.clipboard.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF FANCYBOX
// =======================================================
$('.js-fancybox').each(function () {
var fancybox = $.HSCore.components.HSFancyBox.init($(this));
});
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
$('.js-sticky-block').each(function () {
var stickyBlock = new HSStickyBlock($(this)).init();
});
// INITIALIZATION OF CLIPBOARD
// =======================================================
$('.js-clipboard').each(function() {
var clipboard = $.HSCore.components.HSClipboard.init(this);
});
});
</script>
Component #5
Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.
533 Reviews
4.87 rating
Top teacher
29 courses
Connected accounts
<!-- Profile Section -->
<div class="container">
<div class="row">
<div id="stickyBlockStartPoint" class="col-md-5 col-lg-4 mb-7 mb-md-0">
<div class="js-sticky-block card card-bordered p-4"
data-hs-sticky-block-options='{
"parentSelector": "#stickyBlockStartPoint",
"breakpoint": "md",
"startPoint": "#stickyBlockStartPoint",
"endPoint": "#stickyBlockEndPoint",
"stickyOffsetTop": 12,
"stickyOffsetBottom": 12
}'>
<div class="text-center">
<!-- User Content -->
<img class="img-fluid rounded-circle mx-auto" src="../assets/img/160x160/img2.jpg" alt="Image Description" width="120" height="120">
<span class="d-block text-body font-size-1 mt-3">Joined in 2017</span>
<div class="mt-3">
<a class="btn btn-sm btn-outline-primary transition-3d-hover" href="#">
<i class="far fa-envelope mr-2"></i>
Send Message
</a>
</div>
<!-- End User Content -->
</div>
<div class="border-top pt-4 mt-4">
<div class="row">
<div class="col-6 col-md-12 col-lg-6 mb-4">
<!-- Icon Block -->
<div class="media">
<div class="d-flex">
<span class="avatar avatar-xs mr-3">
<img class="avatar-img" src="../assets/svg/illustrations/review-rating-shield.svg" alt="Image Description">
</span>
<span class="text-body font-size-1 mt-1">533 Reviews</span>
</div>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-12 col-lg-6 mb-4">
<!-- Icon Block -->
<div class="d-flex">
<span class="avatar avatar-xs mr-3">
<img class="avatar-img" src="../assets/svg/illustrations/star.svg" alt="Image Description">
</span>
<span class="text-body font-size-1 mt-1">4.87 rating</span>
</div>
<!-- End Icon Block -->
</div>
<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">
<span class="avatar avatar-xs mr-3">
<img class="avatar-img" src="../assets/svg/illustrations/medal.svg" alt="Image Description">
</span>
<span class="text-body font-size-1 mt-1">Top teacher</span>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-md-12 col-lg-6">
<!-- Icon Block -->
<div class="d-flex">
<span class="avatar avatar-xs mr-3">
<img class="avatar-img" src="../assets/svg/illustrations/add-file.svg" alt="Image Description">
</span>
<span class="text-body font-size-1 mt-1">29 courses</span>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
<div class="border-top pt-4 mt-4">
<h1 class="h4 mb-4">Connected accounts</h1>
<div class="row">
<div class="col-6 col-md-12 col-lg-6 mb-4">
<!-- Social Profiles -->
<a class="media" href="#">
<div class="icon icon-xs icon-soft-secondary mr-3">
<i class="fab fa-github"></i>
</div>
<div class="media-body">
<span class="d-block font-size-1 font-weight-bold">Behance</span>
<small class="d-block text-body">1.2k followers</small>
</div>
</a>
<!-- End Social Profiles -->
</div>
<div class="col-6 col-md-12 col-lg-6 mb-4">
<!-- Social Profiles -->
<a class="media" href="#">
<div class="icon icon-xs icon-soft-secondary mr-3">
<i class="fab fa-slack"></i>
</div>
<div class="media-body">
<span class="d-block font-size-1 font-weight-bold">Slack</span>
<small class="d-block text-body">4.5k followers</small>
</div>
</a>
<!-- End Social Profiles -->
</div>
<div class="col-6 col-md-12 col-lg-6 mb-0 mb-md-4 mb-lg-0">
<!-- Social Profiles -->
<a class="media" href="#">
<div class="icon icon-xs icon-soft-secondary mr-3">
<i class="fab fa-twitter"></i>
</div>
<div class="media-body">
<span class="d-block font-size-1 font-weight-bold">Twitter</span>
<small class="d-block text-body">2.7k followers</small>
</div>
</a>
<!-- End Social Profiles -->
</div>
<div class="col-6 col-md-12 col-lg-6">
<!-- Social Profiles -->
<a class="media" href="#">
<div class="icon icon-xs icon-soft-secondary mr-3">
<i class="fab fa-facebook-f"></i>
</div>
<div class="media-body">
<span class="d-block font-size-1 font-weight-bold">Facebook</span>
<small class="d-block text-body">3k followers</small>
</div>
</a>
<!-- End Social Profiles -->
</div>
</div>
</div>
<div class="border-top text-center pt-4 mt-4">
<a class="text-body small" href="#">
<i class="far fa-flag mr-1"></i> Report this author
</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Profile Section -->
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
$('.js-sticky-block').each(function () {
var stickyBlock = new HSStickyBlock($(this)).init();
});
});
</script>
Component #6
<!-- Apps Section -->
<div class="container">
<div class="row">
<div class="col-lg-3 mb-5 mb-lg-0">
<div class="mr-lg-3">
<!-- Navbar -->
<div class="navbar-expand-lg navbar-expand-lg-collapse-block navbar-light">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-block border py-3"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="sidebarNavExample1"
data-toggle="collapse"
data-target="#sidebarNavExample1">
<span class="d-flex justify-content-between align-items-center">
<span class="h5 mb-0">View all categories</span>
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</span>
</button>
<!-- End Responsive Toggle Button -->
<div id="sidebarNavExample1" class="collapse navbar-collapse">
<div class="p-2 p-lg-0">
<div class="mt-3 mt-lg-0">
<h2 class="h4">Explore</h2>
<!-- Nav Link -->
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
All
<span class="badge border badge-pill">30+</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Top rated
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Featured
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Daily tools
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
New
<span class="badge border badge-pill">18</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Channels
</a>
<!-- End Nav Link -->
</div>
<div class="mt-5">
<h3 class="h4">Categories</h3>
<!-- Nav Link -->
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
API management
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Code quality
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Code review
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Integration
<span class="badge border badge-pill">4</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
File management
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Mobile
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Monitoring
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Publishing
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Security
<span class="badge border badge-pill">20</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
File management
<span class="badge border badge-pill">1</span>
</a>
<!-- End Nav Link -->
</div>
<div class="mt-5">
<h3 class="h4">Filters</h3>
<!-- Nav Link -->
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Free
<span class="badge border badge-pill">9+</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Free trial
</a>
<!-- End Nav Link -->
</div>
<div class="mt-5">
<h3 class="h4">Verification</h3>
<!-- Nav Link -->
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Verified
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Unverified
</a>
<!-- End Nav Link -->
</div>
</div>
</div>
</div>
<!-- End Navbar -->
</div>
</div>
</div>
</div>
<!-- End Apps Section -->
Component #7
<!-- Courses Section -->
<div class="container">
<div class="row">
<div class="col-lg-3 mb-5 mb-lg-0">
<div class="navbar-expand-lg navbar-expand-lg-collapse-block">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-block border py-3"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="sidebarNavExample2"
data-toggle="collapse"
data-target="#sidebarNavExample2">
<span class="d-flex justify-content-between align-items-center">
<span class="h5 mb-0">View all categories</span>
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</span>
</button>
<!-- End Responsive Toggle Button -->
<div id="sidebarNavExample2" class="collapse navbar-collapse">
<div class="mt-5 mt-lg-0">
<h2 class="h4"><a class="text-inherit" href="#">Artificial Intelligence</a></h2>
<!-- Nav Link -->
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
AI Product Manager
<span class="badge bg-soft-secondary badge-pill">30+</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
AI Programming with Python
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Computer Vision
<span class="badge badge-success badge-pill ml-1">New</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Deep Learning
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Deep Reinforcement Learning
<span class="badge bg-soft-secondary badge-pill">18</span>
</a>
<!-- End Nav Link -->
<!-- View More - Collapse -->
<div class="collapse" id="collapseSectionOne">
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Machine Learning
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Natural Language Processing
</a>
</div>
<!-- End View More - Collapse -->
<!-- Link -->
<a class="link link-collapse small font-size-1 font-weight-bold pt-1" data-toggle="collapse" href="#collapseSectionOne" role="button" aria-expanded="false" aria-controls="collapseSectionOne">
<span class="link-collapse-default">View more</span>
<span class="link-collapse-active">View less</span>
<span class="link-icon ml-1">+</span>
</a>
<!-- End Link -->
</div>
<div class="mt-5">
<h3 class="h4"><a class="text-inherit" href="#">Data Science</a></h3>
<!-- Nav Link -->
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Business Analytics
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Data Analyst
<span class="badge badge-success badge-pill ml-1">New</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Data Engineer
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Data Scientist
<span class="badge bg-soft-secondary badge-pill">4</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Data Visualization
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Predictive Analytics for Business
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Programming for Data Science
</a>
<!-- End Nav Link -->
</div>
<div class="mt-5">
<h3 class="h4"><a class="text-inherit" href="#">Programming and Development</a></h3>
<!-- Nav Link -->
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
AI Programming with Python
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Android Basics
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Android Developer
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Blockchain
<span class="badge bg-soft-secondary badge-pill">4</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
C++
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Front End Web Developer
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Java Developer
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
iOS
<span class="badge badge-success badge-pill ml-1">New</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Intro to Programming
</a>
<!-- End Nav Link -->
<!-- View More - Collapse -->
<div class="collapse" id="collapseSectionTwo">
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Java Developer
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
React
</a>
</div>
<!-- End View More - Collapse -->
<!-- Link -->
<a class="link link-collapse small font-size-1 font-weight-bold pt-1" data-toggle="collapse" href="#collapseSectionTwo" role="button" aria-expanded="false" aria-controls="collapseSectionTwo">
<span class="link-collapse-default">View more</span>
<span class="link-collapse-active">View less</span>
<span class="link-icon ml-1">+</span>
</a>
<!-- End Link -->
</div>
<div class="mt-5">
<h3 class="h4"><a class="text-inherit" href="#">Cloud Computing</a></h3>
<!-- Nav Link -->
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Cloud Developer
<span class="badge bg-soft-secondary badge-pill">9+</span>
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Cloud Dev Ops Engineer
</a>
<!-- End Nav Link -->
</div>
<div class="mt-5">
<h3 class="h4"><a class="text-inherit" href="#">Business</a></h3>
<!-- Nav Link -->
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Business Analytics
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Digital Marketing
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Marketing Analytics
</a>
<!-- End Nav Link -->
<!-- View More - Collapse -->
<div class="collapse" id="collapseSectionThree">
<a class="nav-link" href="#">
Predictive Analytics for Business
</a>
</div>
<!-- End View More - Collapse -->
<!-- Link -->
<a class="link link-collapse small font-size-1 font-weight-bold pt-1" data-toggle="collapse" href="#collapseSectionThree" role="button" aria-expanded="false" aria-controls="collapseSectionThree">
<span class="link-collapse-default">View more</span>
<span class="link-collapse-active">View less</span>
<span class="link-icon ml-1">+</span>
</a>
<!-- End Link -->
</div>
<div class="mt-5">
<h3 class="h4"><a class="text-inherit" href="#">Career <span class="badge badge-success badge-pill ml-1">New</span></a></h3>
<!-- Nav Link -->
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Applying to Jobs
</a>
<a class="dropdown-item d-flex justify-content-between align-items-center px-0" href="#">
Interviewing
</a>
<!-- End Nav Link -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Courses Section -->
Component #8
<!-- Categories Section -->
<div class="container">
<div class="row">
<div class="col-lg-3 mb-5 mb-lg-0">
<!-- Navbar -->
<div class="navbar-expand-lg navbar-expand-lg-collapse-block navbar-light">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-block border py-3"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="sidebarNavExample3"
data-toggle="collapse"
data-target="#sidebarNavExample3">
<span class="d-flex justify-content-between align-items-center">
<span class="h5 mb-0">View all categories</span>
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</span>
</button>
<!-- End Responsive Toggle Button -->
<div id="sidebarNavExample3" class="collapse navbar-collapse">
<!-- Nav Link -->
<div class="pl-2 pl-lg-0 mt-3 mt-lg-0">
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav1Collapse" data-target="#sidebarNav1Collapse">
Electronic devices
</a>
<div id="sidebarNav1Collapse" class="collapse" data-parent="#sidebarNavExample3">
<div id="sidebarNav1" class="navbar-nav align-items-start flex-column">
<div class="position-relative">
<a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav1One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav1One">
Electronic accessories
</a>
<div id="sidebarNav1One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav1">
<a class="dropdown-item" href="#">Mobile accessories</a>
<a class="dropdown-item" href="#">Portable audio</a>
<a class="dropdown-item" href="#">Wearable</a>
<a class="dropdown-item" href="#">Console accessories</a>
<a class="dropdown-item" href="#">Camera accessories</a>
<a class="dropdown-item" href="#">Computer accessories</a>
<a class="dropdown-item" href="#">Storage</a>
<a class="dropdown-item" href="#">Printers</a>
<a class="dropdown-item" href="#">Computer components</a>
</div>
</div>
<a class="dropdown-item" href="#">Mobiles</a>
<a class="dropdown-item" href="#">Tablets</a>
<a class="dropdown-item" href="#">Laptops</a>
<a class="dropdown-item" href="#">Desktops</a>
<a class="dropdown-item" href="#">Gaming consoles</a>
<a class="dropdown-item" href="#">Car cameras</a>
<a class="dropdown-item" href="#">Security cameras</a>
<a class="dropdown-item" href="#">Digital cameras</a>
<a class="dropdown-item" href="#">Gadgets</a>
</div>
</div>
</div>
<a class="dropdown-item px-0" href="#">
Clothing
</a>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav2Collapse" data-target="#sidebarNav2Collapse">
TV & home appliances
</a>
<div id="sidebarNav2Collapse" class="collapse" data-parent="#sidebarNavExample3">
<div id="sidebarNav2" class="navbar-nav align-items-start flex-column">
<div class="position-relative">
<a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav2One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav2One">
TV & video devices
</a>
<div id="sidebarNav2One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav2">
<a class="dropdown-item" href="#">Accessories</a>
</div>
</div>
<div class="position-relative">
<a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav2Two" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav2Two">
Large appliances
</a>
<div id="sidebarNav2Two" class="navbar-nav flex-column collapse" data-parent="#sidebarNav2">
<a class="dropdown-item" href="#">Kitchen</a>
<a class="dropdown-item" href="#">Living room</a>
</div>
</div>
<a class="dropdown-item" href="#">Cooling & air treatment</a>
<a class="dropdown-item" href="#">Vacuums & floor care</a>
</div>
</div>
</div>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav3Collapse" data-target="#sidebarNav3Collapse">
Health & beauty
</a>
<div id="sidebarNav3Collapse" class="collapse" data-parent="#sidebarNavExample3">
<div id="sidebarNav3" class="navbar-nav align-items-start flex-column">
<a class="dropdown-item" href="#">Food supplements</a>
<a class="dropdown-item" href="#">Skincare</a>
<a class="dropdown-item" href="#">Makeup</a>
<div class="position-relative">
<a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav3One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav3One">
Beauty tools
</a>
<div id="sidebarNav3One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav3">
<a class="dropdown-item" href="#">Men</a>
<a class="dropdown-item" href="#">Women</a>
</div>
</div>
<div class="position-relative">
<a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav3Two" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav3Two">
Medical supplies
</a>
<div id="sidebarNav3Two" class="navbar-nav flex-column collapse" data-parent="#sidebarNav3">
<a class="dropdown-item" href="#">Bath & body</a>
<a class="dropdown-item" href="#">Hair care</a>
<a class="dropdown-item" href="#">Personal care</a>
</div>
</div>
</div>
</div>
</div>
<a class="dropdown-item px-0" href="#">
Accessories
</a>
<a class="dropdown-item px-0" href="#">
Furniture
</a>
<a class="dropdown-item px-0" href="#">
Casual
</a>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav4Collapse" data-target="#sidebarNav4Collapse">
Babies & toys
</a>
<div id="sidebarNav4Collapse" class="collapse" data-parent="#sidebarNavExample3">
<div id="sidebarNav4" class="navbar-nav align-items-start flex-column">
<div class="position-relative">
<a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav4One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav4One">
Foods
</a>
<div id="sidebarNav4One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav4">
<a class="dropdown-item" href="#">Feeding</a>
<a class="dropdown-item" href="#">Milk formula</a>
</div>
</div>
<a class="dropdown-item" href="#">Diapering & potty</a>
<a class="dropdown-item" href="#">Nursery</a>
<a class="dropdown-item" href="#">Baby personal care</a>
<a class="dropdown-item" href="#">Clothing & accessories</a>
<a class="dropdown-item" href="#">Baby and & toys</a>
</div>
</div>
</div>
<a class="dropdown-item px-0" href="#">
Sports & travel
</a>
<a class="dropdown-item px-0" href="#">
Fashion
</a>
<a class="dropdown-item px-0" href="#">
Glasses
</a>
<div class="position-relative">
<a class="dropdown-nav-link dropdown-toggle dropdown-toggle-collapse" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav5Collapse" data-target="#sidebarNav5Collapse">
Automotive & motorcycles
</a>
<div id="sidebarNav5Collapse" class="collapse" data-parent="#sidebarNavExample3">
<div id="sidebarNav5" class="navbar-nav align-items-start flex-column">
<div class="position-relative">
<a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav5One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav5One">
Automotive
</a>
<div id="sidebarNav5One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav5">
<a class="dropdown-item" href="#">Services & installations</a>
<a class="dropdown-item" href="#">Auto oils & fluids</a>
</div>
</div>
<a class="dropdown-item" href="#">Interior accessories</a>
<a class="dropdown-item" href="#">Exterior accessories</a>
<a class="dropdown-item" href="#">Car audio</a>
<a class="dropdown-item" href="#">Auto care</a>
<a class="dropdown-item" href="#">Riding gear</a>
<div class="position-relative">
<a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav6One" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav6One">
Automotive
</a>
<div id="sidebarNav6One" class="navbar-nav flex-column collapse" data-parent="#sidebarNav5">
<a class="dropdown-item" href="#">Services & installations</a>
<a class="dropdown-item" href="#">Auto oils & fluids</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Nav Link -->
</div>
</div>
</div>
<!-- End Navbar -->
</div>
</div>
</div>
<!-- End Categories Section -->
Component #9
<!-- Products & Filters Section -->
<div class="container">
<div class="row">
<!-- Filters -->
<div class="col-lg-3">
<form>
<div class="border-bottom pb-4 mb-4">
<h4>Price</h4>
<!-- Range Slider -->
<div class="mt-10">
<input class="js-ion-range-slider" type="text"
data-hs-ion-range-slider-options='{
"extra_classes": "range-slider-custom range-slider-custom-grid",
"type": "double",
"grid": true,
"hide_from_to": false,
"prefix": "$",
"min": 0,
"max": 500,
"from": 25,
"to": 475,
"result_min_target_el": "#rangeSliderExample3MinResult",
"result_max_target_el": "#rangeSliderExample3MaxResult"
}'>
<div class="d-flex justify-content-between mt-7">
<input type="text" class="form-control form-control-sm max-w-9rem" id="rangeSliderExample3MinResult">
<input type="text" class="form-control form-control-sm max-w-9rem mt-0" id="rangeSliderExample3MaxResult">
</div>
</div>
<!-- End Range Slider -->
</div>
<div class="border-bottom pb-4 mb-4">
<h4>Gender</h4>
<!-- Checkboxes -->
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="genderMen" checked>
<label class="custom-control-label text-lh-lg" for="genderMen">Men</label>
</div>
<small>73</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="genderWomen" checked>
<label class="custom-control-label text-lh-lg" for="genderWomen">Women</label>
</div>
<small>51</small>
</div>
<!-- End Checkboxes -->
</div>
<div class="border-bottom pb-4 mb-4">
<h4>Brand</h4>
<!-- Checkboxes -->
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="brandAdidas">
<label class="custom-control-label" for="brandAdidas">Adidas</label>
</div>
<small>16</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="brandNewBalance">
<label class="custom-control-label" for="brandNewBalance">New Balance</label>
</div>
<small>8</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="brandNike">
<label class="custom-control-label" for="brandNike">Nike</label>
</div>
<small>35</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="brandFredPerry">
<label class="custom-control-label" for="brandFredPerry">Fred Perry</label>
</div>
<small>5</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="brandTnf">
<label class="custom-control-label" for="brandTnf">The North Face</label>
</div>
<small>1</small>
</div>
<!-- End Checkboxes -->
<!-- View More - Collapse -->
<div class="collapse" id="collapseBrand">
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="brandGucci">
<label class="custom-control-label" for="brandGucci">Gucci</label>
</div>
<small>5</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="brandMango">
<label class="custom-control-label" for="brandMango">Mango</label>
</div>
<small>1</small>
</div>
</div>
<!-- End View More - Collapse -->
<!-- Link -->
<a class="link link-collapse small font-size-1" data-toggle="collapse" href="#collapseBrand" role="button" aria-expanded="false" aria-controls="collapseBrand">
<span class="link-collapse-default">View more</span>
<span class="link-collapse-active">View less</span>
<span class="link-icon ml-1">+</span>
</a>
<!-- End Link -->
</div>
<div class="border-bottom pb-4 mb-4">
<h4>Size</h4>
<!-- Checkboxes -->
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="sizeS" checked>
<label class="custom-control-label" for="sizeS">S</label>
</div>
<small>27</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="sizeM">
<label class="custom-control-label" for="sizeM">M</label>
</div>
<small>18</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="sizeL" checked>
<label class="custom-control-label" for="sizeL">L</label>
</div>
<small>0</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="sizeXL">
<label class="custom-control-label" for="sizeXL">XL</label>
</div>
<small>1</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="sizeXXL">
<label class="custom-control-label" for="sizeXXL">XXL</label>
</div>
<small>2</small>
</div>
<!-- End Checkboxes -->
</div>
<div class="border-bottom pb-4 mb-4">
<h4>Category</h4>
<!-- Checkboxes -->
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="categoryTshirt" checked>
<label class="custom-control-label text-lh-lg" for="categoryTshirt">T-shirt</label>
</div>
<small>73</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="categoryShoes">
<label class="custom-control-label text-lh-lg" for="categoryShoes">Shoes</label>
</div>
<small>0</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="categoryAccessories" checked>
<label class="custom-control-label text-lh-lg" for="categoryAccessories">Accessories</label>
</div>
<small>51</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="categoryTops" checked>
<label class="custom-control-label" for="categoryTops">Tops</label>
</div>
<small>5</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="categoryBottom">
<label class="custom-control-label" for="categoryBottom">Bottom</label>
</div>
<small>11</small>
</div>
<!-- End Checkboxes -->
<!-- View More - Collapse -->
<div class="collapse" id="collapseCategory">
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="categoryShorts">
<label class="custom-control-label" for="categoryShorts">Shorts</label>
</div>
<small>5</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="categoryHats">
<label class="custom-control-label" for="categoryHats">Hats</label>
</div>
<small>3</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="categorySocks">
<label class="custom-control-label" for="categorySocks">Socks</label>
</div>
<small>8</small>
</div>
</div>
<!-- End View More - Collapse -->
<!-- Link -->
<a class="link link-collapse small font-size-1" data-toggle="collapse" href="#collapseCategory" role="button" aria-expanded="false" aria-controls="collapseCategory">
<span class="link-collapse-default">View more</span>
<span class="link-collapse-active">View less</span>
<span class="link-icon ml-1">+</span>
</a>
<!-- End Link -->
</div>
<div class="border-bottom pb-4 mb-4">
<h4>Rating</h4>
<!-- Checkboxes -->
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-0">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="rating1">
<label class="custom-control-label" for="rating1">
<span class="d-block text-warning">
<i class="fas fa-star"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
</span>
</label>
</div>
<small>3</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-0">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="rating2">
<label class="custom-control-label" for="rating2">
<span class="d-block text-warning">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
</span>
</label>
</div>
<small>10</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-0">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="rating3">
<label class="custom-control-label" for="rating3">
<span class="d-block text-warning">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star text-muted"></i>
<i class="far fa-star text-muted"></i>
</span>
</label>
</div>
<small>34</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-0">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="rating4">
<label class="custom-control-label" for="rating4">
<span class="d-block text-warning">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star text-muted"></i>
</span>
</label>
</div>
<small>86</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-lg text-body mb-0">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="rating5">
<label class="custom-control-label" for="rating5">
<span class="d-block text-warning">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</span>
</label>
</div>
<small>102</small>
</div>
<!-- End Checkboxes -->
</div>
<button type="button" class="btn btn-sm btn-block btn-soft-secondary transition-3d-hover">Clear All</button>
</form>
</div>
<!-- End Filters -->
</div>
</div>
<!-- End Products & Filters Section -->
<!-- JS Implementing Plugins -->
<script src="./node_modules/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<!-- JS Front -->
<script src="./assets/js/hs.ion-range-slider.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF ION RANGE SLIDER
// =======================================================
$('.js-ion-range-slider').each(function () {
var ionRangeSlider = $.HSCore.components.HSIonRangeSlider.init($(this));
});
});
</script>
Component #10
Natalie Curtis
natalie@example.com
Account
Shopping
Billing
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounde-circle d-lg-none"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="sidebarNav"
data-toggle="collapse"
data-target="#sidebarNav">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navbar -->
<div class="navbar-expand-lg navbar-expand-lg-collapse-block navbar-light">
<div id="sidebarNav" class="collapse navbar-collapse navbar-vertical">
<!-- Card -->
<div class="card">
<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/img1.jpg" alt="Image Description">
<img class="avatar-status avatar-lg-status" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Verified user">
</div>
<h4 class="card-title">Natalie Curtis</h4>
<p class="card-text font-size-1">natalie@example.com</p>
</div>
<!-- End Avatar -->
<h6 class="text-cap small">Account</h6>
<!-- List -->
<ul class="nav nav-sub nav-sm nav-tabs nav-list-y-2 mb-4">
<li class="nav-item">
<a class="nav-link active" href="index.html">
<i class="fas fa-id-card nav-icon"></i>
Personal info
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login-and-security.html">
<i class="fas fa-shield-alt nav-icon"></i>
Login & security
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="notifications.html">
<i class="fas fa-bell nav-icon"></i>
Notifications
<span class="badge badge-soft-dark badge-pill nav-link-badge">1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="preferences.html">
<i class="fas fa-sliders-h nav-icon"></i>
Preferences
</a>
</li>
</ul>
<!-- End List -->
<h6 class="text-cap small">Shopping</h6>
<!-- List -->
<ul class="nav nav-sub nav-sm nav-tabs nav-list-y-2 mb-4">
<li class="nav-item">
<a class="nav-link" href="orders.html">
<i class="fas fa-shopping-basket nav-icon"></i>
Your orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="wishlist.html">
<i class="fas fa-heart nav-icon"></i>
Wishlist
<span class="badge badge-soft-dark badge-pill nav-link-badge">2</span>
</a>
</li>
</ul>
<!-- End List -->
<h6 class="text-cap small">Billing</h6>
<!-- List -->
<ul class="nav nav-sub nav-sm nav-tabs nav-list-y-2">
<li class="nav-item">
<a class="nav-link" href="billing.html">
<i class="fas fa-credit-card nav-icon"></i>
Plans & payment
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="address.html">
<i class="fas fa-map-marker-alt nav-icon"></i>
Address
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="teams.html">
<i class="fas fa-users nav-icon"></i>
Teams
<span class="badge badge-soft-dark badge-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-sub nav-sm nav-tabs nav-list-y-2">
<li class="nav-item">
<a class="nav-link text-primary" href="#">
<i class="fas fa-sign-out-alt nav-icon"></i>
Log out
</a>
</li>
</ul>
<!-- End List -->
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Navbar -->
Component #11
Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.
Ask me for more information
<div class="row">
<div id="stickyBlockStartPoint" class="col-lg-4">
<!-- Contact Form -->
<div class="js-sticky-block card card-bordered"
data-hs-sticky-block-options='{
"parentSelector": "#stickyBlockStartPoint",
"breakpoint": "lg",
"startPoint": "#stickyBlockStartPoint",
"endPoint": "#stickyBlockEndPoint",
"stickyOffsetTop": 24,
"stickyOffsetBottom": 0
}'>
<div class="card-body">
<!-- Header -->
<div class="media align-items-center mb-4">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="mb-0">Ask me for more information</h4>
</div>
</div>
<!-- End Header -->
<!-- Form -->
<form>
<select class="custom-select custom-select-sm mb-2">
<option selected>Tell me more about this property</option>
<option value="aboutProperty1">Request a showing</option>
<option value="aboutProperty2">Request neighborhood information</option>
<option value="aboutProperty3">Request recent area sales</option>
</select>
<div class="mb-2">
<label class="sr-only" for="firstNameSr">First Name</label>
<input type="text" class="form-control form-control-sm" name="text" id="firstNameSr" placeholder="First Name" aria-label="First Name">
</div>
<div class="mb-2">
<label class="sr-only" for="lastNameSr">Last Name</label>
<input type="text" class="form-control form-control-sm" name="text" id="lastNameSr" placeholder="Last Name" aria-label="Last Name">
</div>
<div class="mb-2">
<label class="sr-only" for="emailSr">Email</label>
<input type="email" class="form-control form-control-sm" name="text" id="emailSr" placeholder="Email" aria-label="Email">
</div>
<div class="mb-2">
<label class="sr-only" for="phoneNumberSr">Phone number</label>
<input type="tel" class="form-control form-control-sm" name="tel" id="phoneNumberSr" placeholder="Phone number" aria-label="Phone number">
</div>
<div class="mb-2">
<label class="sr-only" for="propertyQuestionSr">Property question</label>
<textarea class="form-control form-control-sm" rows="4" name="answer" id="propertyQuestionSr" placeholder="I would like more information about ..." aria-label="I would like more information about ..."></textarea>
</div>
<button type="button" class="btn btn-block btn-sm btn-primary btn-wide transition-3d-hover">Request Info</button>
</form>
<!-- End Form -->
</div>
<!-- End Contact Form -->
</div>
</div>
</div>
<!-- End Row -->
<!-- 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>
$(document).on('ready', function () {
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
$('.js-sticky-block').each(function () {
var stickyBlock = new HSStickyBlock($(this)).init();
});
});
</script>
Component #12
<div class="row">
<div class="col-lg-3 order-lg-2 mb-5 mb-lg-0">
<!-- Navbar -->
<div class="navbar-expand-lg navbar-expand-lg-collapse-block navbar-light">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-block btn-white"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="sidebarNavComponent12"
data-toggle="collapse"
data-target="#sidebarNavComponent12">
<span class="d-flex justify-content-between align-items-center">
<span class="h5 mb-0">View all filters</span>
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</span>
</button>
<!-- End Responsive Toggle Button -->
<div id="sidebarNavComponent12" class="collapse navbar-collapse">
<div class="pt-4 pt-lg-0">
<!-- Filter Form -->
<form>
<!-- Filter Group -->
<div class="mb-5">
<h6 class="small text-cap">Distance</h6>
<div class="mt-n1">
<p class="font-size-1 mb-0">Within <span id="rangeSliderDistance"></span> miles of <span class="font-weight-bold text-dark">London</span></p>
</div>
<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
data-hs-ion-range-slider-options='{
"extra_classes": "range-slider-custom",
"min": 0,
"max": 100,
"from": 25,
"to": 75,
"result_min_target_el": "#rangeSliderDistance"
}'>
<div class="d-flex justify-content-between align-items-center mt-5">
<span class="font-size-1 text-body">5 miles</span>
<span class="font-size-1 text-body">100 miles</span>
</div>
<!-- End Range Slider -->
</div>
<!-- End Filter Group -->
<!-- Filter Group -->
<div class="mb-5">
<h6 class="small text-cap">Last updated</h6>
<!-- Select -->
<div id="lastUpdatedSelect" class="select2-custom select2-custom-sm-right">
<select class="js-custom-select custom-select-sm" style="opacity: 0;"
data-hs-select2-options='{
"dropdownParent": "#lastUpdatedSelect",
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true
}'>
<option value="within last day">within last day</option>
<option value="within last week">within last week</option>
<option value="within last month">within last month</option>
<option value="within last 3 months">within last 3 months</option>
<option value="within last 6 months" selected>within last 6 months</option>
<option value="show all resumes">show all resumes</option>
</select>
</div>
<!-- End Select -->
</div>
<!-- End Filter Group -->
<!-- Filter Group -->
<div class="mb-5">
<h6 class="small text-cap">Job titles</h6>
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="jobTitles1">
<label class="custom-control-label" for="jobTitles1">Graphic Designer</label>
</div>
<small>2</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="jobTitles2" checked>
<label class="custom-control-label" for="jobTitles2">UI/UX Designer</label>
</div>
<small>2</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="jobTitles3" checked>
<label class="custom-control-label" for="jobTitles3">Full Stack Developer</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="jobTitles5">
<label class="custom-control-label" for="jobTitles5">Information Associate</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
</div>
<!-- End Filter Group -->
<!-- Filter Group -->
<div class="mb-5">
<h6 class="small text-cap">Company</h6>
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="company1">
<label class="custom-control-label" for="company1">Capsule</label>
</div>
<small>2</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="company2">
<label class="custom-control-label" for="company2">Spec</label>
</div>
<small>2</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="company3">
<label class="custom-control-label" for="company3">Mailchimp</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="company4">
<label class="custom-control-label" for="company4">Google</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="company5">
<label class="custom-control-label" for="company5">Prosperops</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="company6">
<label class="custom-control-label" for="company6">Figma</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
</div>
<!-- End Filter Group -->
<!-- Filter Group -->
<div class="mb-5">
<h6 class="small text-cap">Years of experience</h6>
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="yearsOfExperience1" checked>
<label class="custom-control-label" for="yearsOfExperience1">6-10 years</label>
</div>
<small>5</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="yearsOfExperience2">
<label class="custom-control-label" for="yearsOfExperience2">3-5 years</label>
</div>
<small>3</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="yearsOfExperience3">
<label class="custom-control-label" for="yearsOfExperience3">More than 10 years</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
</div>
<!-- End Filter Group -->
<!-- Filter Group -->
<div class="mb-5">
<h6 class="small text-cap">Education</h6>
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="education1">
<label class="custom-control-label" for="education1">Bachelors</label>
</div>
<small>5</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="education2">
<label class="custom-control-label" for="education2">Masters</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="education3">
<label class="custom-control-label" for="education3">Associates</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
</div>
<!-- End Filter Group -->
<!-- Filter Group -->
<div class="mb-5">
<h6 class="small text-cap">Assessment <i class="far fa-question-circle text-body ml-1" data-toggle="tooltip" data-placement="top" title="Assessments shown her6 are summarized for convenience only. View the candidate’s profile for more information, including score ranges for each assessment. Indeed makes no statement as to the skill level of any candidate."></i></h6>
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="assessment1">
<label class="custom-control-label" for="assessment1">Attention to detail</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="assessment2">
<label class="custom-control-label" for="assessment2">Graphic Design</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="assessment3">
<label class="custom-control-label" for="assessment3">Social Media</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="assessment4">
<label class="custom-control-label" for="assessment4">Marketing</label>
</div>
<small>1</small>
</div>
<!-- End Checkbox -->
</div>
<!-- End Filter Group -->
<button type="button" class="btn btn-sm btn-block btn-white">
<i class="fas fa-redo fa-sm mr-1"></i> Reset all
</button>
</form>
<!-- End Filter Form -->
</div>
</div>
</div>
<!-- End Navbar -->
</div>
</div>
<!-- End Row -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../node_modules/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="../node_modules/ion-rangeslider/css/ion.rangeSlider.css">
<!-- JS Implementing Plugins -->
<script src="./node_modules/select2/dist/js/select2.full.min.js"></script>
<script src="./node_modules/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<!-- JS Front -->
<script src="./assets/js/hs.select2.js"></script>
<script src="./assets/js/hs.ion-range-slider.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF SELECT2
// =======================================================
$('.js-custom-select').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
// INITIALIZATION OF ION RANGE SLIDER
// =======================================================
$('.js-ion-range-slider').each(function () {
var ionRangeSlider = $.HSCore.components.HSIonRangeSlider.init($(this));
});
});
</script>