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 -->