BIO
Component #1
Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.
Bio
A Frontend developer, and UI/UX Designer offering over 8 years of success in various leadership roles in the areas of Web design and development and customer support. I love coding and problem solving. Love working on both server and client side code. I like to get to know my clients closely to facilitate better communication.
- Authorized to work in the UK for any employer
- Willing to relocate to anywhere
Desired job title
UI Designer/Developer
Desired job types
- Full time
Desired work schedule
- Monday to Friday
Desired salary
- $90k per year
<!-- Description Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-8">
<div class="mb-8">
<div class="mb-3">
<h3>Bio</h3>
</div>
<p>A Frontend developer, and UI/UX Designer offering over 8 years of success in various leadership roles in the areas of Web design and development and customer support. I love coding and problem solving. Love working on both server and client side code. I like to get to know my clients closely to facilitate better communication.</p>
<ul class="pl-4 mb-4">
<li>Authorized to work in the UK for any employer</li>
<li>Willing to relocate to anywhere</li>
</ul>
<div class="row">
<div class="col-sm-6">
<div class="mb-4">
<h5>Desired job title</h5>
<p>UI Designer/Developer</p>
</div>
<div class="mb-4">
<h5>Desired job types</h5>
<ul class="list-unstyled">
<li>Full time</li>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4">
<h5>Desired work schedule</h5>
<ul class="list-unstyled">
<li>Monday to Friday</li>
</ul>
</div>
<div class="mb-4">
<h5>Desired salary</h5>
<ul class="list-unstyled">
<li>$90k per year</li>
</ul>
</div>
</div>
</div>
<!-- End Row -->
</div>
<!-- Sticky Block End Point -->
<div id="stickyBlockEndPoint"></div>
</div>
<div class="col-lg-4">
<div id="stickyBlockStartPoint" class="pl-lg-4">
<!-- Card -->
<div class="js-sticky-blocks card card-bordered"
data-hs-sticky-block-options='{
"parentSelector": "#stickyBlockStartPoint",
"breakpoint": "lg",
"startPoint": "#stickyBlockStartPoint",
"endPoint": "#stickyBlockEndPoint",
"stickyOffsetTop": 20,
"stickyOffsetBottom": 20
}'>
<div class="card-body p-5">
<div class="mb-5">
<h3>Search millions of resumes across your industry and location.</h3>
</div>
<a class="btn btn-sm btn-block btn-soft-dark" href="#">Select a subscription</a>
<img class="card-img-bottom mt-7" src="../assets/svg/illustrations/discussion-scene.svg" alt="Image Description">
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
</div>
<!-- Description 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 #2
About the company
Capsule was launched in 2009 following the founders' frustration with existing CRM services that were either overly simplistic or far too complex for most businesses. We believe the value of a modern CRM lies in the ability to help businesses stay organized, know more about their customers, build strong relationships and to make the most of sales opportunities, all while minimizing user input. We built Capsule to deliver on these values and today Capsule is used by thousands of businesses of all sizes all over the world.
We're based in Manchester, United Kingdom, a city with a creative heart that was founded on science and industry and the birthplace of the modern computer.
<!-- About Section -->
<div class="container">
<h3>About the company</h3>
<div class="row mb-5">
<div class="col-md-3 order-md-2 mb-3 mb-md-0">
<div class="pl-md-4">
<ul class="list-unstyled list-article">
<li>
<span class="h5 d-block">Founded</span>
<span class="d-block font-size-1">2009</span>
</li>
<li>
<span class="h5 d-block">Company size</span>
<span class="d-block font-size-1">150 - 300</span>
</li>
<li>
<span class="h5 d-block">Avg. Salary</span>
<span class="d-block font-size-1">$25 - $45</span>
</li>
<li>
<span class="h5 d-block">Industry</span>
<span class="d-block font-size-1">Information Technology</span>
</li>
<li>
<span class="h5 d-block">Links</span>
<ul class="list-inline">
<li class="list-inline-item">
<a class="icon icon-xs icon-soft-dark icon-circle" href="#" data-toggle="tooltip" data-placement="top" title="Capsule on Facebook">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="icon icon-xs icon-soft-dark icon-circle" href="#" data-toggle="tooltip" data-placement="top" title="Capsule on Twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="icon icon-xs icon-soft-dark icon-circle" href="#" data-toggle="tooltip" data-placement="top" title="Capsule on Github">
<i class="fab fa-github"></i>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="mb-5">
<p>Capsule was launched in 2009 following the founders' frustration with existing CRM services that were either overly simplistic or far too complex for most businesses. We believe the value of a modern CRM lies in the ability to help businesses stay organized, know more about their customers, build strong relationships and to make the most of sales opportunities, all while minimizing user input. We built Capsule to deliver on these values and today Capsule is used by thousands of businesses of all sizes all over the world.</p>
<div class="collapse" id="collapseLinkDescription">
<p>We're based in Manchester, United Kingdom, a city with a creative heart that was founded on science and industry and the birthplace of the modern computer.</p>
</div>
<a class="link-collapse" data-toggle="collapse" href="#collapseLinkDescription" role="button" aria-expanded="false" aria-controls="collapseLinkDescription">
<span class="link-collapse-default">Read more <i class="fas fa-angle-down fa-sm ml-1"></i></span>
<span class="link-collapse-active">Read less <i class="fas fa-angle-up fa-sm ml-1"></i></span>
</a>
</div>
<div id="fancyboxGallery">
<div class="row mx-n2">
<div class="col-4 col-sm px-2 mb-3 mb-sm-0">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery .js-fancybox",
"speed": 700
}'
data-src="../assets/img/900x900/img1.jpg"
data-caption="Front in frames - image #01">
<img class="img-fluid rounded" src="../assets/img/900x900/img1.jpg" alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-4 col-sm px-2 mb-3 mb-sm-0">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery .js-fancybox",
"speed": 700
}'
data-src="../assets/img/900x900/img8.jpg"
data-caption="Front in frames - image #02">
<img class="img-fluid rounded" src="../assets/img/900x900/img8.jpg" alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-4 col-sm px-2 mb-3 mb-sm-0">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery .js-fancybox",
"speed": 700
}'
data-src="../assets/img/900x900/img7.jpg"
data-caption="Front in frames - image #03">
<img class="img-fluid rounded" src="../assets/img/900x900/img7.jpg" alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-4 col-sm px-2 mb-3 mb-sm-0">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery .js-fancybox",
"speed": 700
}'
data-src="../assets/img/900x900/img23.jpg"
data-caption="Front in frames - image #04">
<img class="img-fluid rounded" src="../assets/img/900x900/img23.jpg" alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-4 col-sm px-2 mb-3 mb-sm-0">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery .js-fancybox",
"speed": 700
}'
data-src="../assets/img/900x900/img9.jpg"
data-caption="Front in frames - image #05">
<img class="img-fluid rounded" src="../assets/img/900x900/img9.jpg" alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon media-viewer-icon-active">
<span class="media-viewer-icon-inner">+1</span>
</span>
</span>
</a>
</div>
</div>
<img class="js-fancybox d-none" alt="Image Description"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery .js-fancybox",
"speed": 700
}'
data-src="../assets/img/900x900/img2.jpg"
data-caption="Front in frames - image #06">
</div>
</div>
</div>
<!-- End Row -->
</div>
<!-- About Section -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="./node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.css">
<!-- JS Implementing Plugins -->
<script src="./node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF FANCYBOX
// =======================================================
$('.js-fancybox').each(function () {
var fancybox = $.HSCore.components.HSFancyBox.init($(this));
});
});
</script>