Sidebar example
Various forms of information to the right or left side of a page.
$35.00
Hourly rate
30
Jobs done
85%
Success rate
345
Repeat clients
Bio
I love coding and problem solving. I have 3+ years of experience in the web development sector. Love working on both server and client side code. I like to get to know my clients closely to facilitate better communication.
Languages
English - Advanced French - UnspecifiedRewards
Industry expertise: IT, Technology and Business
Work experience
-
S
Product Director
- Spotify Inc.
- Jan 2008 to Mar 2010
- San Francisco, California
-
D
Channel Sales Director
- Dropbox Inc.
- Apr 2010 to Sep 2015
- Newark, NJ
-
A
Business manager
- Airbnb Inc.
- Oct 2015 to Present
- San Francisco, California
Linked accounts
Slack
jorgefields.slack.com
<!-- Sidebar Info -->
<div class="row">
<div class="col-lg-4 mb-9 mb-lg-0">
<div class="card shadow-sm p-5 mb-5">
<div class="border-bottom text-center pb-5 mb-5">
<!-- Status -->
<div class="d-flex justify-content-end mb-1">
<span class="btn btn-xs btn-soft-success btn-pill">
<small class="fas fa-circle mr-1"></small>
Online
</span>
</div>
<!-- End Status -->
<!-- Avatar -->
<div class="mb-3 mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img22.jpg" width="110" height="110" alt="Image Description">
</div>
<!-- End Avatar -->
<h1 class="h5">Jorge Fields</h1>
<!-- Review -->
<div class="mb-2">
<span class="text-warning">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star-half-alt"></small>
</span>
<span class="font-weight-semi-bold ml-2">4.7</span>
<small class="text-muted">(39 reviews)</small>
</div>
<!-- End Review -->
<!-- Additional Info -->
<ul class="list-inline text-secondary font-size-1 mb-4">
<li class="list-inline-item">
<small class="fas fa-map-marker-alt mr-1"></small>
London, UK
</li>
<li class="list-inline-item text-muted">•</li>
<li class="list-inline-item">
Joined Jun 2015
</li>
</ul>
<!-- End Additional Info -->
<div class="mb-2">
<a class="btn btn-block btn-sm btn-soft-primary transition-3d-hover" href="#">Hire Me</a>
</div>
<a class="text-muted small" href="#">
<small class="fas fa-flag mr-1"></small>
Report this user
</a>
</div>
<div class="border-bottom pb-5 mb-5">
<div id="SVGemployeeStatsIcon" class="svg-preloader row">
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-35.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">$35.00</span>
<span class="d-block text-secondary font-size-1">Hourly rate</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-37.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">30</span>
<span class="d-block text-secondary font-size-1">Jobs done</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">85%</span>
<span class="d-block text-secondary font-size-1">Success rate</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-7.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">345</span>
<span class="d-block text-secondary font-size-1">Repeat clients</span>
</div>
<!-- End Stats -->
</div>
</div>
</div>
<div class="border-bottom pb-5 mb-5">
<h2 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Bio</h2>
<p class="font-size-1 mb-0">I love coding and problem solving. I have 3+ years of experience in the web development sector. Love working on both server and client side code. I like to get to know my clients closely to facilitate better communication.</p>
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Languages</h3>
<!-- Languages -->
<span class="d-block font-size-1 font-weight-medium mb-1">English - <span class="text-muted font-weight-normal">Advanced</span></span>
<span class="d-block font-size-1 font-weight-medium">French - <span class="text-muted font-weight-normal">Unspecified</span></span>
<!-- End Languages -->
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Skills</h3>
<!-- Skills -->
<a class="btn btn-xs btn-gray mb-1" href="#">Android</a>
<a class="btn btn-xs btn-gray mb-1" href="#">iOS</a>
<a class="btn btn-xs btn-gray mb-1" href="#">PHP</a>
<a class="btn btn-xs btn-gray mb-1" href="#">Developer</a>
<a class="btn btn-xs btn-gray mb-1" href="#">JavaScript</a>
<a class="btn btn-xs btn-gray mb-1" href="#">CSS3</a>
<a class="btn btn-xs btn-gray mb-1" href="#">HTML5</a>
<a class="btn btn-xs btn-gray mb-1" href="#">Bootstrap</a>
<a class="btn btn-xs btn-gray mb-1" href="#">Angular</a>
<a class="btn btn-xs btn-gray mb-1" href="#">React.js</a>
<!-- End Skills -->
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Rewards</h3>
<!-- Rewards -->
<div class="mb-3">
<img class="max-width-5 mr-1" src="../../assets/svg/illustrations/top-level-award.svg" alt="Image Description" title="Top Seller">
<img class="max-width-5 mx-1" src="../../assets/svg/illustrations/verified-user.svg" alt="Image Description" title="Verified user">
<img class="max-width-5 ml-1" src="../../assets/svg/illustrations/top-endorsed.svg" alt="Image Description" title="Top Endorsed">
</div>
<!-- End Rewards -->
<p class="small mb-0">Industry expertise: IT, Technology and Business</p>
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Work experience</h3>
<!-- Work Experience Info -->
<ul class="list-unstyled u-indicator-vertical-dashed">
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-soft-success rounded-circle mr-3">
<span class="btn-icon__inner">S</span>
</span>
<div class="media-body">
<h4 class="font-size-1 mb-1">Product Director</h4>
<ul class="list-unstyled small text-secondary mb-0">
<li>
<a href="#">Spotify Inc.</a>
</li>
<li>Jan 2008 to Mar 2010</li>
<li>San Francisco, California</li>
</ul>
</div>
</li>
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
<span class="btn-icon__inner">D</span>
</span>
<div class="media-body">
<h4 class="font-size-1 mb-1">Channel Sales Director</h4>
<ul class="list-unstyled small text-secondary mb-0">
<li>
<a href="#">Dropbox Inc.</a>
</li>
<li>Apr 2010 to Sep 2015</li>
<li>Newark, NJ</li>
</ul>
</div>
</li>
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-soft-danger rounded-circle mr-3">
<span class="btn-icon__inner">A</span>
</span>
<div class="media-body">
<h4 class="font-size-1 mb-1">Business manager</h4>
<ul class="list-unstyled small text-secondary mb-0">
<li>
<a href="#">Airbnb Inc.</a>
</li>
<li>Oct 2015 to Present</li>
<li>San Francisco, California</li>
</ul>
</div>
</li>
</ul>
<!-- End Work Experience Info -->
</div>
<h4 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Linked accounts</h4>
<!-- Linked Account -->
<a class="media align-items-center mb-3" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Slack</h4>
<small class="d-block text-secondary">jorgefields.slack.com</small>
</div>
</a>
<!-- End Linked Account -->
<!-- Linked Account -->
<a class="media align-items-center" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img19.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Twitter</h4>
<small class="d-block text-secondary">twitter.com/jorgefields</small>
</div>
</a>
<!-- End Linked Account -->
</div>
</div>
</div>
<!-- End Sidebar Info -->
San Francisco
Headquarters
2014
Founded
12,000+
Employees
Internet
Industry
Unknown
Revenue
$25 - $45
Avg. Salary
Job seekers also viewed
567k+ reviews
430 reviews
Asana
5k+ reviews
≪!-- Sidebar Info -->
<div class="row">
<div class="col-lg-4 mb-9 mb-lg-0">
<!-- Sidebar Info -->
<div class="card shadow-sm p-5 mb-5">
<div class="border-bottom text-center pb-5 mb-5">
<!-- Avatar -->
<div class="mb-3 mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" width="110" height="110" alt="Image Description">
</div>
<!-- End Avatar -->
<h1 class="h5">Slack</h1>
<!-- Review -->
<div class="mb-2">
<span class="text-warning">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</span>
<span class="font-weight-semi-bold ml-2">4.91</span>
<small class="text-muted">(12k+ reviews)</small>
</div>
<!-- End Review -->
<div class="mb-4">
<a class="font-size-1" href="#">www.slack.com</a>
</div>
<div class="mb-2">
<!-- Buttons -->
<a class="btn btn-sm btn-soft-success transition-3d-hover mr-1" href="#">Follow</a>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">64 Open Jobs</a>
<!-- End Buttons -->
</div>
<a class="text-muted small" href="#">
<small class="fas fa-flag mr-1"></small>
Report
</a>
</div>
<div class="border-bottom pb-5 mb-5">
<div id="SVGCompanyStatsIcon" class="svg-preloader row">
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">San Francisco</span>
<span class="d-block text-secondary font-size-1">Headquarters</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-11.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">2014</span>
<span class="d-block text-secondary font-size-1">Founded</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-7.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">12,000+</span>
<span class="d-block text-secondary font-size-1">Employees</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-13.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">Internet</span>
<span class="d-block text-secondary font-size-1">Industry</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-22.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">Unknown</span>
<span class="d-block text-secondary font-size-1">Revenue</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-34.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">$25 - $45</span>
<span class="d-block text-secondary font-size-1">Avg. Salary</span>
</div>
<!-- End Stats -->
</div>
</div>
</div>
<div class="border-bottom pb-5 mb-5">
<h4 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Linked accounts</h4>
<!-- Linked Account -->
<a class="media align-items-center mb-3" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Slack</h4>
<small class="d-block text-secondary">slack.com</small>
</div>
</a>
<!-- End Linked Account -->
<!-- Linked Account -->
<a class="media align-items-center mb-3" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img19.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Twitter</h4>
<small class="d-block text-secondary">twitter.com/slack</small>
</div>
</a>
<!-- End Linked Account -->
<!-- Linked Account -->
<a class="media align-items-center" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img20.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Facebook</h4>
<small class="d-block text-secondary">facebook.com/slack</small>
</div>
</a>
<!-- End Linked Account -->
</div>
<h4 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Job seekers also viewed</h4>
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img17.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Google</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<small class="text-muted ml-2">567k+ reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img20.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Facebook</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="far fa-star"></span>
</span>
<small class="text-muted ml-2">430 reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img13.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Asana</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="far fa-star"></span>
<span class="far fa-star"></span>
</span>
<small class="text-muted ml-2">5k+ reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- View More - Collapse -->
<div class="collapse" id="collapseRelatedCompanies">
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img21.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Dribbble</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<small class="text-muted ml-2">15k+ reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img15.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Spotify</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<small class="text-muted ml-2">987 reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
</div>
<!-- End View More - Collapse -->
<!-- View More - Link -->
<a class="link link-collapse small font-size-1" data-toggle="collapse" href="#collapseRelatedCompanies" role="button" aria-expanded="false" aria-controls="collapseRelatedCompanies">
<span class="link-collapse__default">View more</span>
<span class="link-collapse__active">View less</span>
<span class="link__icon ml-1">
<span class="link__icon-inner">+</span>
</span>
</a>
<!-- End View More - Link -->
</div>
</div>
</div>
<!-- End Sidebar Info -->
<!-- Sidebar Filter -->
<div class="card p-4">
<!-- Asset Type -->
<div class="border-bottom pb-4 mb-4">
<label class="form-label mb-2">Asset type</label>
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="assetTypeRadioChechbox1" name="assetTypeRadioChechbox">
<label class="custom-control-label" for="assetTypeRadioChechbox1">
Bank owned
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="assetTypeRadioChechbox2" name="assetTypeRadioChechbox">
<label class="custom-control-label" for="assetTypeRadioChechbox2">
Foreclosure sales
</label>
</div>
<!-- End Radio Checkbox -->
</div>
<!-- End Asset Type -->
<!-- Features -->
<div class="border-bottom pb-4 mb-4">
<label class="form-label mb-2">Features</label>
<div class="row">
<div class="col-6">
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="featuresRadioChechbox1" name="featuresRadioChechbox">
<label class="custom-control-label" for="featuresRadioChechbox1">
Pets allowed
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="featuresRadioChechbox2" name="featuresRadioChechbox">
<label class="custom-control-label" for="featuresRadioChechbox2">
Gas
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="featuresRadioChechbox3" name="featuresRadioChechbox">
<label class="custom-control-label" for="featuresRadioChechbox3">
Balcony
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="featuresRadioChechbox4" name="featuresRadioChechbox">
<label class="custom-control-label" for="featuresRadioChechbox4">
Garden
</label>
</div>
<!-- End Radio Checkbox -->
</div>
<div class="col-6">
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 mb-2">
<input type="checkbox" class="custom-control-input" id="featuresRadioChechbox5" name="featuresRadioChechbox">
<label class="custom-control-label" for="featuresRadioChechbox5">
Laundry
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 mb-2">
<input type="checkbox" class="custom-control-input" id="featuresRadioChechbox6" name="featuresRadioChechbox">
<label class="custom-control-label" for="featuresRadioChechbox6">
Heating
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 mb-2">
<input type="checkbox" class="custom-control-input" id="featuresRadioChechbox7" name="featuresRadioChechbox">
<label class="custom-control-label" for="featuresRadioChechbox7">
Parking lot
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 mb-2">
<input type="checkbox" class="custom-control-input" id="featuresRadioChechbox8" name="featuresRadioChechbox">
<label class="custom-control-label" for="featuresRadioChechbox8">
AC
</label>
</div>
<!-- End Radio Checkbox -->
</div>
</div>
</div>
<!-- End Features -->
<!-- Auction Type -->
<div class="border-bottom pb-4 mb-4">
<label class="form-label mb-2">Auction type</label>
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="auctionTypeRadioChechbox1" name="auctionTypeRadioChechbox">
<label class="custom-control-label" for="auctionTypeRadioChechbox1">
Online auction
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="auctionTypeRadioChechbox2" name="auctionTypeRadioChechbox">
<label class="custom-control-label" for="auctionTypeRadioChechbox2">
In person auction
</label>
</div>
<!-- End Radio Checkbox -->
</div>
<!-- End Auction Type -->
<!-- Condition -->
<div class="border-bottom pb-4 mb-4">
<label class="form-label mb-2">Condition</label>
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="conditionRadioChechbox1" name="conditionRadioChechbox">
<label class="custom-control-label" for="conditionRadioChechbox1">
<span class="fas fa-home text-secondary mr-1"></span>
Vacant
<span class="d-block text-secondary">Not all foreclosed properties are empty. But for these, no eviction is needed.</span>
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="conditionRadioChechbox2" name="conditionRadioChechbox">
<label class="custom-control-label" for="conditionRadioChechbox2">
<span class="fas fa-door-open text-secondary mr-1"></span>
Interior access available
<span class="d-block text-secondary">Schedule a visit to view the property.</span>
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="conditionRadioChechbox3" name="conditionRadioChechbox">
<label class="custom-control-label" for="conditionRadioChechbox3">
<span class="fas fa-hand-holding-usd text-secondary mr-1"></span>
Financing Available
<span class="d-block text-secondary">These could be financed with a conventional mortgage or other private loan.</span>
</label>
</div>
<!-- End Radio Checkbox -->
</div>
<!-- End Condition -->
<!-- Hide Properties -->
<div class="border-bottom pb-4 mb-4">
<label class="form-label mb-2">Hide Properties that:</label>
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="hidePropertiesRadioChechbox1" name="hidePropertiesRadioChechbox">
<label class="custom-control-label" for="hidePropertiesRadioChechbox1">
Auction end soon
<span class="d-block text-secondary">Ending in the next 3 days</span>
</label>
</div>
<!-- End Radio Checkbox -->
</div>
<!-- End Hide Properties -->
<!-- Show Properties -->
<div class="border-bottom pb-4 mb-4">
<label class="form-label mb-2">Show Properties that have/are:</label>
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="showPropertiesRadioChechbox1" name="showPropertiesRadioChechbox">
<label class="custom-control-label" for="showPropertiesRadioChechbox1">
Sold, Pending or Canceled
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="showPropertiesRadioChechbox2" name="showPropertiesRadioChechbox">
<label class="custom-control-label" for="showPropertiesRadioChechbox2">
Broker Co-up
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="showPropertiesRadioChechbox3" name="showPropertiesRadioChechbox">
<label class="custom-control-label" for="showPropertiesRadioChechbox3">
Reserve disclosed
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-checkbox font-size-1 text-lh-md mb-2">
<input type="checkbox" class="custom-control-input" id="showPropertiesRadioChechbox4" name="showPropertiesRadioChechbox">
<label class="custom-control-label" for="showPropertiesRadioChechbox4">
No buyer's premium
</label>
</div>
<!-- End Radio Checkbox -->
</div>
<!-- End Show Properties -->
<!-- Buttons -->
<div class="row mx-gutters-2">
<div class="col-6">
<button type="submit" class="btn btn-block btn-sm btn-soft-secondary">Clear</button>
</div>
<div class="col-6">
<button type="submit" class="btn btn-block btn-sm btn-primary">Save</button>
</div>
</div>
<!-- End Buttons -->
</div>
<!-- End Sidebar Filter -->
- 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.
<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 border-0 bg-white shadow-soft"
data-parent="#stickyBlockStartPoint"
data-sticky-view="lg"
data-start-point="#stickyBlockStartPoint"
data-end-point="#stickyBlockEndPoint"
data-offset-top="24"
data-offset-bottom="24">
<div class="card-header text-center py-5 px-4">
<div class="max-width-27 mx-auto">
<img class="img-fluid" src="../../assets/svg/clients-logo/amazon-original.svg" alt="Image Description">
</div>
</div>
<div class="card-body p-4">
<div class="border-bottom pb-2 mb-4">
<dl class="row font-size-1">
<dt class="col-sm-4">Industry</dt>
<dd class="col-sm-8 text-secondary">E-commerce</dd>
</dl>
<dl class="row font-size-1">
<dt class="col-sm-4">Location</dt>
<dd class="col-sm-8 text-secondary">Seattle, Washington, U.S.</dd>
</dl>
<dl class="row font-size-1">
<dt class="col-sm-4">Goals</dt>
<dd class="col-sm-8 text-secondary">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">Type</dt>
<dd class="col-sm-8 text-secondary">B2C</dd>
</dl>
</div>
<h4 class="h6 mb-3">Products used</h4>
<dl class="row font-size-1">
<dt class="col-sm-4">
<figure id="icon34" class="svg-preloader ie-height-56 max-width-8 w-100">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-34.svg" alt="SVG"
data-parent="#icon34">
</figure>
</dt>
<dd class="col-sm-8 text-secondary">
<h4 class="font-size-1 font-weight-semi-bold 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">
<figure id="icon41" class="svg-preloader ie-height-56 max-width-8 w-100">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-41.svg" alt="SVG"
data-parent="#icon41">
</figure>
</dt>
<dd class="col-sm-8 text-secondary">
<h4 class="font-size-1 font-weight-semi-bold 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 class="col-lg-8">
</div>
</div>
<!-- Sticky Block End Point -->
<div id="stickyBlockEndPoint"></div>
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.sticky-block.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
// initialization of sticky blocks
$.HSCore.components.HSStickyBlock.init('.js-sticky-block');
});
</script>
<div class="row">
<div class="col-lg-4 mb-7 mb-lg-0">
<!-- Order Summary -->
<div class="border shadow-soft rounded p-5 mb-4">
<!-- Title -->
<div class="border-bottom pb-4 mb-4">
<h2 class="h5 mb-0">Order summary</h2>
</div>
<!-- End Title -->
<div class="border-bottom pb-4 mb-4">
<div class="media align-items-center mb-3">
<h3 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Item subtotal (2)</h3>
<div class="media-body text-right">
<span class="font-weight-medium">$73.98</span>
</div>
</div>
<div class="media align-items-center mb-3">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Delivery</h4>
<div class="media-body text-right">
<span class="font-weight-medium">Free</span>
</div>
</div>
<!-- Checkbox -->
<div class="card border-0 mb-3">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio1Example1" name="deliveryRadioExampleOne" checked>
<label class="custom-control-label ml-1" for="deliveryRadio1Example1">
<span class="d-block font-size-1 font-weight-medium mb-1">Free - Standard delivery</span>
<span class="d-block text-muted">Shipment may take 5-6 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="card border-0">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio2Example2" name="deliveryRadioExampleOne">
<label class="custom-control-label ml-1" for="deliveryRadio2Example2">
<span class="d-block font-size-1 font-weight-medium mb-1">$7.99 - Express delivery</span>
<span class="d-block text-muted">Shipment may take 2-3 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
</div>
<div class="media align-items-center mb-3">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Estimated tax</h4>
<div class="media-body text-right">
<span class="font-weight-medium">--</span>
</div>
</div>
<div class="media align-items-center mb-4">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Total</h4>
<div class="media-body text-right">
<span class="font-weight-medium">$73.98</span>
</div>
</div>
<a class="btn btn-primary btn-pill transition-3d-hover" href="checkout.html">Checkout</a>
<button type="submit" class="btn btn-soft-warning btn-pill transition-3d-hover">
<img src="../../assets/img/logos/paypal.png" width="70" alt="PayPal logo">
</button>
</div>
<!-- End Order Summary -->
<!-- Accordion -->
<div id="shopCartAccordionExample1" class="accordion rounded shadow-soft mb-4">
<!-- Card -->
<div class="card rounded">
<div class="card-header card-collapse" id="shopCartHeadingOneExample1">
<h3 class="mb-0">
<button type="button" class="btn btn-link btn-block card-btn font-weight-medium collapsed"
data-toggle="collapse"
data-target="#shopCartOneExample1"
aria-expanded="false"
aria-controls="shopCartOneExample1">
Promo code?
<span class="far fa-question-circle text-secondary ml-1" data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" title="Promo code" data-content="Valid on full priced items only. Some products maybe excluded."></span>
</button>
</h3>
</div>
<div id="shopCartOneExample1" class="collapse" aria-labelledby="shopCartHeadingOneExample1" data-parent="#shopCartAccordionExample1">
<form class="js-validate p-5">
<div class="input-group input-group-pill mb-3">
<input type="text" class="form-control" name="name" placeholder="Promo code" aria-label="Promo code">
<div class="input-group-append">
<button type="submit" class="btn btn-block btn-primary btn-pill">Apply</button>
</div>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Accordion -->
<!-- Help Link -->
<div class="media align-items-center">
<figure id="icon4" class="svg-preloader ie-height-48 w-100 max-width-6 mr-2">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
data-parent="#icon4">
</figure>
<div class="media-body text-secondary small">
<span class="font-weight-medium mr-1">Need Help?</span>
<a class="link-muted" href="#">Chat now</a>
</div>
</div>
<!-- End Help Link -->
</div>
<div class="col-lg-8">
</div>
</div>
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Order summary
1
Originals national backpack
Gender:
Men
Color:
Grey
Size:
One size
1
Vans large image t-shirt
Gender:
Women
Color:
Core Black / Carbon
Size:
SM
Item subtotal (2)
$73.98
Delivery
Free
Estimated tax
--
Total
$73.98
Need Help?
Chat now
<!-- Order Summary -->
<div class="border shadow-soft rounded p-5 mb-4">
<!-- Title -->
<div class="border-bottom pb-4 mb-4">
<h2 class="h5 mb-0">Order summary</h2>
</div>
<!-- End Title -->
<!-- Product Content -->
<div class="border-bottom pb-4 mb-4">
<div class="media">
<div class="position-relative max-width-10 w-100 mr-3">
<img class="img-fluid" src="../../assets/img/320x320/img2.jpg" alt="Image Description">
<span class="badge badge-sm badge-primary badge-pos rounded-circle">1</span>
</div>
<div class="media-body">
<h2 class="h6">Originals national backpack</h2>
<div class="text-secondary font-size-1">
<span>Gender:</span>
<span>Men</span>
</div>
<div class="text-secondary font-size-1">
<span>Color:</span>
<span>Grey</span>
</div>
<div class="text-secondary font-size-1">
<span>Size:</span>
<span>One size</span>
</div>
</div>
</div>
</div>
<!-- End Product Content -->
<!-- Product Content -->
<div class="border-bottom pb-4 mb-4">
<div class="media">
<div class="position-relative max-width-10 w-100 mr-3">
<img class="img-fluid" src="../../assets/img/320x320/img3.jpg" alt="Image Description">
<span class="badge badge-sm badge-primary badge-pos rounded-circle">1</span>
</div>
<div class="media-body">
<h2 class="h6">Vans large image t-shirt</h2>
<div class="text-secondary font-size-1">
<span>Gender:</span>
<span>Women</span>
</div>
<div class="text-secondary font-size-1">
<span>Color:</span>
<span>Core Black / Carbon</span>
</div>
<div class="text-secondary font-size-1">
<span>Size:</span>
<span>SM</span>
</div>
</div>
</div>
</div>
<!-- End Product Content -->
<!-- Fees -->
<div class="border-bottom pb-4 mb-4">
<div class="media align-items-center mb-3">
<h3 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Item subtotal (2)</h3>
<div class="media-body text-right">
<span class="font-weight-medium">$73.98</span>
</div>
</div>
<div class="media align-items-center mb-3">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Delivery</h4>
<div class="media-body text-right">
<span class="font-weight-medium">Free</span>
</div>
</div>
<!-- Checkbox -->
<div class="card border-0 mb-3">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio1Example2" name="deliveryRadioExampleTwo" checked>
<label class="custom-control-label ml-1" for="deliveryRadio1Example2">
<span class="d-block font-size-1 font-weight-medium mb-1">Free - Standard delivery</span>
<span class="d-block text-muted">Shipment may take 5-6 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="card border-0 mb-3">
<div class="card-body p-0">
<div class="custom-control custom-radio d-flex align-items-center small">
<input type="radio" class="custom-control-input" id="deliveryRadio2Example2" name="deliveryRadioExampleTwo">
<label class="custom-control-label ml-1" for="deliveryRadio2Example2">
<span class="d-block font-size-1 font-weight-medium mb-1">$7.99 - Express delivery</span>
<span class="d-block text-muted">Shipment may take 2-3 business days.</span>
</label>
</div>
</div>
</div>
<!-- End Checkbox -->
<div class="media align-items-center">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Estimated tax</h4>
<div class="media-body text-right">
<span class="font-weight-medium">--</span>
</div>
</div>
</div>
<!-- End Fees -->
<!-- Total -->
<div class="media align-items-center">
<h4 class="text-secondary font-size-1 font-weight-normal mb-0 mr-3">Total</h4>
<div class="media-body text-right">
<span class="font-weight-semi-bold">$73.98</span>
</div>
</div>
<!-- End Total -->
</div>
<!-- End Order Summary -->
<!-- Accordion -->
<div id="shopCartAccordionExample2" class="accordion rounded shadow-soft mb-4">
<!-- Card -->
<div class="card rounded">
<div class="card-header card-collapse" id="shopCartHeadingOneExample2">
<h3 class="mb-0">
<button type="button" class="btn btn-link btn-block card-btn font-weight-medium collapsed"
data-toggle="collapse"
data-target="#shopCartOneExample2"
aria-expanded="false"
aria-controls="shopCartOneExample2">
Promo code?
<span class="far fa-question-circle text-secondary ml-1" data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" title="Promo code" data-content="Valid on full priced items only. Some products maybe excluded."></span>
</button>
</h3>
</div>
<div id="shopCartOneExample2" class="collapse" aria-labelledby="shopCartHeadingOneExample2" data-parent="#shopCartAccordionExample2">
<form class="js-validate p-5">
<div class="input-group input-group-pill mb-3">
<input type="text" class="form-control" name="name" placeholder="Promo code" aria-label="Promo code">
<div class="input-group-append">
<button type="submit" class="btn btn-block btn-primary btn-pill transition-3d-hover">Apply</button>
</div>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Accordion -->
<!-- Help Link -->
<div class="media align-items-center">
<figure id="icon4Example2" class="svg-preloader ie-height-48 w-100 max-width-6 mr-2">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
data-parent="#icon4Example2">
</figure>
<div class="media-body text-secondary small">
<span class="font-weight-medium mr-1">Need Help?</span>
<a class="link-muted" href="#">Chat now</a>
</div>
</div>
<!-- End Help Link -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
<div class="row">
<div class="col-lg-3 mb-7 mb-lg-0">
<!-- List -->
<ul id="sidebarNav" class="list-unstyled">
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2 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="#sidebarNav">
<ul id="sidebarNav1" class="list-unstyled">
<!-- Menu List -->
<li>
<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>
<ul id="sidebarNav1One" class="collapse list-unstyled" data-parent="#sidebarNav1">
<li><a class="dropdown-item" href="#">Mobile accessories</a></li>
<li><a class="dropdown-item" href="#">Portable audio</a></li>
<li><a class="dropdown-item" href="#">Wearable</a></li>
<li><a class="dropdown-item" href="#">Console accessories</a></li>
<li><a class="dropdown-item" href="#">Camera accessories</a></li>
<li><a class="dropdown-item" href="#">Computer accessories</a></li>
<li><a class="dropdown-item" href="#">Storage</a></li>
<li><a class="dropdown-item" href="#">Printers</a></li>
<li><a class="dropdown-item" href="#">Computer components</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Mobiles</a></li>
<li><a class="dropdown-item" href="#">Tablets</a></li>
<li><a class="dropdown-item" href="#">Laptops</a></li>
<li><a class="dropdown-item" href="#">Desktops</a></li>
<li><a class="dropdown-item" href="#">Gaming consoles</a></li>
<li><a class="dropdown-item" href="#">Car cameras</a></li>
<li><a class="dropdown-item" href="#">Security cameras</a></li>
<li><a class="dropdown-item" href="#">Digital cameras</a></li>
<li><a class="dropdown-item" href="#">Gadgets</a></li>
<!-- End Menu List -->
</ul>
</div>
</li>
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2" href="#">
Clothing
</a>
</li>
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2 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="#sidebarNav">
<ul id="sidebarNav2" class="list-unstyled">
<!-- Menu List -->
<li>
<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>
<ul id="sidebarNav2One" class="collapse list-unstyled" data-parent="#sidebarNav2">
<li><a class="dropdown-item" href="#">Accessories</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Home Audio</a></li>
<li>
<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>
<ul id="sidebarNav2Two" class="collapse list-unstyled" data-parent="#sidebarNav2">
<li><a class="dropdown-item" href="#">Kitchen</a></li>
<li><a class="dropdown-item" href="#">Living room</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Cooling & air treatment</a></li>
<li><a class="dropdown-item" href="#">Vacuums & floor care</a></li>
<!-- End Menu List -->
</ul>
</div>
</li>
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2 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="#sidebarNav">
<ul id="sidebarNav3" class="list-unstyled">
<!-- Menu List -->
<li><a class="dropdown-item" href="#">Food supplements</a></li>
<li><a class="dropdown-item" href="#">Skincare</a></li>
<li><a class="dropdown-item" href="#">Makeup</a></li>
<li>
<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>
<ul id="sidebarNav3One" class="collapse list-unstyled" data-parent="#sidebarNav3">
<li><a class="dropdown-item" href="#">Men</a></li>
<li><a class="dropdown-item" href="#">Women</a></li>
</ul>
</li>
<li>
<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>
<ul id="sidebarNav3Two" class="collapse list-unstyled" data-parent="#sidebarNav3">
<li><a class="dropdown-item" href="#">Bath & body</a></li>
<li><a class="dropdown-item" href="#">Hair care</a></li>
<li><a class="dropdown-item" href="#">Personal care</a></li>
</ul>
</li>
<!-- End Menu List -->
</ul>
</div>
</li>
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2" href="#">
Accessories
</a>
</li>
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2" href="#">
Furniture
</a>
</li>
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2" href="#">
Casual
</a>
</li>
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2 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="#sidebarNav">
<ul id="sidebarNav4" class="list-unstyled">
<!-- Menu List -->
<li>
<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>
<ul id="sidebarNav4One" class="collapse list-unstyled" data-parent="#sidebarNav4">
<li><a class="dropdown-item" href="#">Feeding</a></li>
<li><a class="dropdown-item" href="#">Milk formula</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Diapering & potty</a></li>
<li><a class="dropdown-item" href="#">Nursery</a></li>
<li><a class="dropdown-item" href="#">Baby personal care</a></li>
<li><a class="dropdown-item" href="#">Clothing & accessories</a></li>
<li><a class="dropdown-item" href="#">Baby and & toys</a></li>
<!-- End Menu List -->
</ul>
</div>
</li>
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2" href="#">
Sports & travel
</a>
</li>
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2" href="#">
Fashion
</a>
</li>
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2" href="#">
Glasses
</a>
</li>
<li>
<a class="d-block text-dark font-size-1 font-weight-medium py-2 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="#sidebarNav">
<ul id="sidebarNav5" class="list-unstyled">
<!-- Menu List -->
<li>
<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>
<ul id="sidebarNav5One" class="collapse list-unstyled" data-parent="#sidebarNav5">
<li><a class="dropdown-item" href="#">Services & installations</a></li>
<li><a class="dropdown-item" href="#">Auto oils & fluids</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Interior accessories</a></li>
<li><a class="dropdown-item" href="#">Exterior accessories</a></li>
<li><a class="dropdown-item" href="#">Car audio</a></li>
<li><a class="dropdown-item" href="#">Auto care</a></li>
<li><a class="dropdown-item" href="#">Riding gear</a></li>
<li>
<a class="dropdown-item dropdown-toggle dropdown-toggle-collapse" href="javascript:;" data-target="#sidebarNav5Two" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="sidebarNav5Two">
Motorcycle
</a>
<ul id="sidebarNav5Two" class="collapse list-unstyled" data-parent="#sidebarNav5">
<li><a class="dropdown-item" href="#">Services & installations</a></li>
<li><a class="dropdown-item" href="#">Auto oils & fluids</a></li>
</ul>
</li>
<!-- End Menu List -->
</ul>
</div>
</li>
</ul>
<!-- End List -->
</div>
</div>
<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]');
});
</script>
<div class="row">
<!-- Filters -->
<div class="col-lg-3">
<form>
<div class="border-bottom pb-4 mb-4">
<h4 class="h6 mb-3">Price</h4>
<!-- Range Slider -->
<input class="js-range-slider" type="text"
data-extra-classes="u-range-slider u-range-slider-indicator u-range-slider-grid"
data-type="double"
data-grid="true"
data-hide-from-to="false"
data-prefix="$"
data-min="0"
data-max="500"
data-from="25"
data-to="475"
data-result-min="#rangeSliderExample3MinResult"
data-result-max="#rangeSliderExample3MaxResult">
<div class="d-flex justify-content-between mt-4">
<input type="text" class="form-control form-control-sm max-width-10" id="rangeSliderExample3MinResult">
<input type="text" class="form-control form-control-sm max-width-10 mt-0" id="rangeSliderExample3MaxResult">
</div>
<!-- End Range Slider -->
</div>
<div class="border-bottom pb-4 mb-4">
<h4 class="h6 mb-3">Gender</h4>
<!-- Checkboxes -->
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-md text-secondary 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-md" 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-md text-secondary 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-md" for="genderWomen">Women</label>
</div>
<small>51</small>
</div>
<!-- End Checkboxes -->
</div>
<div class="border-bottom pb-4 mb-4">
<h4 class="h6 mb-3">Brand</h4>
<!-- Checkboxes -->
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-md text-secondary 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-md text-secondary 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-md text-secondary 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-md text-secondary 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-md text-secondary 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-md text-secondary 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-md text-secondary 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 class="link__icon-inner">+</span>
</span>
</a>
<!-- End Link -->
</div>
<div class="border-bottom pb-4 mb-4">
<h4 class="h6 mb-3">Size</h4>
<!-- Checkboxes -->
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-md text-secondary 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-md text-secondary 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-md text-secondary 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-md text-secondary 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-md text-secondary 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 class="h6 mb-3">Category</h4>
<!-- Checkboxes -->
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-md text-secondary 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-md" 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-md text-secondary mb-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="categoryShoes">
<label class="custom-control-label text-lh-md" 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-md text-secondary 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-md" 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-md text-secondary 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-md text-secondary 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-md text-secondary 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-md text-secondary 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-md text-secondary 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 class="link__icon-inner">+</span>
</span>
</a>
<!-- End Link -->
</div>
<div class="border-bottom pb-4 mb-4">
<h4 class="h6 mb-3">Rating</h4>
<!-- Checkboxes -->
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-md text-secondary 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">
<span class="fas fa-star"></span>
<span class="far fa-star text-muted"></span>
<span class="far fa-star text-muted"></span>
<span class="far fa-star text-muted"></span>
<span class="far fa-star text-muted"></span>
</span>
</label>
</div>
<small>3</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-md text-secondary 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">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="far fa-star text-muted"></span>
<span class="far fa-star text-muted"></span>
<span class="far fa-star text-muted"></span>
</span>
</label>
</div>
<small>10</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-md text-secondary 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">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="far fa-star text-muted"></span>
<span class="far fa-star text-muted"></span>
</span>
</label>
</div>
<small>34</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-md text-secondary 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">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="far fa-star text-muted"></span>
</span>
</label>
</div>
<small>86</small>
</div>
<div class="form-group d-flex align-items-center justify-content-between font-size-1 text-lh-md text-secondary 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">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</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>
<link rel="stylesheet" href="../../assets/vendor/ion-rangeslider/css/ion.rangeSlider.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.range-slider.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of forms
$.HSCore.components.HSRangeSlider.init('.js-range-slider');
});
</script>
Sidebar examples #9
<!-- Social Profiles -->
<div class="card mb-4">
<div class="card-header pt-4 pb-3 px-0 mx-4">
<h3 class="h6 mb-0">Social Profiles</h3>
</div>
<div class="card-body pt-3 pb-4 px-4">
<!-- Social Profiles -->
<a class="media mb-4" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img18.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Behance</span>
<small class="d-block text-secondary">1.2k followers</small>
</div>
</a>
<!-- End Social Profiles -->
<!-- Social Profiles -->
<a class="media mb-4" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img21.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Dribbble</span>
<small class="d-block text-secondary">4.5k followers</small>
</div>
</a>
<!-- End Social Profiles -->
<!-- Social Profiles -->
<a class="media mb-4" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img19.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Twitter</span>
<small class="d-block text-secondary">2.7k followers</small>
</div>
</a>
<!-- End Social Profiles -->
<!-- Social Profiles -->
<a class="media" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img20.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark">Facebook</span>
<small class="d-block text-secondary">3k followers</small>
</div>
</a>
<!-- End Social Profiles -->
</div>
</div>
<!-- End Social Profiles -->
Sidebar examples #10
Job Summary
www.slack.com
Website
London, UK
Location
Full time
Job type
1 to 3 months
Project length
Salary
$28k - $32k
Entry level
We are looking for freelancers with the lowest rates.
<!-- Sidebar Info -->
<div class="card border-0 shadow-sm mb-3">
<!-- Header -->
<header id="SVGwave1BottomShapeID1" class="svg-preloader card-header border-bottom-0 bg-primary text-white p-0">
<div class="pt-5 px-5">
<h3 class="h5">Job Summary</h3>
</div>
<figure class="ie-wave-1-bottom mt-n5">
<img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom.svg" alt="Image Description"
data-parent="#SVGwave1BottomShapeID1">
</figure>
</header>
<!-- End Header -->
<!-- Content -->
<div class="card-body pt-1 px-5 pb-5">
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-globe"></span>
</div>
<div class="media-body">
<a class="font-weight-medium" href="#">www.slack.com</a>
<small class="d-block text-secondary">Website</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-map-marked-alt"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">London, UK</span>
<small class="d-block text-secondary">Location</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-clock"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">Full time</span>
<small class="d-block text-secondary">Job type</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-business-time"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">1 to 3 months</span>
<small class="d-block text-secondary">Project length</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-money-bill-alt"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">Salary</span>
<small class="d-block text-secondary">$28k - $32k</small>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-3">
<div class="min-width-4 text-center text-primary mt-1 mr-3">
<span class="fas fa-briefcase"></span>
</div>
<div class="media-body">
<span class="d-block font-weight-medium">Entry level</span>
<small class="d-block text-secondary">We are looking for freelancers with the lowest rates.</small>
</div>
</div>
<!-- End Icon Block -->
</div>
<!-- End Content -->
</div>
<!-- End Sidebar Info -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>