Cards - Grid
Component #1
<!-- Articles Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-60 text-center mx-md-auto mb-5 mb-md-9">
<h2>Analytics solutions</h2>
</div>
<!-- End Title -->
<div class="row">
<div class="col-md-6 col-lg-4 mb-3 mb-lg-0">
<!-- Card -->
<a class="card card-bg-light h-100 shadow-none overflow-hidden transition-3d-hover" href="#">
<div class="row align-items-center">
<div class="col-8 col-md-6">
<div class="py-3 pl-4">
<h2 class="h4">Analytics you can trust</h2>
<span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</div>
<div class="col-4 col-md-6 px-0">
<img class="img-fluid" src="../../assets/svg/illustrations/apps.svg" alt="SVG">
</div>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-md-6 col-lg-4 mb-3 mb-lg-0">
<!-- Card -->
<a class="card card-bg-light h-100 shadow-none overflow-hidden transition-3d-hover" href="#">
<div class="row align-items-center">
<div class="col-8 col-md-6">
<div class="py-3 pl-4">
<h2 class="h4">Scheduling made simple</h2>
<span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</div>
<div class="col-4 col-md-6 px-0">
<img class="img-fluid" src="../../assets/svg/illustrations/calendar.svg" alt="SVG">
</div>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-md-6 col-lg-4">
<!-- Card -->
<a class="card card-bg-light h-100 shadow-none overflow-hidden transition-3d-hover" href="#">
<div class="row align-items-center">
<div class="col-8 col-md-6">
<div class="py-3 pl-4">
<h2 class="h4">Listening made easy</h2>
<span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</div>
<div class="col-4 col-md-6 px-0">
<img class="img-fluid" src="../../assets/svg/illustrations/communication.svg" alt="SVG">
</div>
</div>
</a>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Articles Section -->
Component #2
<!-- FAQ Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-5">
<a class="card card-frame h-100" href="#">
<div class="card-body">
<!-- Icon Block -->
<div class="media d-block d-sm-flex">
<figure class="w-100 max-w-8rem mb-2 mb-sm-0 mr-sm-4">
<img class="img-fluid" src="../assets/svg/icons/icon-1.svg" alt="SVG">
</figure>
<div class="media-body">
<h2 class="h3">Getting started</h2>
<p class="font-size-1 text-body">Welcome to Front! We're so glad you're here. Let's get started!</p>
<div class="media">
<!-- Contributors List -->
<div class="avatar-group mr-2">
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
</div>
<!-- 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>
</div>
<div class="col-lg-6 mb-3 mb-lg-5">
<a class="card card-frame h-100" href="#">
<div class="card-body">
<!-- Icon Block -->
<div class="media d-block d-sm-flex">
<figure class="w-100 max-w-8rem mb-2 mb-sm-0 mr-sm-4">
<img class="img-fluid" src="../assets/svg/icons/icon-46.svg" alt="SVG">
</figure>
<div class="media-body">
<h3>Account</h3>
<p class="font-size-1 text-body">Adjust your profile and preferences to make Front work just for you!</p>
<div class="media">
<!-- Contributors List -->
<div class="avatar-group mr-2">
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="avatar avatar-xs avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
</div>
<!-- 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>
</div>
</div>
<!-- End FAQ Section -->
Component #3
<!-- Articles Section -->
<div class="container space-2">
<div class="w-lg-80 mx-lg-auto">
<div class="row">
<div class="col-md-6 mb-3 mb-lg-0">
<!-- Icon Block -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<div class="media">
<figure class="w-100 max-w-6rem mr-3">
<img class="img-fluid" src="../../assets/svg/icons/icon-15.svg" alt="SVG">
</figure>
<div class="media-body">
<h3>Ask a question</h3>
<p class="text-body">Email with support members to get your questions answered.</p>
</div>
</div>
</div>
</a>
<!-- End Icon Block -->
</div>
<div class="col-md-6 mb-3 mb-lg-0">
<!-- Icon Block -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<div class="media">
<figure class="w-100 max-w-6rem mr-3">
<img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
</figure>
<div class="media-body">
<h3>Read documentation</h3>
<p class="text-body">Dig into the technical details of our products and consensus algorithm.</p>
</div>
</div>
</div>
</a>
<!-- End Icon Block -->
</div>
</div>
</div>
</div>
<!-- End Articles Section -->
Component #4
What can you do with Front?
Channels
Communication in Front happens in channels, organized by project, topic, team, or whatever makes sense for you.
Integrations
Front works with the tools and services you already use every day. Pipe in information or take action without leaving Front.
Security
We take security seriously at Slack. We offer measures like 2FA and SSO to ensure the safety of your data and protect your organization.
See Help Front in action. Get a Demo
<!-- Features Section -->
<div class="container space-2 text-center">
<div class="mb-9">
<h2 class="h1">What can you do with Front?</h2>
</div>
<div class="position-relative pt-5 pb-3 pt-md-11 pb-md-7">
<div class="position-relative z-index-2 p-2 p-sm-0">
<!-- News Carousel -->
<div class="js-slick-carousel slick slick-equal-height slick-gutters-3 mb-5"
data-hs-slick-carousel-options='{
"slidesToShow": 3,
"dots": true,
"dotsClass": "slick-pagination slick-pagination-white d-lg-none mt-5",
"responsive": [{
"breakpoint": 1200,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]
}'>
<!-- Card Block -->
<div class="js-slide mt-1 mb-3">
<div class="card flex-wrap flex-row">
<div class="card-body py-6">
<h3 class="mb-5">Channels</h3>
<figure class="max-w-27rem w-100 mx-auto mb-4">
<img class="img-fluid" src="../assets/svg/illustrations/server-woman.svg" alt="Image Description">
</figure>
<p>Communication in Front happens in channels, organized by project, topic, team, or whatever makes sense for you.</p>
</div>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide mt-1 mb-3">
<div class="card flex-wrap flex-row">
<div class="card-body py-6">
<h3 class="mb-5">Integrations</h3>
<figure class="max-w-27rem w-100 mx-auto mb-4">
<img class="img-fluid" src="../assets/svg/illustrations/full-stack.svg" alt="Image Description">
</figure>
<p>Front works with the tools and services you already use every day. Pipe in information or take action without leaving Front.</p>
</div>
</div>
</div>
<!-- End Card Block -->
<!-- Card Block -->
<div class="js-slide mt-1 mb-3">
<div class="card flex-wrap flex-row">
<div class="card-body py-6">
<h3 class="mb-5">Security</h3>
<figure class="max-w-27rem w-100 mx-auto mb-4">
<img class="img-fluid" src="../assets/svg/illustrations/business-woman.svg" alt="Image Description">
</figure>
<p>We take security seriously at Slack. We offer measures like 2FA and SSO to ensure the safety of your data and protect your organization.</p>
</div>
</div>
</div>
<!-- End Card Block -->
</div>
<!-- Info -->
<p class="text-white">
See Help Front in action.
<a class="text-warning font-weight-bold" href="#">
Get a Demo
<span class="btn btn-xs btn-icon btn-light rounded-circle ml-2">
<i class="fas fa-arrow-right"></i>
</span>
</a>
</p>
<!-- End Info -->
</div>
<!-- Background -->
<div class="bg-navy position-absolute top-0 right-0 bottom-0 left-0 rounded-lg mx-sm-7" style="background-image: url(../assets/svg/components/abstract-shapes-20.svg);"></div>
</div>
</div>
<!-- End Features Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>
Component #5
Front gives every team the freedom to create
Evaluate your options better and learn more about them.
<!-- Articles Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-0">
<!-- Card -->
<article class="card h-100">
<div class="w-sm-65 p-4">
<h3>Explore the Snippets tools</h3>
<div class="mb-4">
<p>Start your business on various platforms with one click.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="#">Find out More <i class="fas fa-angle-right ml-1"></i></a>
</div>
<div class="position-absolute bottom-0 right-0 w-sm-35 max-w-27rem">
<img class="img-fluid" src="../../assets/svg/illustrations/support-man.svg" alt="Image Description">
</div>
</article>
<!-- End Card -->
</div>
<div class="col-lg-6">
<!-- Card -->
<article class="card h-100">
<div class="w-sm-65 p-4">
<h3>Front gives every team the freedom to create</h3>
<div class="mb-4">
<p>Evaluate your options better and learn more about them.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="#">Find out More <i class="fas fa-angle-right ml-1"></i></a>
</div>
<div class="position-absolute bottom-0 right-0 w-sm-35 max-w-27rem">
<img class="img-fluid" src="../../assets/svg/illustrations/list-app.svg" alt="Image Description">
</div>
</article>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Articles Section -->
Component #6
Key benefits
Design faster with a growing array of beautiful templates.
<!-- Features Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2 class="h1">Key benefits</h2>
<p>Design faster with a growing array of beautiful templates.</p>
</div>
<!-- End Title -->
<div class="row mx-n2">
<div class="col-sm-6 col-lg-3 px-2 mb-3 mb-lg-0">
<!-- Icon Blocks -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<figure class="w-100 max-w-8rem mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-9.svg" alt="SVG">
</figure>
<h4>Responsive</h4>
<p class="font-size-1 text-body mb-0">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-3 px-2 mb-3 mb-lg-0">
<!-- Icon Blocks -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<figure class="w-100 max-w-8rem mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-3.svg" alt="SVG">
</figure>
<h4>Customizable</h4>
<p class="font-size-1 text-body mb-0">Front template can be easily customized with its cutting-edge components and features.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-3 px-2 mb-3 mb-sm-0">
<!-- Icon Blocks -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<figure class="w-100 max-w-8rem mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
</figure>
<h4>Premium <span class="badge badge-success badge-pill ml-1">sketch</span></h4>
<p class="font-size-1 text-body mb-0">Front is not only for developers but also for designers, and includes a Sketch file.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-3 px-2">
<!-- Icon Blocks -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="card-body">
<figure class="w-100 max-w-8rem mb-4">
<img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
</figure>
<h4>Documentation</h4>
<p class="font-size-1 text-body mb-0">Every component and plugin is well documented with live examples.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<!-- End Features Section -->
Component #7
<!-- Article Section -->
<div class="container space-2">
<div class="row mx-n2">
<div class="col-md-6 px-2 mb-3 mb-lg-0">
<!-- Icon Block -->
<a class="card card-frame h-100" href="#">
<div class="card-body">
<div class="media">
<figure class="w-100 max-w-6rem mr-3">
<img class="img-fluid" src="../../assets/svg/icons/icon-4.svg" alt="SVG">
</figure>
<div class="media-body">
<h3>Ask a question</h3>
<p class="text-body">Chat live with community members to get your questions answered.</p>
</div>
</div>
</div>
</a>
<!-- End Icon Block -->
</div>
<div class="col-md-6 px-2 mb-3 mb-lg-0">
<!-- Icon Block -->
<a class="card card-frame h-100" href="#">
<div class="card-body">
<div class="media">
<figure class="w-100 max-w-6rem mr-3">
<img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
</figure>
<div class="media-body">
<h3>Read documentation</h3>
<p class="text-body">Dig into the technical details of our products and consensus algorithm.</p>
</div>
</div>
</div>
</a>
<!-- End Icon Block -->
</div>
</div>
</div>
<!-- End Article Section -->
Component #8
<!-- Cards Section -->
<div class="container space-2">
<div class="row mx-n2">
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Card -->
<a class="card card-frame h-100" href="app-description.html">
<div class="card-header bg-success text-center rounded-top py-4">
<div class="avatar avatar-lg d-block bg-white rounded p-2 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img34.png" alt="Image Description">
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center mb-1">
<span class="d-block text-dark font-weight-bold">Aircall</span>
<img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<span class="d-block text-body font-size-1">Deliver call activity and voicemails straight to your inbox</span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Card -->
<a class="card card-frame h-100" href="app-description.html">
<div class="card-header bg-danger text-center rounded-top py-4">
<div class="avatar avatar-lg d-block bg-white rounded p-2 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img17.png" alt="Image Description">
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center mb-1">
<span class="d-block text-dark font-weight-bold">Google</span>
<img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<span class="d-block text-body font-size-1">Multinational technology company that specializes in Internet-related services</span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-md-4 px-2">
<!-- Card -->
<a class="card card-frame h-100" href="app-description.html">
<div class="card-header bg-warning text-center rounded-top py-4">
<div class="avatar avatar-lg d-block bg-white rounded p-2 mx-auto">
<img class="avatar-img" src="../../assets/img/160x160/img14.png" alt="Image Description">
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center mb-1">
<span class="d-block text-dark font-weight-bold">Slack</span>
<img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<span class="d-block text-body font-size-1">Email collaboration and email service desk made easy</span>
</div>
</a>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Cards Section -->
Component #9
<!-- Cards Section -->
<div class="container space-2">
<!-- Title -->
<div class="d-flex justify-content-between align-items-center mb-3">
<h3 class="mb-0">Featured</h3>
<a class="font-size-1 font-weight-bold" href="#">View All <i class='fas fa-angle-right fa-sm ml-1'></i></a>
</div>
<!-- End Title -->
<div class="row mx-n2">
<!-- Card -->
<div class="col-sm-6 col-md-4 px-2 mb-3">
<div class="card card-frame h-100">
<a class="card-body" href="#">
<div class="media">
<div class="avatar avatar-xs mt-1 mr-3">
<img class="avatar-img" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
</div>
<div class="media-body">
<div class="d-flex align-items-center">
<span class="d-block text-dark font-weight-bold">Spotify</span>
<img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<small class="d-block text-body">Entertainment</small>
</div>
</div>
</a>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="col-sm-6 col-md-4 px-2 mb-3">
<div class="card card-frame h-100">
<a class="card-body" href="#">
<div class="media">
<div class="avatar avatar-xs mt-1 mr-3">
<img class="avatar-img" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<div class="d-flex align-items-center">
<span class="d-block text-dark font-weight-bold">Slack</span>
</div>
<small class="d-block text-body">Communication</small>
</div>
</div>
</a>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="col-sm-6 col-md-4 px-2 mb-3">
<div class="card card-frame h-100">
<a class="card-body" href="app-description.html">
<div class="media">
<div class="avatar avatar-xs mt-1 mr-3">
<img class="avatar-img" src="../../assets/img/160x160/img23.png" alt="Image Description">
</div>
<div class="media-body">
<div class="d-flex align-items-center">
<span class="d-block text-dark font-weight-bold">Google Drive</span>
<img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
</div>
<small class="d-block text-body">File management</small>
</div>
</div>
</a>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Cards Section -->
Component #10
Learn to develop sites with components and design systems
<!-- Articles Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Learn to develop sites with components and design systems</h2>
</div>
<!-- End Title -->
<div class="row mx-n2 mx-lg-n3">
<div class="col-sm-6 col-lg-4 px-2 px-lg-3 mb-3 mb-lg-0">
<!-- Card -->
<a class="card bg-primary text-left h-100 transition-3d-hover" href="#">
<div class="card-body">
<div class="mb-5">
<h3 class="text-white">Documentation</h3>
<p class="text-white">Discover how to build and maintain coding systems using our documentation.</p>
</div>
<img class="img-fluid w-100" src="../../assets/svg/illustrations/docs-frame.svg" alt="Image Description">
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="font-size-1 text-white font-weight-bold">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg-4 px-2 px-lg-3 mb-3 mb-lg-0">
<!-- Card -->
<a class="card bg-navy text-left h-100 transition-3d-hover" href="javascript:;">
<div class="card-body">
<div class="mb-5">
<h3 class="text-white">Snippets</h3>
<p class="text-white">Start browsing our snippets pages with copy-to-clipboard snippets to match Bootstrap's level of quality.</p>
</div>
<img class="img-fluid w-100" src="../../assets/svg/illustrations/snippets-frame.svg" alt="Image Description">
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="font-size-1 text-white font-weight-bold">Start building <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg-4 px-2 px-lg-3">
<!-- Card -->
<a class="card bg-warning text-left h-100 transition-3d-hover" href="javascript:;">
<div class="card-body">
<div class="mb-5">
<h3 class="text-white">Layout options</h3>
<p class="text-white">Apart from 70+ HTML-pages, the theme comes with 6 ready-to-use and stand-alone demo options.</p>
</div>
<img class="img-fluid w-100" src="../../assets/svg/illustrations/layouts-frame.svg" alt="Image Description">
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="font-size-1 text-white font-weight-bold">View examples <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Articles Section -->
Component #11
Front process
Once you are invited to Front Agency, you company will be set within days.
Find Out More
Product design
Easy and fast adjustments of elements are possible with Front template.
Find Out More
<!-- Services Section -->
<div class="container">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-0">
<!-- Card -->
<div class="card bg-primary text-white h-100 overflow-hidden p-5">
<div class="w-65 pr-2">
<h2 class="text-white">Front process</h2>
<p class="text-white">Once you are invited to Front Agency, you company will be set within days.</p>
<a class="btn btn-sm btn-light transition-3d-hover" href="#">Find Out More <i class="fas fa-angle-right ml-1"></i></a>
</div>
<div class="position-absolute right-0 bottom-0 w-50 mb-n3 mr-n4">
<img class="img-fluid" src="../../assets/img/mockups/img15.png" alt="Image Description">
</div>
</div>
<!-- End Card -->
</div>
<div class="col-lg-6">
<!-- Card -->
<div class="card bg-warning text-white h-100 overflow-hidden p-5">
<div class="w-65 pr-2">
<h2 class="text-white">Product design</h2>
<p class="text-white">Easy and fast adjustments of elements are possible with Front template.</p>
<a class="btn btn-sm btn-light transition-3d-hover" href="#">Find Out More <i class="fas fa-angle-right ml-1"></i></a>
</div>
<div class="position-absolute right-0 bottom-0 w-50 mb-n3 mr-n4">
<img class="img-fluid" src="../../assets/img/mockups/img12.png" alt="Image Description">
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Services Section -->
Component #12
Platforms
Three platforms – handled by one tool
<!-- Articles Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="d-block small font-weight-bold text-cap mb-2">Platforms</span>
<h2 class="h1">Three platforms – handled by one tool</h2>
</div>
<!-- End Title -->
<div class="row">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<!-- Card -->
<a class="card shadow-soft h-100 text-center transition-3d-hover" href="#">
<div class="card-body pt-7 px-7">
<figure class="avatar mx-auto mb-4">
<img class="avatar-img" src="../../assets/img/160x160/img20.png" alt="Logo">
</figure>
<h3>Facebook Ads</h3>
<p class="text-body">Automated rules, Auto Post Boosting, Bulk Creation and reports in Slack.</p>
</div>
<div class="card-footer border-0 pt-0 pb-7 px-7">
<span class="font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
<!-- Card -->
<a class="card shadow-soft h-100 text-center transition-3d-hover" href="#">
<div class="card-body pt-7 px-7">
<figure class="avatar mx-auto mb-4">
<img class="avatar-img" src="../../assets/img/160x160/img35.png" alt="Logo">
</figure>
<h3>Google Ads</h3>
<p class="text-body">The best scripts alternative and quick reports for the whole team.</p>
</div>
<div class="card-footer border-0 pt-0 pb-7 px-7">
<span class="font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-md-6 col-lg-4">
<!-- Card -->
<a class="card shadow-soft h-100 text-center transition-3d-hover" href="#">
<div class="card-body pt-7 px-7">
<figure class="avatar mx-auto mb-4">
<img class="avatar-img" src="../../assets/img/160x160/img36.png" alt="Logo">
</figure>
<h3>Snapchat Ads</h3>
<p class="text-body">Scale profitable snaps and optimize your cost per swipe by using automated rules.</p>
</div>
<div class="card-footer border-0 pt-0 pb-7 px-7">
<span class="font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Articles Section -->
Component #13
<!-- Articles Section -->
<div class="container space-2">
<div class="row">
<!-- Article -->
<article class="col-lg-6 mb-3 mb-sm-5 mb-lg-0">
<a class="card align-items-end flex-wrap flex-row bg-img-hero text-white h-100 min-h-380rem transition-3d-hover" href="#" style="background-image: url(../../assets/svg/components/graphics-6.svg);">
<div class="card-body">
<h2 class="text-white">Revolutionizing the way start-ups win new customers</h2>
<p>Automate best strategies and focus more on generating hq creatives.</p>
<span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="col-sm-6 col-lg-3 mb-3 mb-sm-0">
<a class="card align-items-end flex-wrap flex-row bg-img-hero text-white h-100 min-h-380rem transition-3d-hover" href="#" style="background-image: url(../../assets/svg/components/graphics-7.svg);">
<div class="card-body">
<h3 class="text-white">How we helped building the industry of the future</h3>
<span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="col-sm-6 col-lg-3">
<a class="card align-items-end flex-wrap flex-row bg-img-hero text-white h-100 min-h-380rem transition-3d-hover" href="#" style="background-image: url(../../assets/svg/components/graphics-4.svg);">
<div class="card-body">
<h3 class="text-white">How to save hundreds of thousands</h3>
<span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
</article>
<!-- End Article -->
</div>
</div>
<!-- End Articles Section -->
Component #14
<!-- Related Courses -->
<div class="container space-2">
<div class="row mx-n2 mx-lg-n3">
<!-- Article -->
<article class="col-sm-6 col-lg-4 px-2 px-lg-3 mb-3 mb-lg-0">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img13.jpg);">
<div class="card-body">
<small class="d-block small text-white-70 font-weight-bold text-cap mb-2">Phython</small>
<h3 class="text-white">What's new in Phython 3.7.2</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="col-sm-6 col-lg-4 px-2 px-lg-3 mb-3 mb-lg-0">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img15.jpg);">
<div class="card-body">
<small class="d-block small text-white-70 font-weight-bold text-cap mb-2">Tooling</small>
<h3 class="text-white">Build a staging server</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="col-md-6 col-lg-4 px-2 px-lg-3">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img17.jpg);">
<div class="card-body">
<small class="d-block small text-white-70 font-weight-bold text-cap mb-2">Popular</small>
<h3 class="text-white">Artificial Intelligence</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
</div>
</div>
<!-- End Related Courses -->
Component #15
Check out our newest and most popular programs
<!-- Popular Categories Section -->
<div class="space-2" style="background: url(../../assets/svg/components/abstract-shapes-9.svg) center no-repeat;">
<div class="position-relative">
<div class="container space-2">
<!-- Title -->
<div class="row align-items-md-center mb-7">
<div class="col-md-6 mb-4 mb-md-0">
<h2>Check out our newest and most popular programs</h2>
</div>
<div class="col-md-6 text-md-right">
<a class="font-weight-bold" href="#">See all Programs <i class="fa fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Title -->
<div class="js-slick-carousel slick slick-equal-height slick-gutters-3 slick-center-mode-right slick-center-mode-right-offset"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fa fa-arrow-left slick-arrow slick-arrow-primary-white slick-arrow-left slick-arrow-centered-y shadow-soft rounded-circle ml-sm-n2\"></span>",
"nextArrow": "<span class=\"fa fa-arrow-right slick-arrow slick-arrow-primary-white slick-arrow-right slick-arrow-centered-y shadow-soft rounded-circle mr-sm-2 mr-xl-4\"></span>",
"slidesToShow": 5,
"infinite": true,
"responsive": [{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]
}'>
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img14.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">New</span>
<h3 class="text-white">Cloud computing</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img13.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Phython</span>
<h3 class="text-white">What's new in Phython 3.7.2</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img15.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Tooling</span>
<h3 class="text-white">Build a staging server</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img16.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">JavaScript</span>
<h3 class="text-white">Laravel, Vue and SPAs</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img17.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Popular</span>
<h3 class="text-white">Artificial Intelligence</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
<!-- Article -->
<article class="js-slide pt-2">
<a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img18.jpg);">
<div class="card-body">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">PHP</span>
<h3 class="text-white">Programming terms explained</h3>
</div>
<div class="card-footer border-0 bg-transparent pt-0">
<span class="text-white font-size-1 font-weight-bold">Read now</span>
</div>
</a>
</article>
<!-- End Article -->
</div>
</div>
<div class="w-100 w-md-65 bg-light position-absolute top-0 right-0 bottom-0 rounded-left z-index-n1"></div>
</div>
</div>
<!-- End Popular Categories Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
</script>