Looking for a place to stay
or a property to rent?
We guarantee you every aspect that you like on
your property is available in here
Cards
Space's cards provide a flexible and extensible content container with multiple variants and options.
Cards #1
.card-frame class has a few CSS styles along with transition effect on hover.
<!-- List of Job Positions -->
<ul class="list-unstyled mb-0">
<li class="my-3">
<!-- Job -->
<a class="d-block text-dark card-frame rounded p-4" href="../html/pages/careers-single.html">
<span class="row justify-content-sm-between align-items-sm-center">
<span class="col-sm-6 mb-2 mb-sm-0">
Business Strategy Manager
<small class="d-block text-muted">Chicago, US</small>
</span>
<span class="col-sm-6 text-primary text-sm-right">Full time</span>
</span>
</a>
<!-- End Job -->
</li>
<li class="my-3">
<!-- Job -->
<a class="d-block text-dark card-frame rounded p-4" href="../html/pages/careers-single.html">
<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
<small class="d-block text-muted">New York, US</small>
</span>
<span class="col-sm-6 text-primary text-sm-right">Full time</span>
</span>
</a>
<!-- End Job -->
</li>
<li class="my-3">
<!-- Job -->
<a class="d-block text-dark card-frame rounded p-4" href="../html/pages/careers-single.html">
<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
<small class="d-block text-muted">Sydney, Australia</small>
</span>
<span class="col-sm-6 text-primary text-sm-right">Full time</span>
</span>
</a>
<!-- End Job -->
</li>
</ul>
<!-- End List of Job Positions -->
Cards #2
.card-frame class has a few CSS styles along with transition effect on hover.
-
How do I get a receipt for my purchase?
1 article in this collection Written by Luisa Woodfine and Neil Galavan -
-
What methods of payments are supported?
2 article in this collection Written by Fiona Burke, Luisa Woodfine and Neil Galavan -
-
How do I get access to a theme I purchased?
5 article in this collection Written by Fiona Burke, Luisa Woodfine, Neil Galavan and Monica Garcia -
-
Which license do I need?
5 article in this collection Written by Fiona Burke, Luisa Woodfine, Neil Galavan and Monica Garcia -
-
How can I get a refund?
3 article in this collection Written by Luisa Woodfine -
-
How do I get help with the theme I purchased?
2 article in this collection Written by Fiona Burke, Luisa Woodfine and Neil Galavan -
-
My account
1 article in this collection Written by Luisa Woodfine and Monica Garcia -
<!-- List of Topics -->
<ul class="list-unstyled">
<li class="mt-2 mb-4">
<!-- Topic -->
<a class="d-block card-frame rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/receipt-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">How do I get a receipt for my purchase?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">1 article in this collection</small>
<small class="d-block text-secondary">
<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>
</a>
<!-- End Topic -->
</li>
<li class="my-4">
<!-- Topic -->
<a class="d-block card-frame rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/payment-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">What methods of payments are supported?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">2 article in this collection</small>
<small class="d-block text-secondary">
<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>
</a>
<!-- End Topic -->
</li>
<li class="my-4">
<!-- Topic -->
<a class="d-block card-frame rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/unlocked-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">How do I get access to a theme I purchased?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">5 article in this collection</small>
<small class="d-block text-secondary">
<span class="text-muted">Written by</span>
Fiona Burke, Luisa Woodfine, Neil Galavan
<span class="text-muted">and</span>
Monica Garcia
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
</a>
<!-- End Topic -->
</li>
<li class="my-4">
<!-- Topic -->
<a class="d-block card-frame rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/file-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">Which license do I need?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">5 article in this collection</small>
<small class="d-block text-secondary">
<span class="text-muted">Written by</span>
Fiona Burke, Luisa Woodfine, Neil Galavan
<span class="text-muted">and</span>
Monica Garcia
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
</a>
<!-- End Topic -->
</li>
<li class="my-4">
<!-- Topic -->
<a class="d-block card-frame rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/refund-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">How can I get a refund?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">3 article in this collection</small>
<small class="d-block text-secondary">
<span class="text-muted">Written by</span>
Luisa Woodfine
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
</a>
<!-- End Topic -->
</li>
<li class="my-4">
<!-- Topic -->
<a class="d-block card-frame rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/comments-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">How do I get help with the theme I purchased?</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">2 article in this collection</small>
<small class="d-block text-secondary">
<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>
</a>
<!-- End Topic -->
</li>
<li class="mt-4 mb-0">
<!-- Topic -->
<a class="d-block card-frame rounded p-5" href="#">
<div class="row align-items-center">
<div class="col-3 col-md-2">
<img class="d-block max-width-9 mx-auto" src="../assets/svg/components/user-dark-icon.svg" alt="Image Description">
</div>
<div class="col-9 col-md-10">
<h3 class="h4">My account</h3>
<div class="media">
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<div class="media-body">
<!-- Article Authors -->
<small class="d-block text-secondary">1 article in this collection</small>
<small class="d-block text-secondary">
<span class="text-muted">Written by</span>
Luisa Woodfine
<span class="text-muted">and</span>
Monica Garcia
</small>
<!-- End Article Authors -->
</div>
</div>
</div>
</div>
</a>
<!-- End Topic -->
</li>
</ul>
<!-- End List of Topics -->
Cards #3
Slack
A cloud-based set of proprietary team collaboration tools and services.
Mapbox
A large provider of custom online maps for websites and applications.
Spotify
An entertainment service, specialized in music, podcast, and video streaming service.
Airbnb
An online marketplace and hospitality service for people to lease or rent short-term lodging.
DigitalOcean
Providing developers and businesses a reliable, easy-to-use cloud computing platform of virtual servers.
InVision
InVision is the digital product design platform used to make the world's best customer experiences.
<div class="container space-2 space-3--lg">
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<div class="card border-0 mb-3">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img3.jpg" alt="Image Description">
<h4 class="h5 mb-1">Slack</h4>
<p class="mb-0">A cloud-based set of proprietary team collaboration tools and services.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
<div class="card border-0 mb-3">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img4.jpg" alt="Image Description">
<h4 class="h5 mb-1">Mapbox</h4>
<p class="mb-0">A large provider of custom online maps for websites and applications.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
<div class="card border-0 mb-3">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img5.jpg" alt="Image Description">
<h4 class="h5 mb-1">Spotify</h4>
<p class="mb-0">An entertainment service, specialized in music, podcast, and video streaming service.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
</div>
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<div class="card border-0 mb-3 mb-lg-0">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img2.jpg" alt="Image Description">
<h4 class="h5 mb-1">Airbnb</h4>
<p class="mb-0">An online marketplace and hospitality service for people to lease or rent short-term lodging.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
<div class="card border-0 mb-3 mb-lg-0">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img6.jpg" alt="Image Description">
<h4 class="h5 mb-1">DigitalOcean</h4>
<p class="mb-0">Providing developers and businesses a reliable, easy-to-use cloud computing platform of virtual servers.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
<div class="card border-0">
<!-- Works -->
<div class="card-body border border-bottom-0 rounded-top text-center p-5">
<img class="u-md-avatar rounded mb-4" src="../assets/img/160x160/img1.jpg" alt="Image Description">
<h4 class="h5 mb-1">InVision</h4>
<p class="mb-0">InVision is the digital product design platform used to make the world's best customer experiences.</p>
</div>
<div class="card-footer text-center border rounded-bottom p-5">
<h4 class="h6 text-secondary">Contributors</h4>
<!-- Contributors List -->
<ul class="list-inline mr-2 mb-4">
<li class="list-inline-item mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-sm-avatar u-sm-avatar--bordered rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
</ul>
<!-- End Contributors List -->
<a class="btn btn-sm btn-primary btn-wide" href="../html/portfolio/case-studies-simple.html">Learn More</a>
</div>
<!-- End Works -->
</div>
</div>
</div>
Cards #4
Mapbox Cloud free trial
Test Space on Mapbox Cloud with your own data for free.
Slack Cloud free trial
Test Space on Slack Cloud with your own data for free.
Atlassian Cloud free trial
Test Space on Atlassian Cloud with your own data for free.
<!-- Features Section -->
<div class="bg-gray-100">
<div class="container space-2 space-3--lg">
<div class="card-deck d-block d-md-flex text-center">
<!-- Card -->
<div class="card shadow-sm mb-5 mb-md-0">
<div class="card-header bg-gray-100 p-6">
<img class="max-width-18" src="../assets/img/logos/mapbox.png" alt="Image Description">
</div>
<div class="card-body p-6">
<div class="mb-4">
<h3 class="h4">Mapbox Cloud free trial</h3>
<p>Test Space on Mapbox Cloud with your own data for free.</p>
</div>
<a class="btn btn-sm btn-primary" href="#">Start Free Trial</a>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card shadow-sm mb-5 mb-md-0">
<div class="card-header bg-gray-100 p-6">
<img class="max-width-18" src="../assets/img/logos/slack.png" alt="Image Description">
</div>
<div class="card-body p-6">
<div class="mb-4">
<h3 class="h4">Slack Cloud free trial</h3>
<p>Test Space on Slack Cloud with your own data for free.</p>
</div>
<a class="btn btn-sm btn-primary" href="#">Start Free Trial</a>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card shadow-sm">
<div class="card-header bg-gray-100 p-6">
<img class="max-width-18" src="../assets/img/logos/atlassian.png" alt="Image Description">
</div>
<div class="card-body p-6">
<div class="mb-4">
<h3 class="h4">Atlassian Cloud free trial</h3>
<p>Test Space on Atlassian Cloud with your own data for free.</p>
</div>
<a class="btn btn-sm btn-primary" href="#">Start Free Trial</a>
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Features Section -->
Cards #5
Product designer event
- Join from anywhere
- Nov 15-16
-
-
-
- speakers
Design engineering
- New York City, NY
- Dec 04-07
-
-
-
- speakers
Developer Meetup
- San Francisco, CA
- Dec 22-24
-
-
- speakers
Space for Marketing
- New York City, NY
- Jan 19-22
-
-
- speakers
<div class="card-deck d-block d-lg-flex mb-3">
<!-- Card -->
<div class="card gradient-half-purple-v1 text-white border-0 mb-3 mb-lg-0">
<div class="card-body">
<div class="media align-items-center">
<div class="align-self-start mr-3">
<span class="u-icon u-icon--light rounded-circle">
<span class="fa fa-play font-size-13 text-purple u-icon__inner"></span>
</span>
</div>
<div class="mr-2">
<div class="mb-2">
<h4 class="h5 font-weight-medium mb-0">Product designer event</h4>
<ul class="list-inline small text-white-70">
<li class="list-inline-item mr-3">
<span class="fa fa-map-marker-alt mr-1"></span>
<span>Join from anywhere</span>
</li>
<li class="list-inline-item">
<span class="fa fa-calendar-alt mr-1"></span>
<span>Nov 15-16</span>
</li>
</ul>
</div>
<!-- Speakers List -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-xs-avatar rounded-circle" src="../assets/img/32x32/img2.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-xs-avatar rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-xs-avatar rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<span class="u-icon u-icon--sm u-icon--light rounded-circle">
<span class="u-icon__inner">+9</span>
</span>
</li>
<li class="list-inline-item text-white-70 small ml-1">speakers</li>
</ul>
<!-- End Speakers List -->
</div>
<div class="media-body text-right">
<button type="button" class="btn btn-sm btn-outline-light">Register</button>
</div>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card">
<div class="card-body">
<div class="media align-items-center">
<div class="mr-2">
<div class="mb-2">
<h4 class="h5 font-weight-medium mb-0">Design engineering</h4>
<ul class="list-inline small text-secondary">
<li class="list-inline-item mr-3">
<span class="fa fa-map-marker-alt mr-1"></span>
<span>New York City, NY</span>
</li>
<li class="list-inline-item">
<span class="fa fa-calendar-alt mr-1"></span>
<span>Dec 04-07</span>
</li>
</ul>
</div>
<!-- Speakers List -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-xs-avatar rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-xs-avatar rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-xs-avatar rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<span class="u-icon u-icon--sm u-icon--secondary rounded-circle">
<span class="u-icon__inner">+1</span>
</span>
</li>
<li class="list-inline-item text-secondary small ml-1">speakers</li>
</ul>
<!-- End Speakers List -->
</div>
<div class="media-body text-right">
<button type="button" class="btn btn-sm btn-outline-primary">Register</button>
</div>
</div>
</div>
</div>
<!-- End Card -->
</div>
<div class="card-deck d-block d-lg-flex mb-3">
<!-- Card -->
<div class="card mb-3 mb-lg-0">
<div class="card-body">
<div class="media align-items-center">
<div class="mr-2">
<div class="mb-2">
<h4 class="h5 font-weight-medium mb-0">Developer Meetup</h4>
<ul class="list-inline small text-secondary">
<li class="list-inline-item mr-3">
<span class="fa fa-map-marker-alt mr-1"></span>
<span>San Francisco, CA</span>
</li>
<li class="list-inline-item">
<span class="fa fa-calendar-alt mr-1"></span>
<span>Dec 22-24</span>
</li>
</ul>
</div>
<!-- Speakers List -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-xs-avatar rounded-circle" src="../assets/img/32x32/img5.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-xs-avatar rounded-circle" src="../assets/img/32x32/img4.jpg" alt="Image Description">
</li>
<li class="list-inline-item text-secondary small ml-1">speakers</li>
</ul>
<!-- End Speakers List -->
</div>
<div class="media-body text-right">
<button type="button" class="btn btn-sm btn-outline-primary">Register</button>
</div>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card">
<div class="card-body">
<div class="media align-items-center">
<div class="mr-2">
<div class="mb-2">
<h4 class="h5 font-weight-medium mb-0">Space for Marketing</h4>
<ul class="list-inline small text-secondary">
<li class="list-inline-item mr-3">
<span class="fa fa-map-marker-alt mr-1"></span>
<span>New York City, NY</span>
</li>
<li class="list-inline-item">
<span class="fa fa-calendar-alt mr-1"></span>
<span>Jan 19-22</span>
</li>
</ul>
</div>
<!-- Speakers List -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<img class="img-fluid u-xs-avatar rounded-circle" src="../assets/img/32x32/img3.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<img class="img-fluid u-xs-avatar rounded-circle" src="../assets/img/32x32/img1.jpg" alt="Image Description">
</li>
<li class="list-inline-item ml-n3 mr-0">
<span class="u-icon u-icon--sm u-icon--primary rounded-circle">
<span class="u-icon__inner">KD</span>
</span>
</li>
<li class="list-inline-item text-secondary small ml-1">speakers</li>
</ul>
<!-- End Speakers List -->
</div>
<div class="media-body text-right">
<button type="button" class="btn btn-sm btn-outline-primary">Register</button>
</div>
</div>
</div>
</div>
<!-- End Card -->
</div>
Cards #6
01.
Request Quote
Request quotes from our 10k+ rated transport providers.
02.
Compare price
Compare prices and read previous customer feedback to pick the right delivery quote for you.
03.
Choose provider
Sit back and relax while your item is safely delivered by your chosen transport provider.
<div class="card-deck d-block d-lg-flex">
<!-- Card -->
<div class="card shadow-sm overflow-hidden mb-3 mb-lg-0">
<div class="card-body p-5 pr-9">
<span class="h1 text-primary">01.</span>
<h3 class="h5 font-weight-medium">Request Quote</h3>
<p>Request quotes from our 10k+ rated transport providers.</p>
</div>
<div class="card-footer border-top-0 p-5 pr-9">
<a class="font-weight-medium" href="#">Explore more</a>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card shadow-sm overflow-hidden mb-3 mb-lg-0">
<div class="card-body p-5 pr-9">
<span class="h1 text-primary">02.</span>
<h3 class="h5 font-weight-medium">Compare price</h3>
<p>Compare prices and read previous customer feedback to pick the right delivery quote for you.</p>
</div>
<div class="card-footer border-top-0 p-5 pr-9">
<a class="font-weight-medium" href="#">Explore more</a>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card shadow-sm overflow-hidden">
<div class="card-body p-5 pr-9">
<span class="h1 text-primary">03.</span>
<h3 class="h5 font-weight-medium">Choose provider</h3>
<p>Sit back and relax while your item is safely delivered by your chosen transport provider.</p>
</div>
<div class="card-footer border-top-0 p-5 pr-9">
<a class="font-weight-medium" href="#">Explore more</a>
</div>
</div>
<!-- End Card -->
</div>
Cards #7
Weekend Deal
Tropical Experiences
Get yourself a new deal from us to experience the tropical atmosphere by the end of this week. Go and get it because this never come twice
<div class="card">
<div class="card-header border-0 pt-6 px-6 pb-0">
<i class="svg-icon svg-icon-sm text-primary mb-5">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path d="M16.0322024,5.68722152 L5.75790403,15.945742 C5.12139076,16.5812778 5.12059836,17.6124773 5.75613416,18.2489906 C5.75642891,18.2492858 5.75672377,18.2495809 5.75701875,18.2498759 L5.75701875,18.2498759 C6.39304347,18.8859006 7.42424328,18.8859006 8.060268,18.2498759 C8.06056298,18.2495809 8.06085784,18.2492858 8.0611526,18.2489906 L18.3196731,7.9746922 C18.9505124,7.34288268 18.9501191,6.31942463 18.3187946,5.68810005 L18.3187946,5.68810005 C17.68747,5.05677547 16.6640119,5.05638225 16.0322024,5.68722152 Z" fill="#000000" fill-rule="nonzero"></path>
<path d="M9.85714286,6.92857143 C9.85714286,8.54730513 8.5469533,9.85714286 6.93006028,9.85714286 C5.31316726,9.85714286 4,8.54730513 4,6.92857143 C4,5.30983773 5.31316726,4 6.93006028,4 C8.5469533,4 9.85714286,5.30983773 9.85714286,6.92857143 Z M20,17.0714286 C20,18.6901623 18.6898104,20 17.0729174,20 C15.4560244,20 14.1428571,18.6901623 14.1428571,17.0714286 C14.1428571,15.4497247 15.4560244,14.1428571 17.0729174,14.1428571 C18.6898104,14.1428571 20,15.4497247 20,17.0714286 Z" fill="#000000" opacity="0.3"></path>
</g>
</svg>
</i>
<h6 class="text-uppercase text-gray-700 font-weight-medium letter-spacing-0_06 mb-2">Weekend Deal</h6>
<h2>Tropical Experiences</h2>
</div>
<div class="card-body px-6 py-0">
<p class="mb-7">Get yourself a new deal from us to experience the tropical atmosphere by the end of this week. Go and get it because this never come twice</p>
</div>
<div class="card-footer border-0 d-sm-flex justify-content-between align-items-center pt-0 px-6 pb-6">
<div class="mb-3 mb-sm-0">
<small class="text-muted d-block mb-n1">Starts from</small>
<span class="font-size-28">$520.00</span> <small>/ night</small>
</div>
<div class="text-sm-right">
<a class="btn btn-sm btn-primary" href="#">See Rooms Options</a>
</div>
</div>
</div>
Cards #8
Looking for a place to stay
Wants to sell or rent
your property?
Sell your property in a quick time and
less effort than ever
<div class="row">
<div class="col-md-6">
<!-- Card -->
<article class="card shadow-sm h-md-100 px-4 py-7 border-top-0 border-left-0 border-right-0 border-bottom border-3 border-primary mb-4 mb-md-0">
<div class="w-md-70 mx-md-auto">
<span class="u-icon u-icon--lg u-icon--primary-soft rounded-circle mb-4">
<i class="svg-icon svg-icon-sm text-primary u-icon__inner">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-General-/-Search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" id="Path-2" fill="#000000"></path>
<path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" id="Path" fill="#000000"></path>
</g>
</svg>
</i>
</span>
<h3 class="text-lh-xs mb-3">Looking for a place to stay<br class="d-none d-lg-inline-block"> or a property to rent?</h3>
<p class="text-muted mb-5">We guarantee you every aspect that you like on<br class="d-none d-lg-inline-block"> your property is available in here</p>
<a class="btn btn-sm btn-primary" href="#">Give it a try now</a>
</div>
</article>
<!-- End Card -->
</div>
<div class="col-md-6">
<!-- Card -->
<article class="card shadow-sm h-md-100 px-4 py-7 border-top-0 border-left-0 border-right-0 border-bottom border-3 border-primary">
<div class="w-md-70 mx-md-auto">
<span class="u-icon u-icon--lg u-icon--primary-soft rounded-circle mb-4">
<i class="svg-icon svg-icon-sm text-primary u-icon__inner">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-Home-/-Home" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M3.95709826,8.41510662 L11.47855,3.81866389 C11.7986624,3.62303967 12.2013376,3.62303967 12.52145,3.81866389 L20.0429,8.41510557 C20.6374094,8.77841684 21,9.42493654 21,10.1216692 L21,19.0000642 C21,20.1046337 20.1045695,21.0000642 19,21.0000642 L4.99998155,21.0000673 C3.89541205,21.0000673 2.99998155,20.1046368 2.99998155,19.0000673 L2.99999828,10.1216672 C2.99999935,9.42493561 3.36258984,8.77841732 3.95709826,8.41510662 Z M10,13 C9.44771525,13 9,13.4477153 9,14 L9,17 C9,17.5522847 9.44771525,18 10,18 L14,18 C14.5522847,18 15,17.5522847 15,17 L15,14 C15,13.4477153 14.5522847,13 14,13 L10,13 Z" id="Combined-Shape" fill="#000000"></path>
</g>
</svg>
</i>
</span>
<h3 class="text-lh-xs mb-3">Wants to sell or rent<br class="d-none d-lg-inline-block"> your property?</h3>
<p class="text-muted mb-5">Sell your property in a quick time and<br class="d-none d-lg-inline-block"> less effort than ever</p>
<a class="btn btn-sm btn-primary" href="#">Let's get started</a>
</div>
</article>
<!-- End Card -->
</div>
</div>
Cards #9
Flexible
Set a meeting that fit your schedule anytime and anywhere you like.
Negotiation
Find the best price easily with us and negotiate until get a deal.
Customize-able
Adjust everything you want on your future propert.
<!-- Card -->
<div class="card border-0 overflow-hidden mb-4">
<div class="row no-gutters align-items-center align-items-stretch">
<div class="col-md-4 bg-img-hero bg-img-hero-center" style="background-image: url(../assets/img/demo/real-estate/solutions-1.jpg);"></div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title mb-0">Flexible</h5>
<p class="card-text">Set a meeting that fit your schedule anytime and anywhere you like.</p>
</div>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card border-0 overflow-hidden mb-4">
<div class="row no-gutters align-items-center align-items-stretch">
<div class="col-md-4 bg-img-hero bg-img-hero-center" style="background-image: url(../assets/img/demo/real-estate/solutions-2.jpg);"></div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title mb-0">Negotiation</h5>
<p class="card-text">Find the best price easily with us and negotiate until get a deal.</p>
</div>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card border-0 overflow-hidden">
<div class="row no-gutters align-items-center align-items-stretch">
<div class="col-md-4 bg-img-hero bg-img-hero-center" style="background-image: url(../assets/img/demo/real-estate/solutions-3.jpg);"></div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title mb-0">Customize-able</h5>
<p class="card-text">Adjust everything you want on your future propert.</p>
</div>
</div>
</div>
</div>
<!-- End Card -->
Cards #10
<div class="row">
<!-- Popular Job Item -->
<div class="col-sm-6 col-lg-3 mb-3">
<a class="card lift link-dark shadow-sm border-0" href="#">
<div class="card-body d-flex justify-content-between align-items-center px-4">
<span>UI/UX Designer opacity</span>
<i class="fas fa-chevron-right opacity ml-2"></i>
</div>
</a>
</div>
<!-- End Popular Job Item -->
<!-- Popular Job Item -->
<div class="col-sm-6 col-lg-3 mb-3">
<a class="card lift link-dark shadow-sm border-0" href="#">
<div class="card-body d-flex justify-content-between align-items-center px-4">
<span>Marketing</span>
<i class="fas fa-chevron-right opacity ml-2"></i>
</div>
</a>
</div>
<!-- End Popular Job Item -->
<!-- Popular Job Item -->
<div class="col-sm-6 col-lg-3 mb-3">
<a class="card lift link-dark shadow-sm border-0" href="#">
<div class="card-body d-flex justify-content-between align-items-center px-4">
<span>iOS Developer</span>
<i class="fas fa-chevron-right opacity ml-2"></i>
</div>
</a>
</div>
<!-- End Popular Job Item -->
<!-- Popular Job Item -->
<div class="col-sm-6 col-lg-3 mb-3">
<a class="card lift link-dark shadow-sm border-0" href="#">
<div class="card-body d-flex justify-content-between align-items-center px-4">
<span>Android Developer</span>
<i class="fas fa-chevron-right opacity ml-2"></i>
</div>
</a>
</div>
<!-- End Popular Job Item -->
</div>
Cards #11
<div class="row">
<!-- Popular Company Item -->
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card border-0 shadow-sm h-100">
<a href="#"><img class="card-img-top" src="../assets/img/demo/job/office-1.jpg" alt="Image Description"></a>
<div class="card-body pt-0 px-4">
<div class="u-md-avatar shadow-sm rounded-circle mt-n5 mb-3">
<img class="img-fluid rounded-circle" src="../assets/img/160x160/img5.jpg" alt="Image Description">
</div>
<h3 class="h5"><a href="#">Dropbox</a></h3>
<p class="text-muted mb-0">44 Open positions</p>
</div>
<div class="card-footer text-muted d-md-flex justify-content-between align-items-center mx-4 px-0">
<a class="d-flex align-items-center text-muted mb-2 mb-md-0" href="#">
<i class="svg-icon svg-icon-xs text-secondary mt-n1 mr-2">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000"></path>
</g>
</svg>
</i>
<span>Minneapolis, MN</span>
</a>
<a class="d-flex align-items-center font-weight-bold" href="#">
Details
<i class="svg-icon svg-icon-xs text-primary mt-n1 ml-2">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1"></rect>
<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) "></path>
</g>
</svg>
</i>
</a>
</div>
</div>
</div>
<!-- End Popular Company Item -->
<!-- Popular Company Item -->
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card border-0 shadow-sm h-100">
<a href="#"><img class="card-img-top" src="../assets/img/demo/job/office-2.jpg" alt="Image Description"></a>
<div class="card-body pt-0 px-4">
<div class="u-md-avatar shadow-sm rounded-circle mt-n5 mb-3">
<img class="img-fluid rounded-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
</div>
<h3 class="h5"><a href="#">Invision</a></h3>
<p class="text-muted mb-0">12 Open positions</p>
</div>
<div class="card-footer text-muted d-md-flex justify-content-between align-items-center mx-4 px-0">
<a class="d-flex align-items-center text-muted mb-2 mb-md-0" href="#">
<i class="svg-icon svg-icon-xs text-secondary mt-n1 mr-2">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000"></path>
</g>
</svg>
</i>
<span>Minneapolis, MN</span>
</a>
<a class="d-flex align-items-center font-weight-bold" href="#">
<span>Details</span>
<i class="svg-icon svg-icon-xs text-primary mt-n1 ml-2">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1"></rect>
<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) "></path>
</g>
</svg>
</i>
</a>
</div>
</div>
</div>
<!-- End Popular Company Item -->
<!-- Popular Company Item -->
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card border-0 shadow-sm h-100">
<a href="#"><img class="card-img-top" src="../assets/img/demo/job/office-3.jpg" alt="Image Description"></a>
<div class="card-body pt-0 px-4">
<div class="u-md-avatar shadow-sm rounded-circle mt-n5 mb-3">
<img class="img-fluid rounded-circle" src="../assets/img/160x160/img4.jpg" alt="Image Description">
</div>
<h3 class="h5"><a href="#">MapBox</a></h3>
<p class="text-muted mb-0">35 Open positions</p>
</div>
<div class="card-footer text-muted d-md-flex justify-content-between align-items-center mx-4 px-0">
<a class="d-flex align-items-center text-muted mb-2 mb-md-0" href="#">
<i class="svg-icon svg-icon-xs text-secondary mt-n1 mr-2">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000"></path>
</g>
</svg>
</i>
<span>Minneapolis, MN</span>
</a>
<a class="d-flex align-items-center font-weight-bold" href="#">
<span>Details</span>
<i class="svg-icon svg-icon-xs text-primary mt-n1 ml-2">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1"></rect>
<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) "></path>
</g>
</svg>
</i>
</a>
</div>
</div>
</div>
<!-- End Popular Company Item -->
</div>
Cards #12
June 23, 2019
Cleveland, Ohio
<!-- Featured Job Item -->
<div class="card shadow-sm border-0 mb-4 px-4">
<div class="card-body d-md-flex justify-content-between align-items-center py-4 px-0">
<div class="media align-items-center mb-5 mb-md-0">
<a class="u-md-avatar mr-3" href="#">
<img class="img-fluid rounded-circle" src="../assets/img/160x160/img4.jpg" alt="Image Description">
</a>
<div class="media-body">
<a class="small text-uppercase text-secondary letter-spacing-0_06 mb-1" href="#">Mapbox</a>
<h3 class="h5 mb-0"><a href="#">UI/UX Designer</a></h3>
</div>
</div>
<div class="text-md-right text-secondary">
<small class="d-block mb-2 mb-md-1">June 23, 2019</small>
<a class="d-flex align-items-center text-secondary" href="#">
<i class="svg-icon svg-icon-xs text-secondary mt-n1 mr-2">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000"></path>
</g>
</svg>
</i>
<span>Cleveland, Ohio</span>
</a>
</div>
</div>
<div class="card-footer d-md-flex justify-content-between align-items-center px-0">
<div class="mb-4 mb-md-0">
<a class="u-label u-label--xs u-label--primary text-uppercase letter-spacing-0_06 mr-2 mb-2" href="#">Part-time</a>
<a class="u-label u-label--xs u-label--primary text-uppercase letter-spacing-0_06 mr-2 mb-2" href="#">UI/UX designer</a>
<a class="u-label u-label--xs u-label--primary text-uppercase letter-spacing-0_06 mr-2 mb-2" href="#">$25k-$35k</a>
</div>
<a class="d-flex align-items-center font-weight-bold mb-2" href="#infoModal" data-toggle="modal">
<span>Details</span>
<i class="svg-icon svg-icon-xs text-primary mt-n1 ml-2">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) " x="11" y="5" width="2" height="14" rx="1"></rect>
<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997) "></path>
</g>
</svg>
</i>
</a>
</div>
</div>
<!-- End Featured Job Item -->