Start your business on 10+ platforms – for free
Start your business on various platforms with one click.
Informative Blocks - Grid
Grid style of informative blocks/components.
Info #1
4.7 out of 5 starts from 12k reviews.
On average 15,000 users signup everyday.
Over 1 million files shared in a single day.
<!-- Stats Section -->
<div class="container space-2">
<div class="row justify-content-lg-center">
<div class="col-md-4 mb-7 mb-lg-0">
<!-- Stats -->
<div class="u-indicator-vertical-line text-center px-md-3 px-lg-7">
<figure id="statsStars" class="svg-preloader ie-height-72 w-100 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/stars.svg" alt="SVG"
data-parent="#statsStars">
</figure>
<p class="mb-0"><span class="text-dark font-weight-semi-bold">4.7 out of 5 starts</span> from 12k reviews.</p>
</div>
<!-- End Stats -->
</div>
<div class="col-md-4 mb-7 mb-lg-0">
<!-- Stats -->
<div class="u-indicator-vertical-line text-center px-md-3 px-lg-7">
<div class="max-width-11 mx-auto mb-3">
<img class="img-fluid" src="../../assets/img/others/img2.png" alt="Image Description">
</div>
<p class="mb-0">On average <span class="text-dark font-weight-semi-bold">15,000</span> users signup everyday.</p>
</div>
<!-- End Stats -->
</div>
<div class="col-md-4">
<!-- Stats -->
<div class="text-center px-md-3 px-lg-7">
<figure id="statsSharingFiles" class="svg-preloader ie-height-72 w-100 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/sharing-files.svg" alt="SVG"
data-parent="#statsSharingFiles">
</figure>
<p>Over <span class="text-dark font-weight-semi-bold">1 million</span> files shared in a single day.</p>
</div>
<!-- End Stats -->
</div>
</div>
</div>
<!-- End Stats Section -->
<!-- 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>
Info #2
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<div class="card card-frame transition-3d-hover mb-3">
<!-- Card -->
<a class="card-body" href="#">
<div class="media">
<div class="u-avatar">
<img class="img-fluid rounded" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Senior Java Developer</h4>
<small class="d-block text-muted">London, UK</small>
</div>
</div>
</a>
<!-- End Card -->
</div>
<div class="card card-frame transition-3d-hover mb-3">
<!-- Card -->
<a class="card-body" href="#">
<div class="media">
<div class="u-avatar">
<img class="img-fluid rounded" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
</div>
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Junior UX Designer</h4>
<small class="d-block text-muted">Manchester, UK</small>
</div>
</div>
</a>
<!-- End Card -->
</div>
<div class="card card-frame transition-3d-hover mb-3">
<!-- Card -->
<a class="card-body" href="#">
<div class="media">
<div class="u-avatar">
<img class="img-fluid rounded" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
</div>
<div class="media-body px-4">
<h4 class="h6 text-dark mb-1">Product Director</h4>
<small class="d-block text-muted">New York, NY</small>
</div>
</div>
</a>
<!-- End Card -->
</div>
</div>
Info #3
<div class="card-deck d-block d-lg-flex card-lg-gutters-3">
<!-- Card -->
<div class="card card-frame mb-3">
<a class="card-body p-4" href="#">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
</div>
<div class="media-body">
<span class="text-dark">Spotify</span>
<small class="d-block text-secondary">Logo redesign</small>
</div>
<div class="media-body text-right">
<span class="text-primary ml-3">
$1,903
</span>
</div>
</div>
</a>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card card-frame mb-3">
<a class="card-body p-4" href="#">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<span class="text-dark">Slack</span>
<small class="d-block text-secondary">Page redesign</small>
</div>
<div class="media-body text-right">
<span class="text-primary ml-3">
$3,500
</span>
</div>
</div>
</a>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card card-frame mb-3">
<a class="card-body p-4" href="#">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
</div>
<div class="media-body">
<span class="text-dark">Dropbox</span>
<small class="d-block text-secondary">Branding</small>
</div>
<div class="media-body text-right">
<span class="text-primary ml-3">
$7,250
</span>
</div>
</div>
</a>
</div>
<!-- End Card -->
</div>
Info #4
Work experience
Jul 2018
Senior Frontend Developer
at Google - SF, US
Aug 2016 - Jul 2018
Junior Frontend Developer
at Slack Inc - London, UKEducation
Sep 2009 - June 2013
BS in Computer Science
Harvard University
Sep 2014 - June 2016
MBA in Marketing
University of British Columbia
<!-- Info -->
<div class="row mb-7">
<div class="col-md-6 mb-7 mb-md-0">
<!-- Title -->
<div class="mb-3">
<h3 class="h6 mb-0">Work experience</h3>
</div>
<!-- End Title -->
<!-- Info -->
<div class="d-flex mb-5">
<img class="u-avatar align-self-center mr-4" src="../../assets/img/160x160/img17.png" alt="Image Description">
<div>
<small class="d-block text-secondary">Jul 2018</small>
<h4 class="h6 mb-0">Senior Frontend Developer</h4>
<span class="d-block text-secondary">at Google - SF, US</span>
</div>
</div>
<!-- End Info -->
<!-- Info -->
<div class="d-flex">
<img class="u-avatar align-self-center mr-4" src="../../assets/img/160x160/img14.png" alt="Image Description">
<div>
<small class="d-block text-secondary">Aug 2016 - Jul 2018</small>
<h4 class="h6 mb-0">Junior Frontend Developer</h4>
<span class="d-block text-secondary">at Slack Inc - London, UK</span>
</div>
</div>
<!-- End Info -->
</div>
<div class="col-md-6 mb-3 mb-md-0">
<!-- Title -->
<div class="mb-3">
<h3 class="h6 mb-0">Education</h3>
</div>
<!-- End Title -->
<!-- Info -->
<div class="row align-items-center mb-5">
<div class="col-4">
<img class="img-fluid" src="../../assets/img/logos/harvard-university.png" alt="Image Description">
</div>
<div class="col-8">
<small class="d-block text-secondary">Sep 2009 - June 2013</small>
<h4 class="h6 mb-0">BS in Computer Science</h4>
<span class="d-block text-secondary">Harvard University</span>
</div>
</div>
<!-- End Info -->
<!-- Info -->
<div class="row align-items-center">
<div class="col-4">
<img class="img-fluid" src="../../assets/img/logos/ubc.png" alt="Image Description">
</div>
<div class="col-8">
<small class="d-block text-secondary">Sep 2014 - June 2016</small>
<h4 class="h6 mb-0">MBA in Marketing</h4>
<span class="d-block text-secondary">University of British Columbia</span>
</div>
</div>
<!-- End Info -->
</div>
</div>
<!-- End Info -->
Info #5
I can start working right now and I can WORK FULL TIME on your project during the entire development of your project.
Location
London
Hourly
35Projects
15Bertha Sandoval
Senior Android, iOS, Web DeveloperHello and welcome! I am an Web Developer with more than 5 years of commercial experience in this area.
Location
Oxford
Hourly
30Projects
15
<!-- Freelancers -->
<div class="card-deck d-block d-lg-flex">
<!-- Item -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- Header -->
<div class="media align-items-center mb-4">
<!-- Avatar -->
<div class="u-avatar position-relative mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
<span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-left rounded-circle"></span>
</div>
<!-- End Avatar -->
<div class="media-body">
<h1 class="h6 mb-0">
<a href="employee-profile.html">Jorge Fields</a>
</h1>
<small class="text-secondary">Apps and Web developer</small>
</div>
<div class="align-self-start ml-auto">
<!-- Bookmark -->
<div class="bookmark-checkbox d-inline-block" data-toggle="tooltip" data-placement="top" title="Save">
<input type="checkbox" class="bookmark-checkbox-input" id="bookmark9">
<label class="bookmark-checkbox-label" for="bookmark9"></label>
</div>
<!-- End Bookmark -->
</div>
</div>
<!-- End Header -->
<p class="font-size-1">I can start working right now and I can WORK FULL TIME on your project during the entire development of your project.</p>
</div>
<div class="card-footer border-top-0 pt-0 px-4 pb-4">
<div class="d-sm-flex align-items-sm-center">
<!-- Location -->
<div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
<h2 class="small text-secondary mb-0">Location</h2>
<img class="img-fluid max-width-3 rounded-circle align-middle mr-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag">
<span class="align-middle font-size-1 font-weight-medium">London</span>
</div>
<!-- End Location -->
<!-- Hourly -->
<div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
<h3 class="small text-secondary mb-0">Hourly</h3>
<small class="fas fa-clock text-secondary mr-1"></small>
<span class="align-middle font-size-1 font-weight-medium">35</span>
</div>
<!-- End Hourly -->
<!-- Projects -->
<div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
<h4 class="small text-secondary mb-0">Projects</h4>
<small class="fas fa-briefcase text-secondary mr-1"></small>
<span class="align-middle font-size-1 font-weight-medium">15</span>
</div>
<!-- End Projects -->
<!-- Review -->
<div class="small">
<div class="text-warning mb-1">
<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>
</div>
<span class="font-weight-semi-bold">4.91</span>
<span class="text-muted">(12k+ reviews)</span>
</div>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- Header -->
<div class="media align-items-center mb-4">
<!-- Avatar -->
<span class="btn btn-icon btn-soft-primary rounded-circle mr-4">
<span class="btn-icon__inner">BS</span>
<span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-left rounded-circle"></span>
</span>
<!-- End Avatar -->
<div class="media-body">
<h3 class="h6 mb-0">
<a href="employee-profile.html">Bertha Sandoval</a>
</h3>
<small class="text-secondary">Senior Android, iOS, Web Developer</small>
</div>
<div class="align-self-start ml-auto">
<!-- Bookmark -->
<div class="bookmark-checkbox d-inline-block" data-toggle="tooltip" data-placement="top" title="Save">
<input type="checkbox" class="bookmark-checkbox-input" id="bookmark10">
<label class="bookmark-checkbox-label" for="bookmark10"></label>
</div>
<!-- End Bookmark -->
</div>
</div>
<!-- End Header -->
<p class="font-size-1">Hello and welcome! I am an Web Developer with more than 5 years of commercial experience in this area.</p>
</div>
<div class="card-footer border-top-0 pt-0 px-4 pb-4">
<div class="d-sm-flex align-items-sm-center">
<!-- Location -->
<div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
<h4 class="small text-secondary mb-0">Location</h4>
<img class="img-fluid max-width-3 rounded-circle align-middle mr-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag">
<span class="align-middle font-size-1 font-weight-medium">Oxford</span>
</div>
<!-- End Location -->
<!-- Hourly -->
<div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
<h4 class="small text-secondary mb-0">Hourly</h4>
<small class="fas fa-clock text-secondary mr-1"></small>
<span class="align-middle font-size-1 font-weight-medium">30</span>
</div>
<!-- End Hourly -->
<!-- Projects -->
<div class="u-ver-divider u-ver-divider--none-sm pr-4 mr-4 mb-3 mb-sm-0">
<h4 class="small text-secondary mb-0">Projects</h4>
<small class="fas fa-briefcase text-secondary mr-1"></small>
<span class="align-middle font-size-1 font-weight-medium">15</span>
</div>
<!-- End Projects -->
<!-- Success Rate -->
<div class="mr-3">
<!-- Review -->
<div class="small">
<div class="text-warning mb-1">
<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>
</div>
<span class="font-weight-semi-bold">4.5</span>
<span class="text-muted">(132 reviews)</span>
</div>
<!-- End Review -->
</div>
<!-- End Success Rate -->
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Freelancers -->
Info #6
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<!-- Friends List -->
<a class="card card-frame mb-3" href="#">
<div class="card-body">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 text-dark mb-0">Patrick Garner</h4>
<span>Refer</span>
</div>
</div>
</div>
</a>
<!-- End Friends List -->
<!-- Friends List -->
<a class="card card-frame mb-3" href="#">
<div class="card-body">
<div class="media">
<span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
<span class="btn-icon__inner">CB</span>
</span>
<div class="media-body">
<h4 class="h6 text-dark mb-0">Cameron Brown</h4>
<span>Refer</span>
</div>
</div>
</div>
</a>
<!-- End Friends List -->
<!-- Friends List -->
<a class="card card-frame mb-3" href="#">
<div class="card-body">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 text-dark mb-0">Sebastian Diaz</h4>
<span>Refer</span>
</div>
</div>
</div>
</a>
<!-- End Friends List -->
</div>
Info #7
Jorge Fields
Apps and Web developerI can start working right now and I can WORK FULL TIME on your project during the entire development of your project.
Location
London
Working rate
$35/hrBertha Sandoval
Senior Android, iOS, Web DeveloperHello and welcome! I am an Web Developer with more than 5 years of commercial experience in this area.
Location
London
Working rate
$30/hr
<!-- Info -->
<div class="card-deck d-block d-lg-flex">
<!-- Item -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- Header -->
<div class="d-flex align-items-center mb-5">
<!-- Rating -->
<div class="position-relative">
<a id="rating8DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
aria-controls="rating8Dropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#rating8Dropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
4.5
</a>
<div id="rating8Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating8DropdownInvoker" style="width: 190px;">
<div class="d-flex align-items-center mb-2">
<span class="text-warning mr-2">4.5</span>
<ul class="list-inline mb-0">
<li class="list-inline-item 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-half-alt"></span>
</li>
</ul>
</div>
<p class="text-dark mb-0">Overal Rating</p>
<p class="mb-0">Based on 132 reviews</p>
</div>
</div>
<!-- End Rating -->
<!-- Bookmark -->
<div class="ml-auto">
<div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save">
<input type="checkbox" class="bookmark-checkbox-input" id="bookmark6">
<label class="bookmark-checkbox-label" for="bookmark6"></label>
</div>
</div>
<!-- End Bookmark -->
</div>
<!-- End Header -->
<div class="text-center">
<!-- Avatar -->
<div class="u-lg-avatar position-relative mx-auto mb-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
<span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-left rounded-circle"></span>
</div>
<!-- End Avatar -->
<!-- Title -->
<div class="mb-4">
<h1 class="h5 mb-0">
<a href="#">Jorge Fields</a>
</h1>
<small class="text-secondary">Apps and Web developer</small>
</div>
<!-- End Title -->
<p class="mb-0">I can start working right now and I can WORK FULL TIME on your project during the entire development of your project.</p>
</div>
</div>
<div class="card-footer text-center py-4">
<!-- Location & Rate -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h2 class="small text-secondary mb-0">Location</h2>
<img class="img-fluid max-width-3 rounded-circle align-middle mr-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag">
<span class="align-middle">London</span>
</div>
<div class="col-6">
<h3 class="small text-secondary mb-0">Working rate</h3>
<span class="align-middle">$35/hr</span>
</div>
</div>
<!-- End Location & Rate -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- Header -->
<div class="d-flex align-items-center mb-5">
<!-- Rating -->
<div class="position-relative">
<a id="rating9DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
aria-controls="rating9Dropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#rating9Dropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
4.7
</a>
<div id="rating9Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating9DropdownInvoker" style="width: 190px;">
<div class="d-flex align-items-center mb-2">
<span class="text-warning mr-2">4.7</span>
<ul class="list-inline mb-0">
<li class="list-inline-item 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-half-alt"></span>
</li>
</ul>
</div>
<p class="text-dark mb-0">Overal Rating</p>
<p class="mb-0">Based on 120 reviews</p>
</div>
</div>
<!-- End Rating -->
<!-- Bookmark -->
<div class="ml-auto">
<div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save">
<input type="checkbox" class="bookmark-checkbox-input" id="bookmark7">
<label class="bookmark-checkbox-label" for="bookmark7"></label>
</div>
</div>
<!-- End Bookmark -->
</div>
<!-- End Header -->
<div class="text-center">
<!-- Avatar -->
<span class="btn btn-lg btn-icon btn-soft-primary rounded-circle mb-3">
<span class="btn-icon__inner">BS</span>
<span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-left rounded-circle"></span>
</span>
<!-- End Avatar -->
<!-- Title -->
<div class="mb-4">
<h3 class="h5 mb-0">
<a href="#">Bertha Sandoval</a>
</h3>
<small class="text-secondary">Senior Android, iOS, Web Developer</small>
</div>
<!-- End Title -->
<p class="mb-0">Hello and welcome! I am an Web Developer with more than 5 years of commercial experience in this area.</p>
</div>
</div>
<div class="card-footer text-center py-4">
<!-- Location & Rate -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h4 class="small text-secondary mb-0">Location</h4>
<img class="img-fluid max-width-3 rounded-circle align-middle mr-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag">
<span class="align-middle">London</span>
</div>
<div class="col-6">
<h4 class="small text-secondary mb-0">Working rate</h4>
<span class="align-middle">$30/hr</span>
</div>
</div>
<!-- End Location & Rate -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- Header -->
<div class="d-flex align-items-center mb-5">
<!-- Rating -->
<div class="position-relative">
<a id="rating10DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
aria-controls="rating10Dropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#rating10Dropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
3.9
</a>
<div id="rating10Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating10DropdownInvoker" style="width: 190px;">
<div class="d-flex align-items-center mb-2">
<span class="text-warning mr-2">3.9</span>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star-half-alt"></span>
<span class="far fa-star"></span>
<span class="far fa-star"></span>
</li>
</ul>
</div>
<p class="text-dark mb-0">Overal Rating</p>
<p class="mb-0">Based on 85 reviews</p>
</div>
</div>
<!-- End Rating -->
<!-- Bookmark -->
<div class="ml-auto">
<div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save">
<input type="checkbox" class="bookmark-checkbox-input" id="bookmark8">
<label class="bookmark-checkbox-label" for="bookmark8"></label>
</div>
</div>
<!-- End Bookmark -->
</div>
<!-- End Header -->
<div class="text-center">
<!-- Avatar -->
<div class="u-lg-avatar position-relative mx-auto mb-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img10.jpg" alt="Image Description">
<span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-left rounded-circle"></span>
</div>
<!-- End Avatar -->
<!-- Title -->
<div class="mb-4">
<h3 class="h5 mb-0">
<a href="#">Ola Nunez</a>
</h3>
<small class="text-secondary">Fullstack Web developer</small>
</div>
<!-- End Title -->
<p class="mb-0">I am an expert in Web development with 6+ years of experience, currently working as a team leader, solution architect, and developer.</p>
</div>
</div>
<div class="card-footer text-center py-4">
<!-- Location & Rate -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h4 class="small text-secondary mb-0">Location</h4>
<img class="img-fluid max-width-3 rounded-circle align-middle mr-1" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag">
<span class="align-middle">Leicester</span>
</div>
<div class="col-6">
<h4 class="small text-secondary mb-0">Working rate</h4>
<span class="align-middle">$49/hr</span>
</div>
</div>
<!-- End Location & Rate -->
</div>
</div>
<!-- End Item -->
</div>
<!-- End Info -->
<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
});
</script>
Info #8
<div class="card-deck d-block d-lg-flex card-lg-gutters-3">
<div class="card card-frame text-center mb-5">
<!-- Card -->
<div class="card-body p-6">
<div class="u-avatar mx-auto mb-4">
<img class="img-fluid rounded" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="mb-4">
<h4 class="h6 mb-1">IT business manager</h4>
<p>London, UK</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-wide" href="#">View Details</a>
</div>
<!-- End Card -->
</div>
<div class="card card-frame text-center mb-5">
<!-- Card -->
<div class="card-body p-6">
<div class="u-avatar mx-auto mb-4">
<img class="img-fluid rounded" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
</div>
<div class="mb-4">
<h4 class="h6 mb-1">Membership director</h4>
<p>Manchester, UK</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-wide" href="#">View Details</a>
</div>
<!-- End Card -->
</div>
<div class="card card-frame text-center mb-5">
<!-- Card -->
<div class="card-body p-6">
<div class="u-avatar mx-auto mb-4">
<img class="img-fluid rounded" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
</div>
<div class="mb-4">
<h4 class="h6 mb-1">UI/UX designer</h4>
<p>New York, NY</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-wide" href="#">View Details</a>
</div>
<!-- End Card -->
</div>
</div>
Info #9
<div class="card-deck d-block d-md-flex">
<!-- Projects -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- List of Icons -->
<div class="row justify-content-between align-items-center mb-4">
<div class="col-6">
<a class="small text-secondary" href="#">
<span class="fas fa-bookmark text-primary mr-1"></span>
FR-52
</a>
</div>
<div class="col-6 text-right">
<!-- Settings -->
<div class="position-relative">
<a id="settingsDropdown1InvokerExample2" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
aria-controls="settingsDropdownExample2"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#settingsDropdownExample2"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fas fa-ellipsis-h btn-icon__inner"></span>
</a>
<div id="settingsDropdownExample2" class="dropdown-menu dropdown-unfold" aria-labelledby="settingsDropdown1InvokerExample2" style="min-width: 160px;">
<a class="dropdown-item" href="#">
<small class="fas fa-cogs dropdown-item-icon"></small>
Settings
</a>
<a class="dropdown-item" href="#">
<small class="fas fa-code-branch dropdown-item-icon"></small>
Repository
</a>
<a class="dropdown-item" href="#">
<small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
Download
</a>
<a class="dropdown-item" href="#">
<small class="fas fa-archive dropdown-item-icon"></small>
Archive
</a>
</div>
</div>
<!-- End Settings -->
</div>
</div>
<!-- End List of Icons -->
<div class="text-center">
<div class="u-lg-avatar mx-auto mb-3">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
</div>
<!-- Title -->
<div class="mb-4">
<h3 class="h5 mb-1">Mapbox</h3>
<p class="font-size-1">The time has come to bring those ideas and plans to life.</p>
</div>
<!-- End Title -->
<h4 class="h6 font-weight-normal mb-1">Members</h4>
<!-- Members List -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Patrick Garner">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0">
<a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
<span class="btn-icon__inner">+3</span>
</a>
</li>
</ul>
<!-- End Members List -->
</div>
</div>
<div class="card-footer text-center">
<!-- Budget & Priority -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
<span class="text-dark">$9,145</span>
</div>
<div class="col-6">
<h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
<span class="fas fa-arrow-up text-warning small"></span>
<span class="text-dark">Medium</span>
</div>
</div>
<!-- End Budget & Priority -->
</div>
</div>
<!-- End Projects -->
<!-- Projects -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- List of Icons -->
<div class="row justify-content-between align-items-center mb-4">
<div class="col-6">
<a class="small text-secondary" href="#">
<span class="fas fa-bookmark text-primary mr-1"></span>
FR-13
</a>
</div>
<div class="col-6 text-right">
<!-- Settings -->
<div class="position-relative">
<a id="settingsDropdown2Invoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
aria-controls="settingsDropdown2"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#settingsDropdown2"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fas fa-ellipsis-h btn-icon__inner"></span>
</a>
<div id="settingsDropdown2" class="dropdown-menu dropdown-unfold" aria-labelledby="settingsDropdown2Invoker" style="min-width: 160px;">
<a class="dropdown-item" href="#">
<small class="fas fa-cogs dropdown-item-icon"></small>
Settings
</a>
<a class="dropdown-item" href="#">
<small class="fas fa-code-branch dropdown-item-icon"></small>
Repository
</a>
<a class="dropdown-item" href="#">
<small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
Download
</a>
<a class="dropdown-item" href="#">
<small class="fas fa-archive dropdown-item-icon"></small>
Archive
</a>
</div>
</div>
<!-- End Settings -->
</div>
</div>
<!-- End List of Icons -->
<div class="text-center">
<div class="u-lg-avatar mx-auto mb-3">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<!-- Title -->
<div class="mb-4">
<h3 class="h5 mb-1">Slack</h3>
<p class="font-size-1">Using our creative gifts drives this foundation.</p>
</div>
<!-- End Title -->
<h4 class="h6 font-weight-normal mb-1">Members</h4>
<!-- Members List -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0">
<a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
<span class="btn-icon__inner">+1</span>
</a>
</li>
</ul>
<!-- End Members List -->
</div>
</div>
<div class="card-footer text-center">
<!-- Budget & Priority -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
<span class="text-dark">$3,120</span>
</div>
<div class="col-6">
<h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
<span class="fas fa-arrow-down text-success small"></span>
<span class="text-dark">Low</span>
</div>
</div>
<!-- End Budget & Priority -->
</div>
</div>
<!-- End Projects -->
<!-- Projects -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- List of Icons -->
<div class="row justify-content-between align-items-center mb-4">
<div class="col-6">
<a class="small text-secondary" href="#">
<span class="fas fa-bookmark text-primary mr-1"></span>
FR-36
</a>
</div>
<div class="col-6 text-right">
<!-- Settings -->
<div class="position-relative">
<a id="settingsDropdown3Invoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
aria-controls="settingsDropdown3"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#settingsDropdown3"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fas fa-ellipsis-h btn-icon__inner"></span>
</a>
<div id="settingsDropdown3" class="dropdown-menu dropdown-unfold" aria-labelledby="settingsDropdown3Invoker" style="min-width: 160px;">
<a class="dropdown-item" href="#">
<small class="fas fa-cogs dropdown-item-icon"></small>
Settings
</a>
<a class="dropdown-item" href="#">
<small class="fas fa-code-branch dropdown-item-icon"></small>
Repository
</a>
<a class="dropdown-item" href="#">
<small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
Download
</a>
<a class="dropdown-item" href="#">
<small class="fas fa-archive dropdown-item-icon"></small>
Archive
</a>
</div>
</div>
<!-- End Settings -->
</div>
</div>
<!-- End List of Icons -->
<div class="text-center">
<div class="u-lg-avatar mx-auto mb-3">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
</div>
<!-- Title -->
<div class="mb-4">
<h3 class="h5 mb-1">DropBox</h3>
<p class="font-size-1">It's important to stay detail oriented with every project we tackle.</p>
</div>
<!-- End Title -->
<h4 class="h6 font-weight-normal mb-1">Members</h4>
<!-- Members List -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0">
<a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
<span class="btn-icon__inner">+9</span>
</a>
</li>
</ul>
<!-- End Members List -->
</div>
</div>
<div class="card-footer text-center">
<!-- Budget & Priority -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
<span class="text-dark">$15,000</span>
</div>
<div class="col-6">
<h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
<span class="fas fa-arrow-up text-danger small"></span>
<span class="text-dark">Highest</span>
</div>
</div>
<!-- End Budget & Priority -->
</div>
</div>
<!-- End Projects -->
</div>
Info #10
Front project - July 2018 $250 per year
License purchased: 1
License assigned: 1
Change plan Edit/Remove LicenseTotal
$250/yearly
Payment method: Card ending in 9050
Will renew on: July 15, 2019
Edit Payment Details View Invoices
<div class="card-deck d-block d-md-flex">
<div class="card mb-4 mb-md-0">
<!-- Card -->
<div class="card-body p-5">
<h4 class="h6">Front project - July 2018 <span class="btn btn-xs btn-soft-success">$250 per year</span></h4>
<p class="font-size-1 mb-0">License purchased: <span class="text-dark font-weight-medium">1</span></p>
<p class="font-size-1">License assigned: <span class="text-dark font-weight-medium">1</span></p>
<a class="btn btn-xs btn-primary transition-3d-hover mr-1" href="#">Change plan</a>
<a class="btn btn-xs btn-soft-secondary transition-3d-hover" href="#">Edit/Remove License</a>
</div>
<!-- End Card -->
</div>
<div class="card">
<!-- Card -->
<div class="card-body p-5">
<h4 class="h6">Total</h4>
<h5 class="font-weight-normal">$250/yearly</h5>
<p class="font-size-1 mb-0">Payment method: <span class="text-dark font-weight-medium">Card ending in 9050</span></p>
<p class="font-size-1">Will renew on: <span class="text-dark font-weight-medium">July 15, 2019</span></p>
<a class="btn btn-xs btn-primary transition-3d-hover mr-1" href="#">Edit Payment Details</a>
<a class="btn btn-xs btn-soft-secondary transition-3d-hover" href="#">View Invoices</a>
<!-- End Card -->
</div>
</div>
</div>
Info #11
<div class="card-deck d-block d-md-flex">
<!-- Members -->
<div class="card text-center mb-3 mb-5">
<div class="card-body p-6">
<!-- Team -->
<div class="mb-4">
<div class="position-relative u-lg-avatar mx-auto mb-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
<span class="badge badge-xs badge-outline-primary badge-pos badge-pos--bottom-left rounded-circle"></span>
</div>
<a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<span class="far fa-star btn-icon__inner"></span>
</a>
<h2 class="h6 mb-0">
<a href="#">Patrick Garner</a>
</h2>
<a class="small" href="#">@patrickgarner</a>
</div>
<!-- End Team -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-facebook-f btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-google btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-twitter btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-github btn-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<div class="card-footer py-4 px-6">
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
<span class="far fa-envelope mr-2"></span>
Send a Message
</a>
</div>
</div>
<!-- End Members -->
<!-- Members -->
<div class="card text-center mb-3 mb-5">
<div class="card-body p-6">
<!-- Team -->
<div class="mb-4">
<span class="btn btn-lg btn-icon btn-soft-danger rounded-circle mb-3">
<span class="btn-icon__inner">AO</span>
<span class="badge badge-xs badge-outline-danger badge-pos badge-pos--bottom-left rounded-circle"></span>
</span>
<a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<span class="far fa-star btn-icon__inner"></span>
</a>
<h2 class="h6 mb-0">
<a href="#">Amanta Owens</a>
</h2>
<a class="small" href="#">@uidesginer</a>
</div>
<!-- End Team -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-facebook-f btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-google btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-twitter btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-github btn-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<div class="card-footer py-4 px-6">
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
<span class="far fa-envelope mr-2"></span>
Send a Message
</a>
</div>
</div>
<!-- End Members -->
<!-- Members -->
<div class="card text-center mb-3 mb-5">
<div class="card-body p-6">
<!-- Team -->
<div class="mb-4">
<div class="position-relative u-lg-avatar mx-auto mb-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
<span class="badge badge-xs badge-outline-primary badge-pos badge-pos--bottom-left rounded-circle"></span>
</div>
<a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<span class="far fa-star btn-icon__inner"></span>
</a>
<h2 class="h6 mb-0">
<a href="#">Sebastian Diaz</a>
</h2>
<a class="small" href="#">@gamechanger</a>
</div>
<!-- End Team -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-facebook-f btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-google btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-twitter btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-sm btn-icon btn-soft-secondary rounded-circle" href="#">
<span class="fab fa-github btn-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<div class="card-footer py-4 px-6">
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
<span class="far fa-envelope mr-2"></span>
Send a Message
</a>
</div>
</div>
<!-- End Members -->
</div>
Info #12
<!-- Articles Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-6 mb-5 mb-lg-0">
<!-- Card -->
<article class="card border-0 h-100 shadow-soft">
<div class="w-sm-65 p-5">
<h3 class="h4 mb-3">Start your business on 10+ platforms – for free</h3>
<div class="mb-4">
<p>Start your business on various platforms with one click.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="#">Find out More <span class="fas fa-angle-right ml-1"></span></a>
</div>
<div id="docsSVG1" class="svg-preloader position-absolute bottom-0 right-0 w-sm-35 max-width-27">
<figure class="ie-support-man">
<img class="js-svg-injector" src="../../assets/svg/illustrations/support-man.svg" alt="Image Description"
data-parent="#docsSVG1">
</figure>
</div>
</article>
<!-- End Card -->
</div>
<div class="col-lg-6">
<!-- Card -->
<article class="card border-0 h-100 shadow-soft">
<div class="w-sm-65 p-5">
<h3 class="h4 mb-3">Read more about Documentation</h3>
<div class="mb-4">
<p>Evaluate your options better and learn more about them.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="#">Find out More <span class="fas fa-angle-right ml-1"></span></a>
</div>
<div id="docsSVG2" class="svg-preloader position-absolute bottom-0 right-0 w-sm-35 max-width-27">
<figure class="ie-list-app">
<img class="js-svg-injector" src="../../assets/svg/illustrations/list-app.svg" alt="Image Description"
data-parent="#docsSVG2">
</figure>
</div>
</article>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Articles Section -->
<!-- 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>
Info #13
I'm a Seller
Discover how much property sold for with our comprehensive house price data.
Sell my Home
I'm a Buyer
Ensure you find the right home, near the right school with new School Checker tool.
Buy a Home
<!-- Icon Blocks Section -->
<div class="bg-light">
<div class="container space-2">
<div class="w-lg-85 mx-lg-auto">
<div class="card-deck d-block d-md-flex card-md-gutters-3">
<!-- Card -->
<article class="card text-center">
<div class="card-body p-7">
<!-- SVG Icon -->
<div id="SVGforSale" class="svg-preloader w-75 mx-auto mb-6">
<figure class="ie-for-sale">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/for-sale.svg" alt="Image Description"
data-parent="#SVGforSale">
</figure>
</div>
<!-- End SVG Icon -->
<h3 class="h4 mb-3">I'm a Seller</h3>
<p class="mb-4">Discover how much property sold for with our comprehensive house price data.</p>
<a class="btn btn-sm btn-soft-danger transition-3d-hover" href="#">
Sell my Home
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
</article>
<!-- End Card -->
<!-- Card -->
<article class="card text-center">
<div class="card-body p-7">
<!-- SVG Icon -->
<div id="SVGbuyer" class="svg-preloader w-75 mx-auto mb-6">
<figure class="ie-buyer">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/buyer.svg" alt="Image Description"
data-parent="#SVGbuyer">
</figure>
</div>
<!-- End SVG Icon -->
<h3 class="h4 mb-3">I'm a Buyer</h3>
<p class="mb-4">Ensure you find the right home, near the right school with new School Checker tool.</p>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
Buy a Home
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
</article>
<!-- End Card -->
</div>
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
<!-- 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>
Info #14
Front made simple
Easily draft, change, customize and launch new course pages with an easy-to-use template.
<!-- Services Section -->
<div id="servicesSection" class="container space-2">
<div class="card-deck card-sm-gutters-3 d-block d-md-flex">
<!-- Card -->
<div class="card text-center mb-4 mb-md-0">
<div class="card-body space-3 px-5">
<div class="mb-4">
<figure id="icon24" class="svg-preloader ie-height-72 w-100 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-24.svg" alt="SVG"
data-parent="#icon24">
</figure>
<h3 class="h4">Front made simple</h3>
<p>Easily draft, change, customize and launch new course pages with an easy-to-use template.</p>
</div>
<a class="btn btn-primary btn-wide transition-3d-hover" href="../../documentation/index.html">Learn More</a>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div id="SVGcardSection" class="svg-preloader card z-index-2 text-center">
<div class="card-body space-3 px-5">
<div class="mb-4">
<figure id="icon23" class="svg-preloader ie-height-72 w-100 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-23.svg" alt="SVG"
data-parent="#icon23">
</figure>
<h3 class="h4">Front in action</h3>
<p>You can work with your existing website or create new pages on Front.</p>
</div>
<a class="btn btn-primary btn-wide transition-3d-hover" href="../../starter/index.html">Get Started</a>
</div>
<!-- SVG Component -->
<div class="position-absolute top-0 left-0 w-100 max-width-15 z-index-n1">
<figure class="ie-abstract-shapes-9">
<img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-9.svg" alt="Image Description"
data-parent="#SVGcardSection">
</figure>
</div>
<!-- End SVG Component -->
<!-- SVG Component -->
<div class="position-absolute bottom-0 right-0 w-100 max-width-15 z-index-n1">
<figure class="ie-abstract-shapes-6">
<img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-6.svg" alt="Image Description"
data-parent="#SVGcardSection">
</figure>
</div>
<!-- End SVG Component -->
</div>
<!-- End Card -->
</div>
</div>
<!-- End Services Section -->
<!-- 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>
Info #15
Responsive
Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.
Explore now
Customizable
Front template can be easily customized with its cutting-edge components and features.
Explore now
Premium sketch
Front is not only for developers but also for designers, and includes a Sketch file.
Explore now
<!-- Info -->
<div class="container space-2">
<div id="SVGkeyFeatures" class="svg-preloader card-deck card-lg-gutters-2 d-block d-lg-flex">
<div class="card shadow mb-3 mb-lg-0">
<!-- Icon Blocks -->
<div class="card-body p-5">
<figure class="ie-height-56 w-100 max-width-8 mb-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
data-parent="#SVGkeyFeatures">
</figure>
<h3 class="h5">Responsive</h3>
<p class="font-size-1">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
<a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="card shadow mb-3 mb-lg-0">
<!-- Icon Blocks -->
<div class="card-body p-5">
<figure class="ie-height-56 w-100 max-width-8 mb-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-3.svg" alt="SVG"
data-parent="#SVGkeyFeatures">
</figure>
<h3 class="h5">Customizable</h3>
<p class="font-size-1">Front template can be easily customized with its cutting-edge components and features.</p>
<a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="card bg-primary text-white shadow-primary-lg mb-3 mb-lg-0">
<!-- Icon Blocks -->
<div class="card-body p-5">
<figure class="ie-height-56 w-100 max-width-8 mb-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-white-5.svg" alt="SVG"
data-parent="#SVGkeyFeatures">
</figure>
<h3 class="h5">Premium <span class="badge badge-success font-weight-medium badge-pill ml-1">sketch</span></h3>
<p class="text-white font-size-1">Front is not only for developers but also for designers, and includes a Sketch file.</p>
<a class="text-white font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="card shadow">
<!-- Icon Blocks -->
<div class="card-body p-5">
<figure class="ie-height-56 w-100 max-width-8 mb-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-2.svg" alt="SVG"
data-parent="#SVGkeyFeatures">
</figure>
<h3 class="h5">Documentation</h3>
<p class="font-size-1">Every component and plugin is well documented with live examples.</p>
<a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<!-- End 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>
Info #16
Getting started
Welcome to Front! We're so glad you're here. Let's get started!
1 article in this collection
Written by
Luisa Woodfine
and
Neil Galavan
Account
Adjust your profile and preferences to make Front work just for you!
2 article in this collection
Written by
Fiona Burke, Luisa Woodfine
and
Neil Galavan
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<a class="card card-frame mb-3 mb-lg-0" href="../pages/help-article.html">
<div class="card-body p-4">
<!-- Icon Block -->
<div class="media">
<figure id="icon1" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-1.svg" alt="SVG"
data-parent="#icon1">
</figure>
<div class="media-body">
<h2 class="h5">Getting started</h2>
<p class="font-size-1">Welcome to Front! We're so glad you're here. Let's get started!</p>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-dark">1 article in this collection</small>
<small class="d-block text-dark">
<span class="text-muted">Written by</span>
Luisa Woodfine
<span class="text-muted">and</span>
Neil Galavan
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
<!-- End Icon Block -->
</div>
</a>
<a class="card card-frame" href="../pages/help-article.html">
<div class="card-body p-4">
<!-- Icon Block -->
<div class="media">
<figure id="icon46" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-46.svg" alt="SVG"
data-parent="#icon46">
</figure>
<div class="media-body">
<h3 class="h5">Account</h3>
<p class="font-size-1">Adjust your profile and preferences to make Front work just for you!</p>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
</li>
<li class="list-inline-item ml-n3 mr-0">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-dark">2 article in this collection</small>
<small class="d-block text-dark">
<span class="text-muted">Written by</span>
Fiona Burke, Luisa Woodfine
<span class="text-muted">and</span>
Neil Galavan
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
<!-- End Icon Block -->
</div>
</a>
</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>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Info #17
<!-- Info -->
<div class="card-deck card-lg-gutters-2 d-block d-lg-flex">
<!-- Item -->
<div class="card mb-3">
<div class="card-body p-4">
<!-- Details -->
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
</div>
<div class="media-body">
<!-- Header -->
<div class="mb-4">
<h3 class="h6 mb-0">
<a href="#">Dropbox Inc.</a>
</h3>
<!-- Review -->
<a class="d-inline-block small" href="#">
<span class="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"></span>
<span class="far fa-star"></span>
</span>
<span class="text-dark font-weight-semi-bold ml-2">3.74</span>
<span class="text-muted">(567 reviews)</span>
</a>
<!-- End Review -->
</div>
<!-- End Header -->
<!-- Additional Info -->
<div class="d-flex align-items-center">
<div class="u-ver-divider pr-3 mr-3">
<a class="font-size-1 text-secondary font-weight-medium" href="#">Salaries</a>
</div>
<a class="font-size-1 font-weight-medium" href="#">Open jobs</a>
</div>
<!-- End Additional Info -->
</div>
</div>
<!-- End Details -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="card mb-3">
<div class="card-body p-4">
<!-- Details -->
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<!-- Header -->
<div class="mb-4">
<h3 class="h6 mb-0">
<a href="#">Slack Inc.</a>
</h3>
<!-- Review -->
<a class="d-inline-block small" href="#">
<span class="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>
<span class="text-dark font-weight-semi-bold ml-2">4.91</span>
<span class="text-muted">(12k+ reviews)</span>
</a>
<!-- End Review -->
</div>
<!-- End Header -->
<!-- Additional Info -->
<div class="d-flex align-items-center">
<div class="u-ver-divider pr-3 mr-3">
<a class="font-size-1 text-secondary font-weight-medium" href="#">Salaries</a>
</div>
<a class="font-size-1 font-weight-medium" href="#">Open jobs</a>
</div>
<!-- End Additional Info -->
</div>
</div>
<!-- End Details -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="card mb-3">
<div class="card-body p-4">
<!-- Details -->
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
<div class="media-body">
<!-- Header -->
<div class="mb-4">
<h3 class="h6 mb-0">
<a href="#">Airbnb Inc.</a>
</h3>
<!-- Review -->
<a class="d-inline-block small" href="#">
<span class="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-half-alt"></span>
</span>
<span class="text-dark font-weight-semi-bold ml-2">4.5</span>
<span class="text-muted">(2k+ reviews)</span>
</a>
<!-- End Review -->
</div>
<!-- End Header -->
<!-- Additional Info -->
<div class="d-flex align-items-center">
<div class="u-ver-divider pr-3 mr-3">
<a class="font-size-1 text-secondary font-weight-medium" href="#">Salaries</a>
</div>
<a class="font-size-1 font-weight-medium" href="#">Open jobs</a>
</div>
<!-- End Additional Info -->
</div>
</div>
<!-- End Details -->
</div>
</div>
<!-- End Item -->
</div>
<!-- End Info -->
Info #18
Regular exposure to business stakeholders and executive management, as well as the authority.
Partner with Marketing Leads to align against business goals.
<!-- Info -->
<div class="card-deck card-lg-gutters-2 d-block d-lg-flex">
<!-- Item -->
<div class="card mb-3">
<div class="card-body p-4">
<!-- Details -->
<div class="media d-block d-sm-flex">
<div class="u-avatar mb-3 mb-sm-0 mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img17.png" alt="Image Description">
</div>
<div class="media-body">
<!-- Header -->
<div class="mb-4">
<h3 class="h5 mb-0">
<a href="#">Google Inc.</a>
</h3>
<!-- Review -->
<a class="d-inline-block small" href="#">
<span class="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"></span>
<span class="far fa-star"></span>
</span>
<span class="text-dark font-weight-semi-bold ml-2">4.8</span>
<span class="text-muted">(780k+ reviews)</span>
</a>
<!-- End Review -->
</div>
<!-- End Header -->
<div class="mb-4">
<p>Regular exposure to business stakeholders and executive management, as well as the authority.</p>
</div>
<!-- Additional Info -->
<div class="d-flex align-items-center">
<div class="u-ver-divider pr-3 mr-3">
<a class="font-size-1 text-secondary font-weight-medium" href="#">Salaries</a>
</div>
<div class="u-ver-divider pr-3 mr-3">
<a class="font-size-1 text-secondary font-weight-medium" href="#">Q&A</a>
</div>
<a class="font-size-1 font-weight-medium" href="#">Open jobs - 451</a>
</div>
<!-- End Additional Info -->
</div>
</div>
<!-- End Details -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="card mb-3">
<div class="card-body p-4">
<!-- Details -->
<div class="media d-block d-sm-flex">
<div class="u-avatar mb-3 mb-sm-0 mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img7.jpg" alt="Image Description">
</div>
<div class="media-body">
<!-- Header -->
<div class="mb-4">
<h3 class="h5 mb-0">
<a href="#">Digital Ocean</a>
</h3>
<!-- Review -->
<a class="d-inline-block small" href="#">
<span class="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-half-alt"></span>
<span class="far fa-star"></span>
</span>
<span class="text-dark font-weight-semi-bold ml-2">3.7</span>
<span class="text-muted">(201 reviews)</span>
</a>
<!-- End Review -->
</div>
<!-- End Header -->
<div class="mb-4">
<p>Partner with Marketing Leads to align against business goals.</p>
</div>
<!-- Additional Info -->
<div class="d-flex align-items-center">
<div class="u-ver-divider pr-3 mr-3">
<a class="font-size-1 text-secondary font-weight-medium" href="#">Salaries</a>
</div>
<div class="u-ver-divider pr-3 mr-3">
<a class="font-size-1 text-secondary font-weight-medium" href="#">Q&A</a>
</div>
<a class="font-size-1 font-weight-medium" href="#">Open jobs - 36</a>
</div>
<!-- End Additional Info -->
</div>
</div>
<!-- End Details -->
</div>
</div>
<!-- End Item -->
</div>
<!-- End Info -->
Info #19
Senior Java Developer
- Slack LLC
- •
- Office
The role is responsible for designing, coding and modifying websites.
Channel Sales Director
- Dropbox
- •
- Remote
Participates in all aspects of full life cycle application development.
<!-- Info -->
<div class="card-deck d-block d-lg-flex">
<!-- Item -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- Header -->
<div class="d-flex align-items-center mb-5">
<!-- Rating -->
<div class="position-relative">
<a id="rating1DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
aria-controls="rating1Dropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#rating1Dropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
4.5
</a>
<div id="rating1Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating1DropdownInvoker" style="width: 190px;">
<div class="d-flex align-items-center mb-2">
<span class="text-warning mr-2">4.5</span>
<ul class="list-inline mb-0">
<li class="list-inline-item 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"></span>
</li>
</ul>
</div>
<p class="text-dark mb-0">Overal Rating</p>
<p class="mb-0">Based on 132 reviews</p>
</div>
</div>
<!-- End Rating -->
<!-- Bookmark -->
<div class="ml-auto">
<div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save Job">
<input type="checkbox" class="bookmark-checkbox-input" id="bookmark1">
<label class="bookmark-checkbox-label" for="bookmark1"></label>
</div>
</div>
<!-- End Bookmark -->
</div>
<!-- End Header -->
<div class="text-center">
<div class="u-lg-avatar mx-auto mb-3">
<img class="img-fluid" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<!-- Title -->
<div class="mb-4">
<h1 class="h5 mb-1">
<a href="#">Senior Java Developer</a>
</h1>
<ul class="list-inline font-size-1 text-muted">
<li class="list-inline-item">
<a class="link-muted" href="#">Slack LLC</a>
</li>
<li class="list-inline-item text-muted">•</li>
<li class="list-inline-item">Office</li>
</ul>
</div>
<!-- End Title -->
<p>The role is responsible for designing, coding and modifying websites.</p>
</div>
</div>
<div class="card-footer text-center py-4">
<!-- Location & Salary -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h2 class="small text-secondary mb-0">Location</h2>
<small class="fas fa-map-marker-alt text-secondary align-middle mr-1"></small>
<span class="align-middle">Paris, FR</span>
</div>
<div class="col-6">
<h3 class="small text-secondary mb-0">Salary</h3>
<small class="fas fa-dollar-sign text-secondary align-middle mr-1"></small>
<span class="align-middle">35k - 45k</span>
</div>
</div>
<!-- End Location & Salary -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- Header -->
<div class="d-flex align-items-center mb-5">
<!-- Rating -->
<div class="position-relative">
<a id="rating2DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
aria-controls="rating2Dropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#rating2Dropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
4.7
</a>
<div id="rating2Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating2DropdownInvoker" style="width: 190px;">
<div class="d-flex align-items-center mb-2">
<span class="text-warning mr-2">4.7</span>
<ul class="list-inline mb-0">
<li class="list-inline-item 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-half-alt"></span>
</li>
</ul>
</div>
<p class="text-dark mb-0">Overal Rating</p>
<p class="mb-0">Based on 120 reviews</p>
</div>
</div>
<!-- End Rating -->
<!-- Bookmark -->
<div class="ml-auto">
<div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save Job">
<input type="checkbox" class="bookmark-checkbox-input" id="bookmark2">
<label class="bookmark-checkbox-label" for="bookmark2"></label>
</div>
</div>
<!-- End Bookmark -->
</div>
<!-- End Header -->
<div class="text-center">
<div class="u-lg-avatar mx-auto mb-3">
<img class="img-fluid" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
</div>
<!-- Title -->
<div class="mb-4">
<h3 class="h5 mb-1">
<a href="#">Channel Sales Director</a>
</h3>
<ul class="list-inline font-size-1 text-muted">
<li class="list-inline-item">
<a class="link-muted" href="#">Dropbox</a>
</li>
<li class="list-inline-item text-muted">•</li>
<li class="list-inline-item">Remote</li>
</ul>
</div>
<!-- End Title -->
<p>Participates in all aspects of full life cycle application development.</p>
</div>
</div>
<div class="card-footer text-center py-4">
<!-- Location & Salary -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h4 class="small text-secondary mb-0">Location</h4>
<small class="fas fa-map-marker-alt text-secondary align-middle mr-1"></small>
<span class="align-middle">Florida, US</span>
</div>
<div class="col-6">
<h4 class="small text-secondary mb-0">Salary</h4>
<small class="fas fa-dollar-sign text-secondary align-middle mr-1"></small>
<span class="align-middle">55k - 60k</span>
</div>
</div>
<!-- End Location & Salary -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- Header -->
<div class="d-flex align-items-center mb-5">
<!-- Rating -->
<div class="position-relative">
<a id="rating3DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
aria-controls="rating3Dropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#rating3Dropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
3.9
</a>
<div id="rating3Dropdown" class="dropdown-menu dropdown-unfold p-3" aria-labelledby="rating3DropdownInvoker" style="width: 190px;">
<div class="d-flex align-items-center mb-2">
<span class="text-warning mr-2">3.9</span>
<ul class="list-inline mb-0">
<li class="list-inline-item 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-half-alt"></span>
<span class="far fa-star"></span>
</li>
</ul>
</div>
<p class="text-dark mb-0">Overal Rating</p>
<p class="mb-0">Based on 85 reviews</p>
</div>
</div>
<!-- End Rating -->
<!-- Bookmark -->
<div class="ml-auto">
<div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save Job">
<input type="checkbox" class="bookmark-checkbox-input" id="bookmark3">
<label class="bookmark-checkbox-label" for="bookmark3"></label>
</div>
</div>
<!-- End Bookmark -->
</div>
<!-- End Header -->
<div class="text-center">
<div class="u-lg-avatar mx-auto mb-3">
<img class="img-fluid" src="../../assets/img/160x160/img9.jpg" alt="Image Description">
</div>
<!-- Title -->
<div class="mb-4">
<h3 class="h5 mb-1">
<a href="#">Junior UX Designer</a>
</h3>
<ul class="list-inline font-size-1 text-muted">
<li class="list-inline-item">
<a class="link-muted" href="#">Dribbble</a>
</li>
<li class="list-inline-item text-muted">•</li>
<li class="list-inline-item">Office</li>
</ul>
</div>
<!-- End Title -->
<p>We are looking for an outstanding Web Developer.</p>
</div>
</div>
<div class="card-footer text-center py-4">
<!-- Location & Salary -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<h4 class="small text-secondary mb-0">Location</h4>
<small class="fas fa-map-marker-alt text-secondary align-middle mr-1"></small>
<span class="align-middle">London, UK</span>
</div>
<div class="col-6">
<h4 class="small text-secondary mb-0">Salary</h4>
<small class="fas fa-dollar-sign text-secondary align-middle mr-1"></small>
<span class="align-middle">20k - 28k</span>
</div>
</div>
<!-- End Location & Salary -->
</div>
</div>
<!-- End Item -->
</div>
<!-- End Info -->
<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
});
</script>
Grid #20
Product Design
- • Illustration
- • Graphic
- • Web Design
- • UX/UI Design
Web Development
- • jQuery
- • WordPress
- • HTML5
- • PHP
<!-- Features Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-6 mb-7 mb-lg-0">
<!-- Card Info -->
<div class="card border-0 shadow-sm h-100 p-4">
<div class="media align-items-center pr-md-4">
<!-- SVG Icon -->
<figure id="SVGproject" class="svg-preloader max-width-19 w-100 mr-5">
<img class="js-svg-injector" src="../../assets/svg/illustrations/drawing-man.svg" alt="Image Description"
data-parent="#SVGproject">
</figure>
<!-- End SVG Icon -->
<div class="media-body">
<h3 class="h5">Product Design</h3>
<div class="d-flex">
<!-- List -->
<ul class="list-unstyled text-secondary font-size-1 mr-md-4">
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
Illustration
</li>
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
Graphic
</li>
</ul>
<!-- End List -->
<!-- List -->
<ul class="list-unstyled text-secondary font-size-1">
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
Web Design
</li>
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
UX/UI Design
</li>
</ul>
<!-- End List -->
</div>
</div>
</div>
</div>
<!-- Card Info -->
</div>
<div class="col-lg-6">
<!-- Card Info -->
<div class="card border-0 shadow-sm h-100 p-4">
<div class="media align-items-center pr-md-4">
<!-- SVG Icon -->
<figure id="SVGwebDesign" class="svg-preloader max-width-19 w-100 mr-5">
<img class="js-svg-injector" src="../../assets/svg/illustrations/support-man.svg" alt="Image Description"
data-parent="#SVGwebDesign">
</figure>
<!-- End SVG Icon -->
<div class="media-body">
<h3 class="h5">Web Development</h3>
<div class="d-flex">
<!-- List -->
<ul class="list-unstyled text-secondary font-size-1 mr-md-4">
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
jQuery
</li>
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
WordPress
</li>
</ul>
<!-- End List -->
<!-- List -->
<ul class="list-unstyled text-secondary font-size-1">
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
HTML5
</li>
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
PHP
</li>
</ul>
<!-- End List -->
</div>
</div>
</div>
</div>
<!-- Card Info -->
</div>
</div>
</div>
<!-- End Features Section -->
<!-- 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>
Grid #21
<!-- Icon Blocks Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-6 mb-7 mb-lg-0">
<div class="card h-100 p-4">
<div class="media align-items-center pr-md-4">
<!-- SVG Icon -->
<figure id="SVGinnovation" class="svg-preloader max-width-23 w-100 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/folder-woman.svg" alt="Image Description"
data-parent="#SVGinnovation">
</figure>
<!-- End SVG Icon -->
<div class="media-body">
<h3 class="h5">Front Strategy</h3>
<p class="mb-1">We strive to figure out ways to help your audience grow.</p>
<a class="font-size-1" href="#">Read More <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card h-100 p-4">
<div class="media align-items-center pr-md-4">
<!-- SVG Icon -->
<figure id="SVGpowerTools" class="svg-preloader max-width-23 w-100 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/revenue-graph.svg" alt="Image Description"
data-parent="#SVGpowerTools">
</figure>
<!-- End SVG Icon -->
<div class="media-body">
<h3 class="h5">Unlimited Power</h3>
<p class="mb-1">Find what you need in one template.</p>
<a class="font-size-1" href="#">Read More <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
<!-- 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>
Grid #22
Using Front
Find the answer to any question, from the basics all the way to advanced tips and tricks!
Workspace administration
Want to learn more about setting up and managing your team? Look no further!
<!-- Basic Articles Section -->
<div class="container">
<div class="row">
<div class="col-lg-6 u-ver-divider u-ver-divider--none-lg mb-9 mb-md-0">
<!-- Basic Articles -->
<article class="text-center p-md-8">
<figure id="featuresSVG1" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/drawing-man.svg" alt="Image Description"
data-parent="#featuresSVG1">
</figure>
<div class="mb-4">
<h2 class="h4">Using Front</h2>
<p>Find the answer to any question, from the basics all the way to advanced tips and tricks!</p>
</div>
<a class="btn btn-soft-primary btn-wide transition-3d-hover" href="#">Browse all article</a>
</article>
<!-- End Basic Articles -->
</div>
<div class="col-lg-6">
<!-- Basic Articles -->
<article class="text-center p-md-8">
<figure id="featuresSVG2" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/charts-and-graphs.svg" alt="Image Description"
data-parent="#featuresSVG2">
</figure>
<div class="mb-4">
<h2 class="h4">Workspace administration</h2>
<p>Want to learn more about setting up and managing your team? Look no further!</p>
</div>
<a class="btn btn-soft-primary btn-wide transition-3d-hover" href="#">Browse all article</a>
</article>
<!-- End Basic Articles -->
</div>
</div>
</div>
<!-- End Basic Articles Section -->
<!-- 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>
Grid #23
<!-- Icon Blocks Section -->
<div class="container space-2">
<div class="row justify-content-center mx-gutters-2">
<div class="col-sm-6 col-lg-4 mb-7 mb-lg-0">
<!-- Icon Blocks -->
<div class="text-center px-5">
<figure id="exampleFeaturesSVG1" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/server-woman.svg" alt="Image Description"
data-parent="#exampleFeaturesSVG1">
</figure>
<div class="mb-4">
<h3 class="h5">Professional Design</h3>
<p class="mb-md-0">Achieve virtually any design and layout from within the one template.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
Get Front
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-lg-0">
<!-- Icon Blocks -->
<div class="text-center px-5">
<figure id="exampleFeaturesSVG2" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/full-stack.svg" alt="Image Description"
data-parent="#exampleFeaturesSVG2">
</figure>
<div class="mb-4">
<h3 class="h5">Unlimited Power</h3>
<p class="mb-md-0">Find what you need in one template and combine features at will.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="../../starter/index.html">
Front Power
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-4">
<!-- Icon Blocks -->
<div class="text-center px-5">
<figure id="exampleFeaturesSVG3" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/business-woman.svg" alt="Image Description"
data-parent="#exampleFeaturesSVG3">
</figure>
<div class="mb-4">
<h3 class="h5">Goal Driven</h3>
<p class="mb-md-0">The time has come to bring those ideas and plans to life.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="../pages/hire-us.html">
Hire Front
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
<!-- 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>
Grid #24
Create an account
Create a Front account. Submit applications, save listings and manage jobs.
Post your resume
Create an account and upload your resume to be found by the recruiters who search Monster's databases every day.
Employers: Post a job
Your next hire is here. Our career advice, resume services and education partners give you a leg up in the job search.
<!-- Get Started Section -->
<div class="container space-2">
<div class="row justify-content-md-between">
<div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-0 mb-9 mb-lg-0">
<!-- Icon Blocks -->
<div class="text-center">
<!-- SVG Icon -->
<figure id="SVGcreateAccount" class="svg-preloader w-65 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/create-account.svg" alt="Image Description"
data-parent="#SVGcreateAccount">
</figure>
<!-- End SVG Icon -->
<div class="mb-4">
<h1 class="h5">Create an account</h1>
<p>Create a Front account. Submit applications, save listings and manage jobs.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-wide transition-3d-hover" href="#">
Create an Account
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-4 mb-9 mb-sm-0">
<!-- Icon Blocks -->
<div class="text-center">
<!-- SVG Icon -->
<figure id="SVGpostResume" class="svg-preloader w-65 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/post-resume.svg" alt="Image Description"
data-parent="#SVGpostResume">
</figure>
<!-- End SVG Icon -->
<div class="mb-4">
<h2 class="h5">Post your resume</h2>
<p>Create an account and upload your resume to be found by the recruiters who search Monster's databases every day.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-wide transition-3d-hover" href="#">
Post your Resume
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-4">
<!-- Icon Blocks -->
<div class="text-center">
<!-- SVG Icon -->
<figure id="SVGportfolio" class="svg-preloader w-65 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/portfolio.svg" alt="Image Description"
data-parent="#SVGportfolio">
</figure>
<!-- End SVG Icon -->
<div class="mb-4">
<h3 class="h5">Employers: Post a job</h3>
<p>Your next hire is here. Our career advice, resume services and education partners give you a leg up in the job search.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-wide transition-3d-hover" href="#">
Post a Job
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<!-- End Get Started Section -->
<!-- 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>
Grid #25
Refer friends
Send referrals to your friends either here or in your app.
Follow along
Follow your friend's progress and send encouraging messages along the way.
Get paid
When your friend starts building, you'll get paid after their first task completion.
<!-- Icon Blocks -->
<div class="container space-2">
<div class="row">
<div class="col-md-4 mb-9 mb-md-0">
<div class="pr-lg-4">
<figure id="SVGanalysis" class="svg-preloader mb-3 ie-analysis">
<img class="js-svg-injector w-75" src="../../assets/svg/illustrations/analysis.svg" alt="Image Description"
data-parent="#SVGanalysis">
</figure>
<h4 class="h5">Refer friends</h4>
<p>Send referrals to your friends either here or in your app.</p>
</div>
</div>
<div class="col-md-4 mb-9 mb-md-0">
<div class="pr-lg-4">
<figure id="SVGinTheOffice" class="svg-preloader mb-3 ie-in-the-office">
<img class="js-svg-injector w-75" src="../../assets/svg/illustrations/in-the-office.svg" alt="Image Description"
data-parent="#SVGinTheOffice">
</figure>
<h4 class="h5">Follow along</h4>
<p>Follow your friend's progress and send encouraging messages along the way.</p>
</div>
</div>
<div class="col-md-4">
<div class="pr-lg-4">
<figure id="SVGmakeItRain" class="svg-preloader mb-3 ie-make-it-rain">
<img class="js-svg-injector w-75" src="../../assets/svg/illustrations/make-it-rain.svg" alt="Image Description"
data-parent="#SVGmakeItRain">
</figure>
<h4 class="h5">Get paid</h4>
<p>When your friend starts building, you'll get paid after their first task completion.</p>
</div>
</div>
</div>
</div>
<!-- End Icon Blocks -->
<!-- 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>