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="../../assets/vendor/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
Developer
Google Drive
Developer links
<!-- 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">
<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 border"
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="../../assets/vendor/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 border 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 -->
<input class="js-ion-range-slider" type="text"
data-hs-ion-range-slider-options='{
"extra_classes": "range-slider range-slider-indicator range-slider-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-4">
<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>
<!-- 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="../../assets/vendor/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-navy 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-navy 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-navy badge-pill nav-link-badge">+2 new users</span>
</a>
</li>
</ul>
<!-- End List -->
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Navbar -->