I'm a Seller
Discover how much property sold for with our comprehensive house price data.
Sell my HomeInformative Blocks
Different style of info blocks/components.
Info #1
Business Strategy Manager
Chicago, US
Business Strategy Senior Associate
New York, US
Senior Analyst, Data Analytics
Sydney, Australia
<!-- Card --> <a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
<div class="card-body p-4">
<span class="row justify-content-sm-between align-items-sm-center">
<span class="col-sm-6 mb-2 mb-sm-0">
Business Strategy Manager
</span>
<span class="col-sm-6 text-primary text-sm-right">
Chicago, US
<span class="fas fa-arrow-right small ml-2"></span>
</span>
</span>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
<div class="card-body p-4">
<span class="row justify-content-sm-between align-items-sm-center">
<span class="col-sm-6 mb-2 mb-sm-0">
Business Strategy Senior Associate
</span>
<span class="col-sm-6 text-primary text-sm-right">
New York, US
<span class="fas fa-arrow-right small ml-2"></span>
</span>
</span>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card card-frame card-text-dark mb-2" href="../pages/careers-single.html">
<div class="card-body p-4">
<span class="row justify-content-sm-between align-items-sm-center">
<span class="col-sm-6 mb-2 mb-sm-0">
Senior Analyst, Data Analytics
</span>
<span class="col-sm-6 text-primary text-sm-right">
Sydney, Australia
<span class="fas fa-arrow-right small ml-2"></span>
</span>
</span>
</div>
</a>
<!-- End Card -->
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
<!-- Projects -->
<div class="card">
<div class="card-body p-5">
<!-- List of Icons -->
<div class="row justify-content-between align-items-center mb-3">
<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="settingsDropdown1InvokerExample1" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
aria-controls="settingsDropdown1"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#settingsDropdown1"
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="settingsDropdown1" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="settingsDropdown1InvokerExample1" 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 -->
<!-- Details -->
<div class="d-sm-flex">
<div class="u-lg-avatar mb-3 mb-sm-0 mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
</div>
<div class="mr-3">
<!-- Title -->
<div class="mb-3">
<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 -->
<div class="d-sm-flex align-items-sm-center">
<!-- Members List -->
<div class="mb-3 mb-sm-0 mr-4">
<h4 class="small font-weight-normal text-secondary mb-0">Members</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item 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="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>
</div>
<!-- End Members List -->
<!-- Budget -->
<div class="u-ver-divider u-ver-divider--none-sm pr-4 mb-3 mb-sm-0 mr-4">
<h4 class="small font-weight-normal text-secondary mb-0">Budget</h4>
<span class="text-dark">$9,145</span>
</div>
<!-- End Budget -->
<!-- Priority -->
<div class="mr-4">
<h4 class="small font-weight-normal text-secondary mb-0">Priority</h4>
<span class="fas fa-arrow-up text-warning small"></span>
<span class="text-dark">Medium</span>
</div>
<!-- End Priority -->
</div>
</div>
</div>
<!-- End Details -->
</div>
</div>
<!-- End Projects -->
<!-- JS Implementing Plugins -->
<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>
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
<!-- Contacts -->
<div class="card mb-4">
<div class="card-header pt-4 pb-3 px-0 mx-4">
<h2 class="h6 mb-0">Contacts</h2>
</div>
<div class="card-body pt-3 pb-4 px-4">
<!-- User -->
<a class="d-flex align-items-start mb-4" href="#">
<div class="position-relative u-avatar">
<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-right rounded-circle"></span>
</div>
<div class="ml-3">
<span class="d-block text-dark">Patrick Garner</span>
<small class="d-block text-secondary">Web Developer</small>
</div>
</a>
<!-- End User -->
<!-- User -->
<a class="d-flex align-items-start mb-4" href="#">
<span class="btn btn-icon btn-soft-danger rounded-circle">
<span class="btn-icon__inner">AO</span>
<span class="badge badge-xs badge-outline-warning badge-pos badge-pos--bottom-right rounded-circle"></span>
</span>
<div class="ml-3">
<span class="d-block text-dark">Amanta Owens</span>
<small class="d-block text-secondary">UI/UX Designer</small>
</div>
</a>
<!-- End User -->
<!-- User -->
<a class="d-flex align-items-start mb-4" href="#">
<div class="position-relative u-avatar">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
<span class="badge badge-xs badge-outline-warning badge-pos badge-pos--bottom-right rounded-circle"></span>
</div>
<div class="ml-3">
<span class="d-block text-dark">Eliza Donovan</span>
<small class="d-block text-secondary">Project Manager</small>
</div>
</a>
<!-- End User -->
<!-- User -->
<a class="d-flex align-items-start" href="#">
<span class="btn btn-icon btn-soft-success rounded-circle">
<span class="btn-icon__inner">JC</span>
<span class="badge badge-xs badge-outline-success badge-pos badge-pos--bottom-right rounded-circle"></span>
</span>
<div class="ml-3">
<span class="d-block text-dark">James Collins</span>
<small class="d-block text-secondary">Angular Developer</small>
</div>
</a>
<!-- End User -->
</div>
</div>
<!-- End Contacts -->
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
<!-- Team -->
<div class="card position-relative mb-5">
<div class="card-body position-relative p-3">
<div class="row align-items-center">
<div class="col-sm-7 mb-3 mb-sm-0">
<div class="d-flex">
<!-- Avatar -->
<div class="position-relative u-lg-avatar mr-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>
<!-- End Avatar -->
<div class="mr-3">
<!-- User Info -->
<div class="mb-2">
<h2 class="h6 mb-0">
<a href="#">Patrick Garner</a>
</h2>
<a class="small" href="#">@patrickgarner</a>
</div>
<!-- End User Info -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<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 mr-0">
<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 mr-0">
<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 mr-0">
<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>
</div>
<div class="col-sm-5 align-self-sm-end">
<!-- Button -->
<div class="text-sm-right">
<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>
<!-- End Button -->
</div>
</div>
<!-- Add to Favorites -->
<a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle mt-3 mr-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<span class="far fa-star btn-icon__inner"></span>
</a>
<!-- End Add to Favorites -->
</div>
</div>
<!-- End Team -->
<!-- Team -->
<div class="card position-relative">
<div class="card-body p-3">
<div class="row align-items-center">
<div class="col-sm-7 mb-3 mb-sm-0">
<div class="d-flex">
<!-- Avatar -->
<span class="btn btn-lg btn-icon btn-soft-danger rounded-circle mr-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>
<!-- End Avatar -->
<div class="mr-3">
<!-- User Info -->
<div class="mb-2">
<h2 class="h6 mb-0">
<a href="#">Amanta Owens</a>
</h2>
<a class="small" href="#">@uidesginer</a>
</div>
<!-- End User Info -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<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 mr-0">
<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 mr-0">
<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 mr-0">
<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>
</div>
<div class="col-sm-5 align-self-sm-end">
<!-- Button -->
<div class="text-sm-right">
<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>
<!-- End Button -->
</div>
</div>
<!-- Add to Favorites -->
<a class="btn btn-sm btn-icon btn-soft-warning btn-bg-transparent position-absolute top-0 right-0 rounded-circle mt-3 mr-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<span class="far fa-star btn-icon__inner"></span>
</a>
</div>
<!-- End Add to Favorites -->
</div>
<!-- End Team -->
Info #13
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>
Info #20
Senior Java Developer
- Slack LLC
- •
- Office
The role is responsible for designing, coding and modifying websites, from layout to function and according to a client's specifications. Strive to create visually appealing sites that feature user-friendly design and clear navigation.
Location
Liverpool, UKPosted
1 day agoSalary
35k - 45k
Fulltime
Channel Sales Director
- Dropbox
- •
- Remote
Participates in all aspects of full life cycle application development including requirements gathering, technical design, iterative development, testing, implementation and on-going support.
Location
Leeds, UKPosted
2 days agoSalary
55k - 65k
Contract
<!-- Info -->
<div class="card mb-5">
<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-4">
<img class="img-fluid" src="../../assets/img/160x160/img14.png" alt="Image Description">
</div>
<div class="media-body">
<!-- Header -->
<div class="media mb-2">
<div class="media-body">
<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="#">
<span class="fas fa-building mr-1"></span>
Slack LLC
</a>
</li>
<li class="list-inline-item text-muted">•</li>
<li class="list-inline-item">Office</li>
</ul>
</div>
<div class="d-flex ml-auto">
<!-- Rating -->
<div class="position-relative d-inline-block mr-2">
<a id="rating6DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
aria-controls="rating6Dropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#rating6Dropdown"
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="rating6Dropdown" class="dropdown-menu dropdown-menu-right dropdown-unfold p-3" aria-labelledby="rating6DropdownInvoker" 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="bookmark-checkbox d-inline-block" data-toggle="tooltip" data-placement="top" title="Save Job">
<input type="checkbox" class="bookmark-checkbox-input" id="bookmark4">
<label class="bookmark-checkbox-label" for="bookmark4"></label>
</div>
<!-- End Bookmark -->
</div>
</div>
<!-- End Header -->
<div class="mb-5">
<p>The role is responsible for designing, coding and modifying websites, from layout to function and according to a client's specifications. Strive to create visually appealing sites that feature user-friendly design and clear navigation.</p>
</div>
<div class="d-md-flex align-items-md-center">
<!-- Location -->
<div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
<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">Liverpool, UK</span>
</div>
<!-- End Location -->
<!-- Posted -->
<div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
<h3 class="small text-secondary mb-0">Posted</h3>
<small class="fas fa-calendar-alt text-secondary align-middle mr-1"></small>
<span class="align-middle">1 day ago</span>
</div>
<!-- End Posted -->
<!-- Posted -->
<div class="mb-3 mb-md-0">
<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">35k - 45k</span>
</div>
<!-- End Posted -->
<div class="ml-md-auto">
<span class="btn btn-xs btn-soft-danger btn-pill">Fulltime</span>
</div>
</div>
</div>
</div>
<!-- End Details -->
</div>
</div>
<!-- End Info -->
<!-- Info -->
<div class="card mb-5">
<div class="card-body p-4">
<!-- Details -->
<div class="media d-block d-sm-flex">
<span class="btn btn-icon btn-soft-primary rounded-circle mb-3 mb-sm-0 mr-4">
<span class="btn-icon__inner">DB</span>
</span>
<div class="media-body">
<!-- Header -->
<div class="media mb-2">
<div class="media-body">
<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="#">
<span class="fas fa-building mr-1"></span>
Dropbox
</a>
</li>
<li class="list-inline-item text-muted">•</li>
<li class="list-inline-item">Remote</li>
</ul>
</div>
<div class="d-flex ml-auto">
<!-- Rating -->
<div class="position-relative d-inline-block mr-2">
<a id="rating7DropdownInvoker" class="btn btn-xs btn-soft-warning btn-pill" href="javascript:;" role="button"
aria-controls="rating7Dropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#rating7Dropdown"
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="rating7Dropdown" class="dropdown-menu dropdown-menu-right dropdown-unfold p-3" aria-labelledby="rating7DropdownInvoker" 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="bookmark-checkbox d-inline-block" data-toggle="tooltip" data-placement="top" title="Save Job">
<input type="checkbox" class="bookmark-checkbox-input" id="bookmark5">
<label class="bookmark-checkbox-label" for="bookmark5"></label>
</div>
<!-- End Bookmark -->
</div>
</div>
<!-- End Header -->
<div class="mb-5">
<p>Participates in all aspects of full life cycle application development including requirements gathering, technical design, iterative development, testing, implementation and on-going support.</p>
</div>
<div class="d-md-flex align-items-md-center">
<!-- Location -->
<div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
<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">Leeds, UK</span>
</div>
<!-- End Location -->
<!-- Posted -->
<div class="u-ver-divider u-ver-divider--none-md pr-4 mb-3 mb-md-0 mr-4">
<h4 class="small text-secondary mb-0">Posted</h4>
<small class="fas fa-calendar-alt text-secondary align-middle mr-1"></small>
<span class="align-middle">2 days ago</span>
</div>
<!-- End Posted -->
<!-- Posted -->
<div class="mb-3 mb-md-0">
<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 - 65k</span>
</div>
<!-- End Posted -->
<div class="ml-md-auto">
<span class="btn btn-xs btn-soft-danger btn-pill">Contract</span>
</div>
</div>
</div>
</div>
<!-- End Details -->
</div>
</div>
<!-- End Info -->
Info #21
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 #22
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 #23
UI and UX designer
4.91 (12k+ reviews)
Viewed 3,910 times
<!-- Hero Section -->
<div class="container">
<div class="border-bottom space-top-2">
<div class="media mb-5">
<!-- Avatar -->
<div class="u-lg-avatar mr-4">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<!-- End Avatar -->
<div class="media-body">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-0">
<h1 class="h4 mb-1">UI and UX designer</h1>
<!-- Review -->
<span class="text-warning font-size-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>
</span>
<span class="font-weight-semi-bold ml-2">4.91</span>
<small class="text-muted">(12k+ reviews)</small>
<!-- End Review -->
</div>
<div class="col-lg-6 text-lg-right">
<div class="d-flex justify-content-md-end align-items-center">
<!-- Bookmark -->
<div class="d-inline-block mr-2">
<div class="bookmark-checkbox" data-toggle="tooltip" data-placement="top" title="Save this job">
<input type="checkbox" class="bookmark-checkbox-input" id="bookmark11">
<label class="bookmark-checkbox-label" for="bookmark11"></label>
</div>
</div>
<!-- End Bookmark -->
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">Apply On Company Site</a>
</div>
</div>
</div>
</div>
</div>
<!-- Viewed Info -->
<div class="space-bottom-1">
<div class="small text-right text-secondary">
<span class="fas fa-eye mr-1"></span>
Viewed 3,910 times
</div>
</div>
<!-- End Viewed Info -->
</div>
</div>
<!-- End Hero Section -->
Info #24
Channels
Communication in Front happens in channels, organized by project, topic, team, or whatever makes sense for you.
Integrations
Front works with the tools and services you already use every day. Pipe in information or take action without leaving Front.
Security
We take security seriously at Slack. We offer measures like 2FA and SSO to ensure the safety of your data and protect your organization.
See Help Front in action. Get a Demo
<!-- Features Section -->
<div class="container space-2 text-center">
<div class="position-relative pt-11 pb-7">
<div class="position-relative z-index-2 p-2 p-sm-0">
<!-- News Carousel -->
<div class="js-slick-carousel u-slick u-slick--equal-height u-slick--gutters-3 mb-5"
data-slides-show="3"
data-slides-scroll="1"
data-pagi-classes="d-lg-none u-slick__pagination u-slick__pagination--white mt-5 mb-0"
data-responsive='[{
"breakpoint": 1200,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<!-- Card Block -->
<div class="js-slide mt-1 mb-2">
<div class="w-100 bg-white shadow-soft rounded py-6 px-4">
<h3 class="h5 font-weight-semi-bold mb-5">Channels</h3>
<figure id="featuresSVG1" 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="#featuresSVG1">
</figure>
<p>Communication in Front happens in channels, organized by project, topic, team, or whatever makes sense for you.</p>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide mt-1 mb-2">
<div class="w-100 bg-white shadow-soft rounded py-6 px-4">
<h3 class="h5 font-weight-semi-bold mb-5">Integrations</h3>
<figure id="featuresSVG2" 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="#featuresSVG2">
</figure>
<p>Front works with the tools and services you already use every day. Pipe in information or take action without leaving Front.</p>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide mt-1 mb-2">
<div class="w-100 bg-white shadow-soft rounded py-6 px-4">
<h3 class="h5 font-weight-semi-bold mb-5">Security</h3>
<figure id="featuresSVG3" 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="#featuresSVG3">
</figure>
<p>We take security seriously at Slack. We offer measures like 2FA and SSO to ensure the safety of your data and protect your organization.</p>
</div>
</div>
<!-- End Card Block -->
</div>
<!-- Info -->
<p class="text-white">
See Help Front in action.
<a class="text-warning font-weight-medium" href="#">
Get a Demo
<span class="btn btn-icon btn-sm btn-white rounded-circle ml-2">
<span class="fas fa-arrow-right btn-icon__inner"></span>
</span>
</a>
</p>
<!-- End Info -->
</div>
<!-- Background -->
<div class="gradient-half-primary-v4 position-absolute top-0 right-0 bottom-0 left-0 rounded-lg mx-sm-7"></div>
</div>
</div>
<!-- End Features Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<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.slick.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Info #25
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 #26
Start your business on 10+ platforms – for free
Start your business on various platforms with one click.
<!-- 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 #27
<!-- Features Section -->
<div class="container space-2">
<div class="js-slick-carousel u-slick u-slick--equal-height u-slick--gutters-3 mb-7"
data-slides-show="3"
data-slides-scroll="1"
data-pagi-classes="d-lg-none text-center u-slick__pagination mt-7 mb-0"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide">
<!-- Card -->
<div class="w-100 bg-soft-primary text-primary text-center rounded p-5">
<img class="img-fluid" src="../../assets/img/mockups/img7.png" alt="Image Description">
<h4 class="font-weight-semi-bold">Standard</h4>
<p class="font-size-1">Available in:</p>
<div class=" mb-4">
<img class="d-inline-block mr-2" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="25">
<img class="d-inline-block" src="../../assets/svg/components/adobe-xd.svg" alt="Adobe Xd" width="25">
</div>
<a class="btn btn-sm btn-block btn-primary transition-3d-hover" href="#">Preview <small class="fas fa-eye ml-1"></small></a>
</div>
<!-- End Card -->
</div>
<div class="js-slide">
<!-- Card -->
<div class="w-100 bg-soft-info text-warning text-center rounded p-5">
<img class="img-fluid" src="../../assets/img/mockups/img8.png" alt="Image Description">
<h4 class="font-weight-semi-bold">Dark</h4>
<p class="font-size-1">Available in:</p>
<div class=" mb-4">
<img class="d-inline-block" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="25">
</div>
<a class="btn btn-sm btn-block btn-white transition-3d-hover disabled" href="#">Coming soon ...</a>
</div>
<!-- End Card -->
</div>
<div class="js-slide">
<!-- Card -->
<div class="w-100 bg-soft-danger text-warning text-center rounded p-5">
<img class="img-fluid" src="../../assets/img/mockups/img9.png" alt="Image Description">
<h4 class="font-weight-semi-bold">Wireframe</h4>
<p class="font-size-1">Available in:</p>
<div class=" mb-4">
<img class="d-inline-block mr-2" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="25">
<img class="d-inline-block" src="../../assets/svg/components/adobe-xd.svg" alt="Adobe Xd" width="25">
</div>
<a class="btn btn-sm btn-block btn-white transition-3d-hover disabled" href="#">Coming soon ...</a>
</div>
<!-- End Card -->
</div>
</div>
<!-- Fancybox -->
<div class="text-center">
<a class="js-fancybox" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="far fa-play-circle font-size-2 align-middle"></span>
<span class="ml-1">
Watch and learn how it works
</span>
</a>
</div>
<!-- End Fancybox -->
</div>
<!-- End Features Section -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of fancybox
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>
Info #28
Compatible with Sketch
Front: A digital UI kit UI kit
Super clean, minimalistic, stylized mockup collection with awesome customization features and huge resolution.
Building brand through design
Graphic design and illustrationHigh-detailed business scenes for landing pages' headers and mobile screens.
Pixeel Group
Graphic design and illustrationWe work with the largest companies all over the world.
Compatible with Sketch
Atlas: A travel app UI kit from Front UI kit
This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.
<!-- Works Section -->
<div class="container space-2">
<div class="card-md-columns card-md-2-count card-md-2-gap card-lg-5-gap pt-md-11">
<!-- Card -->
<a class="card border-0 bg-soft-primary text-indigo transition-3d-hover p-5 p-lg-7 mt-md-n11 mb-3 mb-sm-5 mb-lg-11" href="#">
<img class="img-fluid mb-7" src="../../assets/img/755x470/img1.jpg" alt="Image Description">
<div class="media align-items-center max-width-35 mb-3">
<div class="mr-3">
<img class="img-fluid" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="32">
</div>
<div class="media-body">
<small class="d-block mb-0">Compatible with Sketch</small>
</div>
</div>
<h4 class="d-flex justify-content-between">
Front: A digital UI kit
<span class="d-block">
<span class="badge badge-success badge-pill ml-3">UI kit</span>
</span>
</h4>
<p class="text-dark">Super clean, minimalistic, stylized mockup collection with awesome customization features and huge resolution.</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card border-0 bg-soft-info text-indigo transition-3d-hover p-5 p-lg-7 mb-3 mb-sm-5 mb-lg-11" href="#">
<img class="img-fluid mb-7" src="../../assets/img/mockups/img13.png" alt="Image Description">
<h4 class="mb-1">Building brand through design</h4>
<small class="d-block mb-3">Graphic design and illustration</small>
<p class="text-dark">High-detailed business scenes for landing pages' headers and mobile screens.</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card border-0 bg-soft-danger text-indigo transition-3d-hover p-5 p-lg-7 mb-3 mb-sm-5 mb-lg-11" href="#">
<img class="img-fluid mb-7" src="../../assets/img/mockups/img12.png" alt="Image Description">
<h4 class="mb-1">Pixeel Group</h4>
<small class="d-block mb-3">Graphic design and illustration</small>
<p class="text-dark">We work with the largest companies all over the world.</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="card border-0 bg-soft-indigo text-indigo transition-3d-hover p-5 p-lg-7 mb-3 mb-sm-5 mb-lg-11" href="#">
<img class="img-fluid mb-7" src="../../assets/img/mockups/img11.png" alt="Image Description">
<div class="media align-items-center max-width-35 mb-3">
<div class="mr-3">
<img class="img-fluid" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="32">
</div>
<div class="media-body">
<small class="d-block mb-0">Compatible with Sketch</small>
</div>
</div>
<h4 class="d-flex justify-content-between">
Atlas: A travel app UI kit from Front
<span class="d-block">
<span class="badge badge-success badge-pill ml-3">UI kit</span>
</span>
</h4>
<p class="text-dark">This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.</p>
</a>
<!-- End Card -->
</div>
</div>
<!-- End Works Section -->
Info #29
<!-- Services Section -->
<div class="container space-2">
<div id="SVGServices" class="svg-preloader row">
<div class="col-lg-5 mb-3 mb-sm-5 mb-lg-0">
<!-- Card -->
<a class="card card-text-dark border-0 bg-primary text-white shadow-lg min-height-380 h-100 transition-3d-hover" href="#">
<figure class="position-sm-absolute top-0 left-0 w-100">
<img class="js-svg-injector rounded-top" src="../../assets/svg/components/abstract-shapes-18.svg" alt="SVG"
data-parent="#SVGServices">
</figure>
<article class="d-flex align-content-end flex-wrap h-100 p-5">
<h4>Design</h4>
<p class="text-white-70">Achieve virtually any design and layout from within the one template.</p>
<span class="text-white">Learn More <small class="fas fa-arrow-right ml-1"></small></span>
</article>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg mb-3 mb-sm-0">
<!-- Card -->
<a class="card card-text-dark shadow-lg min-height-380 h-100 transition-3d-hover" href="#">
<figure class="position-sm-absolute top-0 left-0 w-100">
<img class="js-svg-injector rounded-top" src="../../assets/svg/components/abstract-shapes-17.svg" alt="SVG"
data-parent="#SVGServices">
</figure>
<article class="d-flex align-content-end flex-wrap h-100 p-5">
<h4 class="h5">Development</h4>
<p>We strive to figure out ways to help your business grow through all platforms.</p>
<span class="text-primary">Learn More <small class="fas fa-arrow-right ml-1"></small></span>
</article>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg">
<!-- Card -->
<a class="card card-text-dark shadow-lg min-height-380 h-100 transition-3d-hover" href="#">
<figure class="position-sm-absolute top-0 left-0 w-100">
<img class="js-svg-injector rounded-top" src="../../assets/svg/components/abstract-shapes-16.svg" alt="SVG"
data-parent="#SVGServices">
</figure>
<article class="d-flex align-content-end flex-wrap h-100 p-5">
<h4 class="h5">Marketing</h4>
<p>Find what you need in one template and combine features at will.</p>
<span class="text-primary">Learn More <small class="fas fa-arrow-right ml-1"></small></span>
</article>
</a>
<!-- End Card -->
</div>
</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 #30
Front process
Once you are invited to Front Agency, you company will be set within days.
Find Out More
Product design
Easy and fast adjustments of elements are possible with Front template.
Find Out More
<!-- Services Section -->
<div class="container">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-0">
<!-- Card -->
<div class="card border-0 bg-primary text-white shadow h-100 overflow-hidden p-6">
<div class="w-65 pr-2">
<h3 class="h3 font-weight-medium">Front process</h3>
<p class="text-white">Once you are invited to Front Agency, you company will be set within days.</p>
<a class="btn btn-sm btn-white transition-3d-hover" href="#">Find Out More <span class="fas fa-angle-right ml-1"></span></a>
</div>
<div class="position-absolute right-0 bottom-0 w-50 mb-n3 mr-n4">
<img class="img-fluid" src="../../assets/img/mockups/img15.png" alt="Image Description">
</div>
</div>
<!-- End Card -->
</div>
<div class="col-lg-6">
<!-- Card -->
<div class="card border-0 bg-warning text-white shadow h-100 overflow-hidden p-6">
<div class="w-65 pr-2">
<h3 class="h3 font-weight-medium">Product design</h3>
<p class="text-white">Easy and fast adjustments of elements are possible with Front template.</p>
<a class="btn btn-sm btn-white transition-3d-hover" href="#">Find Out More <span class="fas fa-angle-right ml-1"></span></a>
</div>
<div class="position-absolute right-0 bottom-0 w-50 mb-n3 mr-n4">
<img class="img-fluid" src="../../assets/img/mockups/img12.png" alt="Image Description">
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Services Section -->