Informative Blocks - Sections
Sections style of informative blocks/components.
Sections #1
It is fast and easy. Create your first and ongoing website with Front.
We are launching soon. Join the priority list for information and early access.
<!-- Title -->
<div class="w-md-60 w-lg-50 text-center mx-auto mb-7">
<h4 class="h5">
It is fast and easy. <span class="font-weight-normal">Create your first and ongoing website with Front.</span>
</h4>
</div>
<!-- End Title -->
<!-- Mockup Browser -->
<div class="u-browser-v1 mx-auto mb-4">
<!-- SVG Background Shape -->
<figure id="SVGbgShapeID1" class="svg-preloader ie-soft-triangle-shape">
<img class="js-svg-injector" src="../../assets/svg/components/soft-triangle-shape.svg" alt="Image Description"
data-parent="#SVGbgShapeID1">
</figure>
<!-- End SVG Background Shape -->
<!-- Mockup Browser -->
<figure id="SVGBrowserShape" class="svg-preloader ie-browser u-browser-v1__svg">
<img class="js-svg-injector" src="../../assets/svg/illustrations/browser.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGBrowserShapeImg1", "newPath": "../../assets/img/855x665/img1.jpg"}
]'
data-parent="#SVGBrowserShape">
</figure>
<!-- End Mockup Browser -->
</div>
<!-- End Mockup Browser -->
<div class="w-50 w-md-40 w-lg-30 text-center mx-auto">
<p class="small">We are launching soon. Join the priority list for information and early access.</p>
</div>
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #2
Smart evaluation model
Sophisticated model providing analysis for the entire blockchain asset ecosystem. Strategic insights based on research, trends,and 50+ unique indicators to properly evaluate investment potential and risk.
Safe. Stable. Secure.
Advanced distributed system architecture built to protect against DDoS and other potential threats. More than 98% of digital assets stored in multi-signature,cold wallets. Security protocols are fully aligned and compliant with industry best practices.
Now, zero fees for everyone
Empowering millions of users, across 130+ countries. Over $1 Billion in assets. 24/7/365 customer access and support. A trusted world-class operation designed specifically for knowledgeable crypto-investors.
<!-- Mockup Block -->
<div class="container space-bottom-2 space-bottom-md-3">
<div class="row align-items-lg-center">
<div class="col-lg-5 mb-7 mb-lg-0">
<!-- Title -->
<div class="pr-lg-4">
<span class="btn btn-icon btn-soft-primary rounded-circle mb-3">
<span class="small font-weight-semi-bold btn-icon__inner">01.</span>
</span>
<h2 class="h4 font-weight-semi-bold text-primary">Smart evaluation model</h2>
<p class="mb-0">Sophisticated model providing analysis for the entire blockchain asset ecosystem. Strategic insights based on research, trends,and 50+ unique indicators to properly evaluate investment potential and risk.</p>
</div>
<!-- End Title -->
</div>
<div id="SVGmarketingStrategy" class="col-lg-7 svg-preloader">
<!-- SVG Icon -->
<figure class="ie-marketing-strategy">
<img class="js-svg-injector" src="../../assets/svg/illustrations/marketing-strategy.svg" alt="Image Description"
data-parent="#SVGmarketingStrategy">
</figure>
<!-- End SVG Icon -->
</div>
</div>
</div>
<!-- End Mockup Block -->
<!-- Mockup Block -->
<div class="container space-1">
<div class="row align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
<!-- Title -->
<div class="pl-lg-4">
<span class="btn btn-icon btn-soft-primary rounded-circle mb-3">
<span class="small font-weight-semi-bold btn-icon__inner">02.</span>
</span>
<h2 class="h4 font-weight-semi-bold text-primary">Safe. Stable. Secure.</h2>
<p class="mb-0">Advanced distributed system architecture built to protect against DDoS and other potential threats. More than 98% of digital assets stored in multi-signature,cold wallets. Security protocols are fully aligned and compliant with industry best practices.</p>
</div>
<!-- End Title -->
</div>
<div id="SVGappDevelopment" class="col-lg-7 order-lg-1 svg-preloader">
<!-- SVG Icon -->
<figure class="ie-app-development">
<img class="js-svg-injector" src="../../assets/svg/illustrations/app-development.svg" alt="SVG Illustration"
data-parent="#SVGappDevelopment">
</figure>
<!-- End SVG Icon -->
</div>
</div>
</div>
<!-- End Mockup Block -->
<!-- Mockup Block -->
<div class="container space-top-2 space-top-md-3">
<div class="row align-items-lg-center">
<div class="col-lg-5 mb-7 mb-lg-0">
<!-- Title -->
<div class="pr-lg-4">
<span class="btn btn-icon btn-soft-primary rounded-circle mb-3">
<span class="small font-weight-semi-bold btn-icon__inner">03.</span>
</span>
<h2 class="h4 font-weight-semi-bold text-primary">Now, zero fees for everyone</h2>
<p class="mb-0">Empowering millions of users, across 130+ countries. Over $1 Billion in assets. 24/7/365 customer access and support. A trusted world-class operation designed specifically for knowledgeable crypto-investors.</p>
</div>
<!-- End Title -->
</div>
<div id="SVGbusinessAnalysis" class="col-lg-7 svg-preloader">
<!-- SVG Icon -->
<figure class="ie-business-analysis">
<img class="js-svg-injector" src="../../assets/svg/illustrations/business-analysis.svg" alt="SVG Illustration"
data-parent="#SVGbusinessAnalysis">
</figure>
<!-- End SVG Icon -->
</div>
</div>
</div>
<!-- End Mockup Block -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #3
Easy & fast designing
You can work with your existing website or create new pages on Front.
Powerful features
Easily draft, change, customize and launch new course pages with an easy-to-use template.
Advanced HTML/CSS editing
With Front, you or your team can modify any aspect of your website or pages with HTML/CSS.
Fully optimized for Web & Mobile
Your website is fully responsive so visitors can view your content from their choice of device.
<!-- Mockup Block Section -->
<div class="container space-bottom-3">
<div class="row justify-content-lg-between align-items-center">
<div class="col-md-6 col-lg-5 mb-7 mb-md-0">
<div class="pr-md-4">
<!-- Info -->
<div class="media mb-7">
<span class="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-3">
<span class="btn-icon__inner">A.</span>
</span>
<div class="media-body">
<h3 class="h5 text-primary">Easy & fast designing</h3>
<p>You can work with your existing website or create new pages on Front.</p>
</div>
</div>
<!-- End Info -->
<!-- Info -->
<div class="media mb-7">
<span class="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-3">
<span class="btn-icon__inner">B.</span>
</span>
<div class="media-body">
<h3 class="h5 text-primary">Powerful features</h3>
<p>Easily draft, change, customize and launch new course pages with an easy-to-use template.</p>
</div>
</div>
<!-- End Info -->
<a class="btn btn-primary btn-wide btn-pill transition-3d-hover" href="index.html">Get Started <span class="fas fa-angle-right ml-2"></span></a>
</div>
</div>
<div id="SVGellipseMockup" class="col-md-6 svg-preloader">
<!-- SVG Mockup -->
<figure class="ie-ellipse-mockup">
<img class="js-svg-injector" src="../../assets/svg/illustrations/ellipse-mockup.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGellipseMockupImg1", "newPath": "../../assets/img/615x750/img1.jpg"}
]'
data-parent="#SVGellipseMockup">
</figure>
<!-- End SVG Mockup -->
</div>
</div>
</div>
<!-- End Mockup Block Section -->
<!-- Mockup Block Section -->
<div class="container">
<div class="row justify-content-lg-between align-items-center">
<div class="col-md-6 col-lg-5 order-md-2 mb-7 mb-md-0">
<div class="pl-md-4">
<!-- Info -->
<div class="media mb-7">
<span class="btn btn-sm btn-icon btn-soft-success rounded-circle mr-3">
<span class="btn-icon__inner">C.</span>
</span>
<div class="media-body">
<h3 class="h5 text-success">Advanced HTML/CSS editing</h3>
<p>With Front, you or your team can modify any aspect of your website or pages with HTML/CSS.</p>
</div>
</div>
<!-- End Info -->
<!-- Info -->
<div class="media mb-7">
<span class="btn btn-sm btn-icon btn-soft-success rounded-circle mr-3">
<span class="btn-icon__inner">D.</span>
</span>
<div class="media-body">
<h3 class="h5 text-success">Fully optimized for Web & Mobile</h3>
<p>Your website is fully responsive so visitors can view your content from their choice of device.</p>
</div>
</div>
<!-- End Info -->
<a class="btn btn-success btn-wide btn-pill transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Purchase Now <span class="fas fa-angle-right ml-2"></span></a>
</div>
</div>
<div id="SVGellipseMockupReverse" class="col-md-6 order-md-1 svg-preloader">
<!-- SVG Mockup -->
<figure class="ie-ellipse-mockup">
<img class="js-svg-injector" src="../../assets/svg/illustrations/ellipse-mockup-reverse.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGellipseMockupReverseImg1", "newPath": "../../assets/img/615x750/img2.jpg"}
]'
data-parent="#SVGellipseMockupReverse">
</figure>
<!-- End SVG Mockup -->
</div>
</div>
</div>
<!-- End Mockup Block Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #4
Grab your
Ready-to-use solutions
Easy and fast adjustments of elements are possible with Front template. Find out more about our all-in-one programmatic template.
<!-- Mockup Blocks Section -->
<div class="position-relative space-2 space-md-3">
<div class="container">
<div class="row justify-content-lg-end mb-7 mb-lg-0">
<div class="col-lg-5 mb-7 mb-lg-0">
<!-- Info -->
<div class="mb-7">
<span class="fab fa-gripfire text-primary display-4 mb-3"></span>
<h2 class="h4">Grab your<br>Ready-to-use solutions</h2>
<p>Easy and fast adjustments of elements are possible with Front template. Find out more about our all-in-one programmatic template.</p>
</div>
<a class="btn btn-soft-primary btn-wide transition-3d-hover" href="#">Learn More</a>
<!-- End Info -->
</div>
</div>
</div>
<!-- SVG Image Gradient -->
<div id="SVGcolorGradient" class="col-lg-6 svg-preloader content-centered-y--lg">
<figure class="ie-color-gradient">
<img class="js-svg-injector" src="../../assets/svg/components/color-gradient.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGcolorGradientImg1", "newPath": "../../assets/img/855x665/img2.jpg"}
]'
data-parent="#SVGcolorGradient">
</figure>
<!-- End SVG Image Gradient -->
<!-- SVG Phone Mockup -->
<figure class="u-devices-v3 ie-devices-v3-iphone">
<img class="js-svg-injector" src="../../assets/svg/components/iphone.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGiphoneImg1", "newPath": "../../assets/img/282x500/img5.jpg"}
]'
data-parent="#SVGcolorGradient">
</figure>
<!-- End SVG Phone Mockup -->
</div>
</div>
<!-- End Mockup Blocks Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #5
Join Front
Buy Now
Get Started
Let's get you started
Start knowing what your attendees value, and win more business with Front template.
<!-- Features Section -->
<div id="SVGelements" class="svg-preloader">
<!-- SVG Background -->
<figure class="position-absolute right-0 bottom-0 left-0">
<img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom-sm.svg" alt="Image Description"
data-parent="#SVGelements">
</figure>
<!-- End SVG Background -->
<div class="gradient-half-primary-v3">
<div class="container space-top-2 space-top-md-3 space-bottom-1">
<div class="row justify-content-lg-between align-items-lg-start">
<div class="col-lg-5 mb-7 mb-lg-0">
<!-- Title -->
<div class="pr-md-4 mb-4">
<span class="btn btn-xs btn-soft-success btn-pill mb-2">Join Front</span>
<h2 class="text-primary">Let's get you <span class="font-weight-semi-bold">started</span></h2>
<p>Start knowing what your attendees value, and win more business with Front template.</p>
</div>
<!-- End Title -->
<a class="btn btn-primary btn-wide btn-pill transition-3d-hover mr-1 mb-2" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Buy Now</a>
<a class="btn btn-soft-primary btn-wide btn-pill transition-3d-hover ml-1 mb-2" href="../pages/login-simple.html">Get Started</a>
</div>
<div class="col-lg-6 mt-auto">
<!-- SVG Icon -->
<figure class="ie-working-men">
<img class="js-svg-injector" src="../../assets/svg/illustrations/app-development.svg" alt="SVG Illustration"
data-parent="#SVGelements">
</figure>
<!-- End SVG Icon -->
</div>
</div>
</div>
</div>
</div>
<!-- End Features Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #6
Professional design
Easy and fast adjustments of elements are possible with Front template. Find our more about our all-in-one programmatic template.
Front process
Once you are invited to Front Agency, you company will be set within days. We help to take of all the paperwork.
<!-- Front for -->
<div class="container space-bottom-2">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
<!-- Info -->
<div class="pl-lg-7">
<div class="mb-4">
<h3 class="h5">Professional design</h3>
<p>Easy and fast adjustments of elements are possible with Front template. Find our more about our all-in-one programmatic template.</p>
</div>
<!-- Link -->
<a class="card border-0 shadow-sm" href="#">
<div class="card-body p-4">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/icons/img2.png" alt="Image Description">
</div>
<span class="media-body">
<span class="d-flex justify-content-between align-items-center font-weight-semi-bold">
Get Started with Front <span class="fas fa-angle-right"></span>
</span>
</span>
</div>
</div>
</a>
<!-- End Link -->
</div>
<!-- End Info -->
</div>
<div id="SVGdrawingWoman" class="col-lg-6 order-lg-1 svg-preloader">
<!-- SVG Icon -->
<figure class="ie-drawing-woman">
<img class="js-svg-injector" src="../../assets/svg/illustrations/drawing-woman.svg" alt="Image Description"
data-parent="#SVGdrawingWoman">
</figure>
<!-- End SVG Icon -->
</div>
</div>
</div>
<!-- End Front for -->
<!-- About Section -->
<div class="container space-top-2">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 mb-7 mb-lg-0">
<!-- Info -->
<div class="pr-lg-7">
<div class="mb-4">
<h3 class="h5">Front process</h3>
<p>Once you are invited to Front Agency, you company will be set within days. We help to take of all the paperwork.</p>
</div>
<!-- Link -->
<a class="card border-0 shadow-sm" href="#">
<div class="card-body p-4">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/icons/img1.png" alt="Image Description">
</div>
<span class="media-body">
<span class="d-flex justify-content-between align-items-center font-weight-semi-bold">
Get Started with Front <span class="fas fa-angle-right"></span>
</span>
</span>
</div>
</div>
</a>
<!-- End Link -->
</div>
<!-- End Info -->
</div>
<div id="SVGserverWoman" class="col-lg-7 svg-preloader">
<!-- SVG Icon -->
<figure class="ie-server-woman">
<img class="js-svg-injector" src="../../assets/svg/illustrations/server-woman.svg" alt="Image Description"
data-parent="#SVGserverWoman">
</figure>
<!-- End SVG Icon -->
</div>
</div>
</div>
<!-- End About Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #7
We create the best solution for you.
Front is an easy-to-use template that is loaded with all the features you will ever need.
<!-- Hero Section -->
<div id="SVGheroSectionBg" class="svg-preloader position-relative gradient-half-primary-v3">
<div class="container space-2">
<div class="row align-items-lg-center">
<div class="col-lg-5 mb-7 mb-lg-0">
<!-- Info -->
<h1 class="mb-4">We create the best <span class="text-primary font-weight-semi-bold">solution</span> for you.</h1>
<p>Front is an easy-to-use template that is loaded with all the features you will ever need.</p>
<!-- End Info -->
</div>
<div class="col-lg-7">
<!-- SVG Icon -->
<figure class="ie-working-men">
<img class="js-svg-injector" src="../../assets/svg/illustrations/working-men.svg" alt="Image Description"
data-parent="#SVGheroSectionBg">
</figure>
<!-- End SVG Icon -->
</div>
</div>
</div>
<!-- SVG Background -->
<figure class="position-absolute right-0 bottom-0 left-0">
<img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom-sm.svg" alt="Image Description"
data-parent="#SVGheroSectionBg">
</figure>
<!-- End SVG Background Section -->
</div>
<!-- End Hero Section -->
Sections #8
Simple and affordable.
Pay as you go.
From boarding passes to movie tickets, there's pretty much nothing you can't store with Front Pay. Plus, you can take your money further with exclusive offers, discounts, and even reminders to use your loyalty card when you enter the store.
Create an account
Link your bank account
Your account is validated
<!-- How To Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-lg-50 text-center mx-lg-auto mb-5">
<h2 class="font-weight-medium mb-4">Simple and affordable.<br>Pay as you go.</h2>
<p>From boarding passes to movie tickets, there's pretty much nothing you can't store with Front Pay. Plus, you can take your money further with exclusive offers, discounts, and even reminders to use your loyalty card when you enter the store.</p>
</div>
<!-- End Title -->
<!-- Fancybox -->
<div class="text-center mx-auto mb-11">
<a class="js-fancybox" href="javascript:;"
data-src="//youtube.com/j8uxIKcxArA"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="fas fa-play-circle align-middle text-primary font-size-3 mr-2"></span>
See how your info is protected
</a>
</div>
<!-- End Fancybox -->
<!-- Icon Blocks Section -->
<div class="row justify-content-md-center mb-11">
<div class="col-md-4 col-lg-3 mb-9 mb-lg-0">
<!-- Icon Block -->
<div class="u-indicator-dots text-center px-lg-4">
<figure id="icon48" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-48.svg" alt="SVG"
data-parent="#icon48">
</figure>
<h4 class="h6">Create an account</h4>
</div>
<!-- End Icon Block -->
</div>
<div class="col-md-4 col-lg-3 mb-9 mb-lg-0">
<!-- Icon Block -->
<div class="u-indicator-dots text-center px-lg-4">
<figure id="icon39" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-39.svg" alt="SVG"
data-parent="#icon39">
</figure>
<h4 class="h6">Link your bank account</h4>
</div>
<!-- End Icon Block -->
</div>
<div class="col-md-4 col-lg-3">
<!-- Icon Block -->
<div class="text-center px-lg-4">
<figure id="icon20" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-20.svg" alt="SVG"
data-parent="#icon20">
</figure>
<h4 class="h6">Your account is validated</h4>
</div>
<!-- End Icon Block -->
</div>
</div>
<!-- End Icon Blocks Section -->
<div class="max-width-50 mx-auto">
<img class="img-fluid" src="../../assets/svg/illustrations/visa-card.svg" alt="Image Description">
</div>
</div>
<!-- End How To Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>
Sections #9
Lightning-fast development with pre-built solutions
Every team has a unique process for shipping software. Use an out-of-the-box workflow, or create one to match the way your team works.
-
Extensive API documentation
-
Customizable & open source
-
Continiously improved
Choose a workflow, or make your own with Front Software
<!-- Features Section -->
<div class="container space-2 space-lg-3">
<div class="row align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-7 mb-lg-0">
<div class="mb-5">
<h2 class="font-weight-medium">Lightning-fast development with pre-built solutions</h2>
<p>Every team has a unique process for shipping software. Use an out-of-the-box workflow, or create one to match the way your team works.</p>
</div>
<!-- Info -->
<ul class="list-unstyled">
<li class="media align-items-center pb-3">
<span class="btn btn-icon btn-sm btn-soft-indigo rounded-circle mr-3">
<span class="fas fa-check btn-icon__inner"></span>
</span>
<div class="media-body">
<p class="text-dark mb-0">Extensive API documentation</p>
</div>
</li>
<li class="media align-items-center py-3">
<span class="btn btn-icon btn-sm btn-soft-indigo rounded-circle mr-3">
<span class="fas fa-check btn-icon__inner"></span>
</span>
<div class="media-body">
<p class="text-dark mb-0">Customizable & open source</p>
</div>
</li>
<li class="media align-items-center pt-3">
<span class="btn btn-icon btn-sm btn-soft-indigo rounded-circle mr-3">
<span class="fas fa-check btn-icon__inner"></span>
</span>
<div class="media-body">
<p class="text-dark mb-0">Continiously improved</p>
</div>
</li>
</ul>
<!-- End Info -->
</div>
<div class="col-lg-7 order-lg-1">
<!-- Card Block -->
<div id="featuresSVG1" class="svg-preloader pr-lg-4">
<div class="card border-0 bg-soft-primary text-indigo text-center w-lg-75 overflow-hidden pt-9 px-5 mx-lg-auto">
<div class="px-5 mb-5">
<h3 class="h6">Choose a workflow, or make your own with Front Software</h3>
</div>
<!-- SVG Phone Mockup -->
<div class="w-85 u-devices-v2__phone-svg shadow-sm mx-auto">
<figure class="ie-half-iphone-x-1-iphone">
<img class="js-svg-injector" src="../../assets/svg/components/half-iphone-x-1.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGhalfIphoneX1Img1", "newPath": "../../assets/img/407x472/img1.jpg"}
]'
data-parent="#featuresSVG1">
</figure>
</div>
<!-- End SVG Phone Mockup -->
</div>
</div>
<!-- End Card Block -->
</div>
</div>
</div>
<!-- End Features Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #10
Front Terms & conditions
Hello, and welcome to Front. Please read our Terms and Conditions of Use ("Terms") and Privacy Policy carefully because they affect your legal rights, including an agreement to resolve any disputes that may arise between us by arbitration on an individual basis instead of by class actions or jury trials. We hope you're sitting comfortably and listening to some great music.
Here we go…
<!-- Terms Title Section -->
<div class="position-relative">
<div class="container space-2">
<div class="w-md-80 w-lg-60">
<h1 class="text-primary"><span class="font-weight-semi-bold">Front</span> Terms & conditions</h1>
<p>Hello, and welcome to Front. Please read our Terms and Conditions of Use ("Terms") and Privacy Policy carefully because they affect your legal rights, including an agreement to resolve any disputes that may arise between us by arbitration on an individual basis instead of by class actions or jury trials. We hope you're sitting comfortably and listening to some great music.</p>
<p>Here we go…</p>
</div>
</div>
<!-- SVG Background Shapes -->
<div id="SVGbgElements2" class="svg-preloader d-none d-lg-block w-lg-40 content-centered-y right-0 z-index-n1 ml-9">
<figure class="ie-bg-elements-2">
<img class="js-svg-injector" src="../../assets/svg/components/bg-elements-2.svg" alt="Image Description"
data-parent="#SVGbgElements2">
</figure>
</div>
<!-- End SVG Background Shapes -->
</div>
<!-- End Terms Title Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #11
Millions of Jobs.
Find the one that suits you.
Search all the open positions on the web. Get your own personalized salary estimate. Read reviews on over 600,000 companies worldwide.
-
Verified, up-to-date Cards
-
Seamless job search
-
Job seekers and employers connect
<!-- Features Section -->
<div class="container space-2">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-9 mb-lg-0">
<!-- Description -->
<h2 class="font-weight-medium">Millions of Jobs.<br>Find the one that suits you.</h2>
<p>Search all the open positions on the web. Get your own personalized salary estimate. Read reviews on over 600,000 companies worldwide.</p>
<!-- End Description -->
<!-- List -->
<ul class="list-unstyled text-secondary">
<li class="media my-3">
<div class="d-flex mt-1 mr-2">
<span class="fas fa-check text-success"></span>
</div>
<div class="media-body">
Verified, up-to-date Cards
</div>
</li>
<li class="media my-3">
<div class="d-flex mt-1 mr-2">
<span class="fas fa-check text-success"></span>
</div>
<div class="media-body">
Seamless job search
</div>
</li>
<li class="media my-3">
<div class="d-flex mt-1 mr-2">
<span class="fas fa-check text-success"></span>
</div>
<div class="media-body">
Job seekers and employers connect
</div>
</li>
</ul>
<!-- End List -->
</div>
<div class="col-lg-7 order-lg-1">
<!-- SVG Shape -->
<figure id="SVGgetAnswered" class="svg-preloader ie-get-answered">
<img class="js-svg-injector" src="../../assets/svg/illustrations/get-answered.svg" alt="Image Description"
data-parent="#SVGgetAnswered">
</figure>
<!-- End SVG Shape -->
</div>
</div>
</div>
<!-- End Features Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #12
Global housing service through App
A platform connecting you to the best housing service providers and facilitating effortless new build and resale homes.
<!-- Features Section -->
<div class="position-relative space-2">
<!-- SVG Mockups -->
<div id="SVGlaptopAndIphone" class="col-lg-6 svg-preloader position-lg-absolute top-lg-0 left-lg-0 content-centered-y--lg mb-9 mb-lg-0">
<figure class="ie-laptop-and-iphone">
<img class="js-svg-injector" src="../../assets/svg/components/laptop-and-iphone.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGlaptopAndIphoneImg1", "newPath": "../../assets/img/1618x1010/img2.jpg"},
{"targetId": "#SVGlaptopAndIphoneImg2", "newPath": "../../assets/img/282x500/img8.jpg"}
]'
data-parent="#SVGlaptopAndIphone">
</figure>
</div>
<!-- End SVG Mockups -->
<div class="container">
<div class="row justify-content-lg-end">
<div class="col-lg-5">
<!-- Title -->
<div class="pl-lg-4">
<div class="mb-5">
<h2 class="font-weight-medium">Global housing service through App</h2>
<p>A platform connecting you to the best housing service providers and facilitating effortless new build and resale homes.</p>
</div>
<!-- Button -->
<button type="button" class="btn btn-xs btn-primary btn-wide transition-3d-hover text-left mb-2 mr-sm-1">
<span class="media align-items-center">
<span class="fab fa-apple font-size-2 mr-3"></span>
<span class="media-body">
<span class="d-block">Download on the</span>
<strong class="font-size-1">App Store</strong>
</span>
</span>
</button>
<!-- End Button -->
<!-- Button -->
<button type="button" class="btn btn-xs btn-dark btn-wide transition-3d-hover text-left mb-2">
<span class="media align-items-center">
<span class="fab fa-google-play font-size-2 mr-3"></span>
<span class="media-body">
<span class="d-block">Get it on</span>
<strong class="font-size-1">Google Play</strong>
</span>
</span>
</button>
<!-- End Button -->
</div>
<!-- End Title -->
</div>
</div>
</div>
</div>
<!-- End Features Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #13
-
1.
Describe your home online and get appraisal in 3 minutes
-
2.
We match you with the best agent to refine the appraisal and discuss your project
-
3.
If you decide you are ready to sell, we'll make you an offer
<!-- How It Works Section -->
<div class="container">
<div class="row align-items-lg-center">
<div class="col-lg-6 order-lg-2 mb-7 mb-lg-0">
<ul class="list-unstyled">
<!-- Info Block -->
<li class="u-indicator-steps py-3">
<div class="media align-items-center border rounded p-5">
<div class="d-flex u-indicator-steps__inner mr-3">
<span class="display-4 text-primary font-weight-medium">1.</span>
</div>
<div class="media-body">
<p class="mb-0">Describe your home online and get appraisal in 3 minutes</p>
</div>
</div>
</li>
<!-- End Info Block -->
<!-- Info Block -->
<li class="u-indicator-steps py-3">
<div class="media align-items-center border rounded p-5">
<div class="d-flex u-indicator-steps__inner mr-3">
<span class="display-4 text-primary font-weight-medium">2.</span>
</div>
<div class="media-body">
<p class="mb-0">We match you with the best agent to refine the appraisal and discuss your project</p>
</div>
</div>
</li>
<!-- End Info Block -->
<!-- Info Block -->
<li class="u-indicator-steps py-3">
<div class="media align-items-center border rounded p-5">
<div class="d-flex u-indicator-steps__inner mr-3">
<span class="display-4 text-primary font-weight-medium">3.</span>
</div>
<div class="media-body">
<p class="mb-0">If you decide you are ready to sell, we'll make you an offer</p>
</div>
</div>
</li>
<!-- End Info Block -->
</ul>
</div>
<div id="SVGhouseAgency" class="col-lg-6 order-lg-1 svg-preloader">
<div class="pr-lg-7">
<!-- SVG Icon -->
<figure class="ie-house-agency">
<img class="js-svg-injector" src="../../assets/svg/illustrations/house-agency.svg" alt="Image Description"
data-parent="#SVGhouseAgency">
</figure>
<!-- End SVG Icon -->
</div>
</div>
</div>
</div>
<!-- End How It Works Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #14
All-in-one
Front is a place where conversations happen, decisions are made, and information is always at your fingertips.
Style your workflow how you want to fit your brand
Front is a collaboration hub for work, no matter what work you do. It's a place where conversations happen, decisions are made, and information is always at your fingertips. With Front, your team is better connected.
<!-- Features Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-4 mb-7 mb-lg-0">
<div class="mb-4">
<h2 class="h1 font-weight-medium">All-in-one</h2>
<span class="btn btn-icon btn-sm btn-white shadow-soft rounded-circle p-2 mr-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/slack-logo-original.svg" alt="Logo">
</span>
<span class="btn btn-icon btn-sm btn-white shadow-soft rounded-circle p-2 mr-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/jira-logo-original.svg" alt="Logo">
</span>
<span class="btn btn-icon btn-sm btn-white shadow-soft rounded-circle p-2 mr-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/gitlab-logo-original.svg" alt="Logo">
</span>
</div>
<p>Front is a place where conversations happen, decisions are made, and information is always at your fingertips.</p>
</div>
</div>
<div class="mt-lg-n11 mb-7 mb-lg-0">
<!-- SVG Illustration -->
<figure id="SVGFeatures" class="svg-preloader ie-devices-1">
<img class="js-svg-injector" src="../../assets/svg/components/devices-1.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGDevices1LaptopImg", "newPath": "../../assets/img/1618x1010/img3.jpg"}
]'
data-parent="#SVGFeatures">
</figure>
<!-- End SVG Illustration -->
</div>
<div class="row justify-content-lg-end">
<div class="col-lg-7 mt-lg-n11">
<h2 class="h1 font-weight-medium mb-4">Style your workflow how you want to fit your brand</h2>
<p>Front is a collaboration hub for work, no matter what work you do. It's a place where conversations happen, decisions are made, and information is always at your fingertips. With Front, your team is better connected.</p>
</div>
</div>
</div>
<!-- End Features Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #15
Web development
We provide both back-end and front-end development.
Mobile development
Reach customers via Android, iOS, or cross-platform solutions.
Product design
Great product deserves an equally stunning visual representation.
Blockchain Trending
Top-notch Blockchain developers, designers, and product owners.
<!-- Services -->
<div class="container">
<div id="servicesSVG" class="svg-preloader row justify-content-lg-between align-items-md-center">
<div class="col-md-6 col-lg-5 mb-11 mb-lg-0">
<!-- SVG Icon -->
<figure class="ie-drawing-woman">
<img class="js-svg-injector" src="../../assets/svg/illustrations/drawing-man.svg" alt="Image Description"
data-parent="#servicesSVG">
</figure>
<!-- End SVG Icon -->
</div>
<div class="col-md-6 col-lg-5">
<!-- Icon Block -->
<div class="media mb-4">
<figure class="ie-height-72 w-100 max-width-10 p-2 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-44.svg" alt="SVG"
data-parent="#servicesSVG">
</figure>
<div class="media-body">
<h3 class="h6">Web development</h3>
<p class="font-size-1">We provide both back-end and front-end development.</p>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-4">
<figure class="ie-height-72 w-100 max-width-10 p-2 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
data-parent="#servicesSVG">
</figure>
<div class="media-body">
<h4 class="h6">Mobile development</h4>
<p class="font-size-1">Reach customers via Android, iOS, or cross-platform solutions.</p>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media mb-4">
<figure class="ie-height-72 w-100 max-width-10 p-2 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-45.svg" alt="SVG"
data-parent="#servicesSVG">
</figure>
<div class="media-body">
<h4 class="h6">Product design</h4>
<p class="font-size-1">Great product deserves an equally stunning visual representation.</p>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="media">
<figure class="ie-height-72 w-100 max-width-10 p-2 mr-3">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-54.svg" alt="SVG"
data-parent="#servicesSVG">
</figure>
<div class="media-body">
<h4 class="h6">Blockchain <span class="badge badge-warning badge-pill ml-1">Trending</span></h4>
<p class="font-size-1">Top-notch Blockchain developers, designers, and product owners.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
<!-- End Services -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #16
We're just tuning up a few things.
We apologize for the inconvenience but Front is currently undergoing planned maintenance.
<!-- Hero Section -->
<div class="d-lg-flex">
<div class="container d-lg-flex align-items-lg-center min-height-lg-100vh space-top-4 space-bottom-2 space-lg-0">
<div class="w-100 mx-auto">
<!-- SVG Icon -->
<figure id="SVGmaintenanceMode" class="svg-preloader mb-5 ie-maintenance-mode">
<img class="js-svg-injector" src="../../assets/svg/illustrations/maintenance-mode.svg" alt="Image Description"
data-parent="#SVGmaintenanceMode">
</figure>
<!-- End SVG Icon -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto">
<!-- Title -->
<div class="mb-5">
<h1 class="h2 font-weight-normal">We're just tuning up a few things.</h1>
<p>We apologize for the inconvenience but Front is currently undergoing planned maintenance.</p>
</div>
<!-- End Title -->
<a class="btn btn-primary transition-3d-hover" href="#">Check for Updates</a>
</div>
</div>
</div>
</div>
<!-- End Hero Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #17
<!-- Hero Section -->
<div class="d-lg-flex bg-img-hero" style="background-image: url(../../assets/svg/illustrations/error-404.svg);">
<div class="container d-lg-flex align-items-lg-center min-height-lg-100vh space-4">
<div class="w-lg-60 w-xl-50">
<!-- Title -->
<div class="mb-5">
<h1 class="text-primary font-weight-normal">Page not <span class="font-weight-semi-bold">found</span></h1>
<p class="mb-0">Oops! Looks like you followed a bad link.</p>
<p>If you think this is a problem with us, please <a href="#">tell us</a>.</p>
</div>
<!-- End Title -->
<a class="btn btn-primary btn-wide transition-3d-hover" href="../home/index.html">Go Back</a>
</div>
</div>
</div>
<!-- End Hero Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Sections #18
Learn about Bitcoin
Bitcoin is changing the way people think about money. Educate yourself about this ground-breaking payment system.
Download a Wallet
Bitcoin is received, stored, and sent using software known as a 'Bitcoin Wallet'. Download the official Bitcoin.com Wallet for free.
Use Bitcoin
Bitcoin makes it easy to send real money quickly to anywhere in the world! Bitcoin can also be used to make purchases from a variety of online retailers.
<!-- Hero Carousel -->
<div class="js-slick-carousel space-1"
data-fade="true"
data-pagi-classes="text-center u-slick__pagination mt-7 mb-0">
<div class="js-slide px-4">
<div id="SVGvault" class="svg-preloader">
<!-- Title -->
<div class="text-center mb-7">
<span class="btn btn-icon btn-soft-primary rounded-circle mb-4">
<span class="small font-weight-semi-bold btn-icon__inner">01.</span>
</span>
<h2 class="h4 text-primary">Learn about Bitcoin</h2>
<p>Bitcoin is changing the way people think about money. Educate yourself about this ground-breaking payment system.</p>
</div>
<!-- End Title -->
<!-- SVG Icon -->
<figure class="ie-vault">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/vault.svg" alt="Image Description"
data-parent="#SVGvault">
</figure>
<!-- End SVG Icon -->
</div>
</div>
<div class="js-slide px-4">
<div id="SVGresponsive" class="svg-preloader">
<!-- Title -->
<div class="text-center mb-7">
<span class="btn btn-icon btn-soft-primary rounded-circle mb-4">
<span class="small font-weight-semi-bold btn-icon__inner">02.</span>
</span>
<h2 class="h4 text-primary">Download a Wallet</h2>
<p>Bitcoin is received, stored, and sent using software known as a 'Bitcoin Wallet'. Download the official Bitcoin.com Wallet for free.</p>
</div>
<!-- End Title -->
<!-- SVG Icon -->
<figure class="ie-responsive">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/responsive.svg" alt="Image Description"
data-parent="#SVGresponsive">
</figure>
<!-- End SVG Icon -->
</div>
</div>
<div class="js-slide px-4">
<div id="SVGeasyPayment" class="svg-preloader">
<!-- Title -->
<div class="text-center mb-7">
<span class="btn btn-icon btn-soft-primary rounded-circle mb-4">
<span class="small font-weight-semi-bold btn-icon__inner">03.</span>
</span>
<h2 class="h4 text-primary">Use Bitcoin</h2>
<p>Bitcoin makes it easy to send real money quickly to anywhere in the world! Bitcoin can also be used to make purchases from a variety of online retailers.</p>
</div>
<!-- End Title -->
<!-- SVG Icon -->
<figure class="ie-easy-payment">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/easy-payment.svg" alt="Image Description"
data-parent="#SVGeasyPayment">
</figure>
<!-- End SVG Icon -->
</div>
</div>
</div>
<!-- End Hero Carousel -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.slick.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Sections #19
Get paid and use the cash. All with Front Pay.
When you receive money it's added to your Front Pay Cash card that lives in the Wallet app.
-
When you pay with a debit or credit card, Front Pay doesn't keep transaction information that can be tied back to you.
-
When you use Front Pay Cash, information is stored only for troubleshooting.
-
You can also add your student ID card to Front Wallet to access places like your dorm and the library.
<!-- Features Section -->
<div class="container space-2 space-top-lg-3">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 mb-9 mb-lg-0">
<div class="mb-5">
<h2 class="font-weight-medium mb-4">Payment made easy in stores with speed and security using.</h2>
<p>When paying in stores, Front Pay doesn't share your actual card number, so your information stays secure. Plus, you can check out faster and easier.</p>
</div>
<div class="w-md-50 w-lg-80 mb-2">
<!-- Fancybox -->
<div class="bg-img-hero text-center rounded-lg py-11 px-5" style="background-image: url(../../assets/img/480x320/img30.jpg);">
<a class="js-fancybox d-inline-block u-media-player" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="u-media-player__icon">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
</div>
<!-- End Fancybox -->
</div>
<p class="small">See how to send money with Front Pay.</p>
</div>
<div class="col-lg-6">
<div id="featuresSVG" class="svg-preloader position-relative max-width-50 mx-auto">
<!-- SVG Phone Mockup -->
<div class="w-75 u-devices-v2__phone-svg shadow-sm mx-auto">
<figure class="ie-iphone-x-1">
<img class="js-svg-injector" src="../../assets/svg/components/iphone-x-1.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGiphoneX1Img1", "newPath": "../../assets/img/407x867/img1.jpg"}
]'
data-parent="#featuresSVG">
</figure>
</div>
<!-- End SVG Phone Mockup -->
<!-- SVG Component -->
<div class="position-absolute bottom-0 right-0 max-width-50 w-100 z-index-n1 mx-auto">
<figure class="ie-abstract-shapes-12">
<img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-12.svg" alt="Image Description"
data-parent="#featuresSVG">
</figure>
</div>
<!-- End SVG Component -->
</div>
</div>
</div>
</div>
<!-- End Features Section -->
<!-- Features Section -->
<div class="container space-2 space-top-lg-3">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 order-lg-2 mb-9 mb-lg-0">
<div class="mb-5">
<h2 class="font-weight-medium mb-4">The easiest way to pay within apps.</h2>
<p>Use Front Pay to make purchases in all kinds of apps. Pay for a ride, a pizza delivery, or a new pair of sneakers — with just a touch. Checking out is fast, simple, and secure.</p>
</div>
<h4 class="h6 mb-3">Get our mobile app</h4>
<a class="btn btn-icon btn-indigo rounded-circle mr-2" href="#">
<span class="fab fa-apple btn-icon__inner"></span>
</a>
<a class="btn btn-icon btn-indigo rounded-circle" href="#">
<span class="fab fa-google-play btn-icon__inner"></span>
</a>
</div>
<div class="col-lg-6 order-lg-1">
<div id="featuresSVGExample2" class="svg-preloader position-relative max-width-50 mx-auto">
<!-- SVG Phone Mockup -->
<div class="w-75 u-devices-v2__phone-svg shadow-sm mx-auto">
<figure class="ie-iphone-x-1">
<img class="js-svg-injector" src="../../assets/svg/components/iphone-x-2.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGiphoneX2Img1", "newPath": "../../assets/img/407x867/img2.jpg"}
]'
data-parent="#featuresSVGExample2">
</figure>
</div>
<!-- End SVG Phone Mockup -->
<!-- SVG Component -->
<div class="position-absolute bottom-0 left-0 right-0 max-width-50 w-100 z-index-n1 mx-auto mb-n5">
<figure class="ie-abstract-shapes-12">
<img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-13.svg" alt="Image Description"
data-parent="#featuresSVGExample2">
</figure>
</div>
<!-- End SVG Component -->
</div>
</div>
</div>
</div>
<!-- End Features Section -->
<!-- Features Section -->
<div class="container space-2 space-top-lg-3">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 mb-9 mb-lg-0">
<div class="mb-4">
<h2 class="font-weight-medium mb-4">Get paid and use the cash. All with Front Pay.</h2>
<p>When you receive money it's added to your Front Pay Cash card that lives in the Wallet app.</p>
</div>
<ul class="list-unstyled">
<li class="media">
<span class="btn btn-icon btn-xs btn-indigo rounded-circle mt-1 mr-3">
<span class="fas fa-check btn-icon__inner"></span>
</span>
<div class="media-body">
<p>When you pay with a debit or credit card, Front Pay doesn't keep transaction information that can be tied back to you.</p>
</div>
</li>
<li class="media">
<span class="btn btn-icon btn-xs btn-indigo rounded-circle mt-1 mr-3">
<span class="fas fa-check btn-icon__inner"></span>
</span>
<div class="media-body">
<p>When you use Front Pay Cash, information is stored only for troubleshooting.</p>
</div>
</li>
<li class="media">
<span class="btn btn-icon btn-xs btn-indigo rounded-circle mt-1 mr-3">
<span class="fas fa-check btn-icon__inner"></span>
</span>
<div class="media-body">
<p>You can also add your student ID card to Front Wallet to access places like your dorm and the library.</p>
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<div id="featuresSVG3" class="svg-preloader position-relative max-width-50 mx-auto">
<!-- SVG Phone Mockup -->
<div class="w-75 u-devices-v2__phone-svg shadow-sm mx-auto">
<figure class="ie-iphone-x-1">
<img class="js-svg-injector" src="../../assets/svg/components/iphone-x-3.svg" alt="Image Description"
data-img-paths='[
{"targetId": "#SVGiphoneX3Img1", "newPath": "../../assets/img/407x867/img3.jpg"}
]'
data-parent="#featuresSVG3">
</figure>
</div>
<!-- End SVG Phone Mockup -->
<!-- SVG Component -->
<div class="content-centered-y left-0 right-0 max-width-50 w-100 z-index-n1 mx-auto">
<figure class="ie-abstract-shapes-12">
<img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-14.svg" alt="Image Description"
data-parent="#featuresSVG3">
</figure>
</div>
<!-- End SVG Component -->
</div>
</div>
</div>
</div>
<!-- End Features Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>