Front is a financial technology company. We build products. We do it fast and we do it well.
<!-- Blog Listing Section -->
<div class="container">
<div class="w-md-75 w-lg-60 mx-md-auto">
<!-- End Blog Card -->
<article class="card mb-3 mb-sm-5">
<img class="card-img-top" src="../../assets/img/900x450/img1.jpg" alt="Image Description">
<div class="card-body">
<a class="d-block small font-weight-bold text-cap mb-2" href="#">Business</a>
<h2 class="h3"><a class="text-inherit" href="#">Should Product Owners think like entrepreneurs?</a></h2>
<p>Front is a financial technology company. We build products. We do it fast and we do it well.</p>
<div class="media align-items-center pt-5">
<div class="avatar-group">
<div class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe">
<img class="avatar-img" src="../../assets/img/100x100/img20.jpg" alt="Image Description">
</div>
</div>
<div class="media-body d-flex justify-content-end text-muted font-size-1 ml-2">
July 15
</div>
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
</div>
<!-- End Blog Listing Section -->
<!-- Services Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-lg-60 mb-5 mb-sm-11">
<span class="d-block small font-weight-bold text-cap mb-2">Front services</span>
<h2 class="text-lh-lg">Improve & boost your services with Front that provides all kinds of services and will help your audience grow through all platforms.</h2>
</div>
<!-- End Title -->
<div class="row">
<div class="col-lg-5 mb-3 mb-sm-5 mb-lg-0">
<!-- Card -->
<a class="card bg-primary text-white min-h-380rem h-100 transition-3d-hover" href="#">
<figure class="position-sm-absolute top-0 left-0 w-100">
<img class="img-fluid rounded-top" src="../../assets/svg/components/abstract-shapes-8.svg" alt="SVG">
</figure>
<article class="d-flex align-content-end flex-wrap h-100 p-4">
<h3 class="text-white">Have a meaningful impact</h3>
<p class="text-white-70">We are aggressive about giving opportunities to Fronts who have proven to be good at executing on them, regardless of where they are in their career.</p>
<span class="text-white font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</article>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg mb-3 mb-sm-0">
<!-- Card -->
<a class="card min-h-380rem h-100 transition-3d-hover" href="#">
<figure class="position-sm-absolute top-0 left-0 w-100">
<img class="img-fluid rounded-top" src="../../assets/svg/components/abstract-shapes-7.svg" alt="SVG">
</figure>
<article class="d-flex align-content-end flex-wrap h-100 p-4">
<h3>Documentation</h3>
<p class="text-body">Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
<span class="text-primary font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</article>
</a>
<!-- End Card -->
</div>
<div class="col-sm-6 col-lg">
<!-- Card -->
<a class="card min-h-380rem h-100 transition-3d-hover" href="#">
<figure class="position-sm-absolute top-0 left-0 w-100">
<img class="img-fluid rounded-top" src="../../assets/svg/components/abstract-shapes-6.svg" alt="SVG">
</figure>
<article class="d-flex align-content-end flex-wrap h-100 p-4">
<h3>Explore the Snippets tools</h3>
<p class="text-body">Quickly Front sample components, copy-paste codes.</p>
<span class="text-primary font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</article>
</a>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Services Section -->
<!-- Related Topics 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>Related works</h2>
</div>
<!-- End Title -->
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<!-- Card -->
<a class="card bg-soft-danger shadow-none min-h-380rem h-100 transition-3d-hover p-5" href="#">
<div class="mb-4">
<span class="d-block small text-danger font-weight-bold text-cap mb-2">Case study</span>
</div>
<div class="mb-5">
<img class="img-fluid" src="../../assets/img/mockups/img6.png" alt="Image Description">
</div>
<div class="mt-auto">
<h3 class="h2">iPad Pro 2018 Mockups</h3>
<span class="text-danger">View Work <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
<div class="col-md-6">
<!-- Card -->
<a class="card bg-img-hero shadow-none min-h-380rem h-100 transition-3d-hover p-5" href="#" style="background-image: url(../../assets/img/900x900/img9.jpg);">
<div class="mb-4">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Case study</span>
</div>
<div class="mt-auto">
<h3 class="h2 text-white">Expand your mind</h3>
<span class="text-white-70">View Work <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Related Topics Section -->
<!-- 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 -->
<!-- Related Products Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-lg-50 text-center mx-lg-auto mb-7">
<span class="d-block small font-weight-bold text-cap mb-2">Check out more Front products</span>
<h2>More of UI and other assets for everyone</h2>
</div>
<!-- End Title -->
<div class="row mb-5">
<div class="col-lg-5 mb-3 mb-sm-5">
<!-- Card -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="position-relative">
<img class="card-img-top" src="../../assets/svg/components/abstract-shapes-13.svg" alt="SVG">
<div class="position-absolute top-0 left-0 pt-3 pl-3">
<span class="badge badge-primary badge-pill">$59</span>
</div>
</div>
<div class="card-body pb-0">
<h4>App user illustrations</h4>
<p class="text-body">Cute characters with big hearts for your mobile and web projects.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-primary 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 mb-3 mb-sm-5">
<!-- Card -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="position-relative">
<img class="card-img-top" src="../../assets/svg/components/abstract-shapes-14.svg" alt="SVG">
<div class="position-absolute top-0 left-0 pt-3 pl-3">
<span class="badge badge-primary badge-pill">$27</span>
</div>
</div>
<div class="card-body pb-0">
<h4>Velocity UI Kit</h4>
<p class="text-body">Create unique illustrations for a website & applications.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-primary 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 mb-3 mb-sm-5">
<!-- Card -->
<a class="card h-100 transition-3d-hover" href="#">
<div class="position-relative">
<img class="card-img-top" src="../../assets/svg/components/abstract-shapes-15.svg" alt="SVG">
<div class="position-absolute top-0 left-0 pt-3 pl-3">
<span class="badge badge-primary badge-pill">$11</span>
</div>
</div>
<div class="card-body pb-0">
<h4>Hiker man illustrations</h4>
<p class="text-body">Fun and crisp characters for apps, websites or presentations.</p>
</div>
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-primary font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</div>
</a>
<!-- End Card -->
</div>
</div>
<!-- Info -->
<div class="text-center">
<div class="d-inline-block font-size-1 border bg-white text-center rounded-pill py-3 px-4">
Like what you see? <a class="font-weight-bold ml-3" href="#">View all products <span class="fas fa-angle-right ml-1"></span></a>
</div>
</div>
<!-- End Info -->
</div>
<!-- End Related Products Section -->
<!-- Blogs -->
<div class="container">
<div class="row">
<div class="order-lg-1 col-sm-6 col-lg-4 mb-3 mb-sm-7">
<!-- Blog -->
<article class="card align-items-start flex-wrap flex-row h-380rem gradient-y-overlay-sm-dark bg-img-hero rounded-pseudo transition-3d-hover" style="background-image: url(../../assets/img/400x500/img9.jpg);">
<div class="card-header border-0 bg-transparent w-100">
<a class="small text-white font-weight-bold text-cap mr-2" href="#">Creative</a>
</div>
<div class="card-footer border-0 bg-transparent mt-auto">
<a href="#">
<h3 class="text-white">This Watch gym partnerships give you perks for working out</h3>
<span class="text-white-70">Read more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</a>
</div>
</article>
<!-- End Blog -->
</div>
<div class="order-lg-2 col-sm-6 col-lg-4 mb-3 mb-sm-7">
<!-- Blog -->
<article class="card align-items-start flex-wrap flex-row h-380rem bg-navy transition-3d-hover" style="background-image: url(../../assets/svg/components/abstract-shapes-20.svg);">
<div class="card-header border-0 bg-transparent w-100">
<a class="small text-white font-weight-bold text-cap mr-2" href="#">Business</a>
</div>
<div class="card-footer border-0 bg-transparent mt-auto">
<a href="#">
<h3 class="text-white">Announcing Front Strategies: Ready-to-use rules</h3>
<span class="text-white-70">Read more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</a>
</div>
</article>
<!-- End Blog -->
</div>
<div class="order-lg-3 col-sm-6 col-lg-4 mb-3 mb-sm-7">
<!-- Blog -->
<article class="card align-items-start flex-wrap flex-row h-380rem gradient-y-overlay-sm-dark bg-img-hero rounded-pseudo transition-3d-hover" style="background-image: url(../../assets/img/400x500/img2.jpg);">
<div class="card-header border-0 bg-transparent w-100">
<a class="small text-white font-weight-bold text-cap mr-2" href="#">Creative,</a>
<a class="small text-white font-weight-bold text-cap mr-2" href="#">Stories</a>
</div>
<div class="card-footer border-0 bg-transparent mt-auto">
<a href="#">
<h3 class="text-white">Drone Company PrecisionHawk Names New CEO</h3>
<span class="text-white-70">Read more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
</a>
</div>
</article>
<!-- End Blog -->
</div>
</div>
</div>
<!-- End Blogs -->
Learn how your Google devices can do more.
A new tutorial to make it easier to master Adobe Ai.
The Apple Pencil is an expensive device that comes with some interesting features, but not everyone needs them.
<!-- Blogs Section -->
<div class="container">
<!-- Title -->
<div class="row mb-5">
<div class="col-6">
<h2 class="h3 mb-0">Latest news</h2>
</div>
<div class="col-6 text-right">
<a class="font-weight-bold" href="#">View all <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Title -->
<div class="row mb-3">
<div class="col-sm-6 col-lg-4 mb-3 mb-sm-8">
<!-- Blog Card -->
<article class="card h-100">
<div class="card-img-top position-relative">
<img class="card-img-top" src="../../assets/img/500x280/img1.jpg" alt="Image Description">
<figure class="ie-curved-y position-absolute right-0 bottom-0 left-0 mb-n1">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"/>
</svg>
</figure>
</div>
<div class="card-body">
<h3><a class="text-inherit" href="#">Better is when everything works together</a></h3>
<p>Learn how your Google devices can do more.</p>
</div>
<div class="card-footer border-0 pt-0">
<div class="media align-items-center">
<div class="avatar-group">
<a class="avatar avatar-xs avatar-circle" href="#" data-toggle="tooltip" data-placement="top" title="Nataly Gaga">
<img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</a>
<a class="avatar avatar-xs avatar-circle" href="#" data-toggle="tooltip" data-placement="top" title="Emily Milda">
<img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</a>
</div>
<div class="media-body d-flex justify-content-end text-muted font-size-1 ml-2">
July 15
</div>
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
<div class="col-sm-6 col-lg-4 mb-3 mb-sm-8">
<!-- Blog Card -->
<article class="card bg-navy text-white h-100">
<div class="card-body p-4 p-lg-5">
<span class="badge badge-primary py-2 px-3 mb-5">Featured</span>
<h3 class="h2"><a class="text-white" href="#">Announcing Front Tutorials: Master Adobe Ai - Part II</a></h3>
<p>A new tutorial to make it easier to master Adobe Ai.</p>
</div>
<div class="card-footer bg-navy border-0 pt-0 px-5 pb-5">
<div class="media align-items-center">
<div class="avatar-group">
<a class="avatar avatar-xs avatar-circle" href="#" data-toggle="tooltip" data-placement="top" title="Aaron Larsson">
<img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</a>
</div>
<div class="media-body d-flex justify-content-end text-white-70 font-size-1 ml-2">
July 15
</div>
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
<div class="col-sm-6 col-lg-4 mb-3 mb-sm-8">
<!-- Blog Card -->
<article class="card h-100">
<div class="card-img-top position-relative">
<img class="card-img-top" src="../../assets/img/500x280/img3.jpg" alt="Image Description">
<figure class="ie-curved-y position-absolute right-0 bottom-0 left-0 mb-n1">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"/>
</svg>
</figure>
</div>
<div class="card-body">
<h3><a class="text-inherit" href="#">Should You Buy An Apple Pencil?</a></h3>
<p>The Apple Pencil is an expensive device that comes with some interesting features, but not everyone needs them.</p>
</div>
<div class="card-footer border-0 pt-0">
<div class="media align-items-center">
<div class="avatar-group">
<a class="avatar avatar-xs avatar-circle" href="#" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe">
<img class="avatar-img" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</a>
<a class="avatar avatar-xs avatar-circle" href="#" data-toggle="tooltip" data-placement="top" title="John O'nolan">
<img class="avatar-img" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</a>
</div>
<div class="media-body d-flex justify-content-end text-muted font-size-1 ml-2">
July 15
</div>
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
</div>
</div>
<!-- End Blogs Section -->
<!-- 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 -->
<!-- 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 -->