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="u-label u-label--sm u-label--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>