Using Front
Find the answer to any question, from the basics all the way to advanced tips and tricks!
SVG Blocks
Decorate your website with SVG graphics and other features with support for interactivity and animation.
SVG blocks #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>
SVG blocks #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>
SVG blocks #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>
SVG blocks #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>
SVG blocks #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>
SVG blocks #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>
SVG blocks #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 -->
Icon blocks #8
Product Design
- • Illustration
- • Graphic
- • Web Design
- • UX/UI Design
Web Development
- • jQuery
- • WordPress
- • HTML5
- • PHP
<!-- Features Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-6 mb-7 mb-lg-0">
<!-- Card Info -->
<div class="card border-0 shadow-sm h-100 p-4">
<div class="media align-items-center pr-md-4">
<!-- SVG Icon -->
<figure id="SVGproject" class="svg-preloader max-width-19 w-100 mr-5">
<img class="js-svg-injector" src="../../assets/svg/illustrations/drawing-man.svg" alt="Image Description"
data-parent="#SVGproject">
</figure>
<!-- End SVG Icon -->
<div class="media-body">
<h3 class="h5">Product Design</h3>
<div class="d-flex">
<!-- List -->
<ul class="list-unstyled text-secondary font-size-1 mr-md-4">
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
Illustration
</li>
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
Graphic
</li>
</ul>
<!-- End List -->
<!-- List -->
<ul class="list-unstyled text-secondary font-size-1">
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
Web Design
</li>
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
UX/UI Design
</li>
</ul>
<!-- End List -->
</div>
</div>
</div>
</div>
<!-- Card Info -->
</div>
<div class="col-lg-6">
<!-- Card Info -->
<div class="card border-0 shadow-sm h-100 p-4">
<div class="media align-items-center pr-md-4">
<!-- SVG Icon -->
<figure id="SVGwebDesign" class="svg-preloader max-width-19 w-100 mr-5">
<img class="js-svg-injector" src="../../assets/svg/illustrations/support-man.svg" alt="Image Description"
data-parent="#SVGwebDesign">
</figure>
<!-- End SVG Icon -->
<div class="media-body">
<h3 class="h5">Web Development</h3>
<div class="d-flex">
<!-- List -->
<ul class="list-unstyled text-secondary font-size-1 mr-md-4">
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
jQuery
</li>
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
WordPress
</li>
</ul>
<!-- End List -->
<!-- List -->
<ul class="list-unstyled text-secondary font-size-1">
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
HTML5
</li>
<li class="py-1">
<span class="h6 text-primary mr-1">•</span>
PHP
</li>
</ul>
<!-- End List -->
</div>
</div>
</div>
</div>
<!-- Card Info -->
</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>
Icon blocks #9
<!-- Icon Blocks Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-6 mb-7 mb-lg-0">
<div class="card h-100 p-4">
<div class="media align-items-center pr-md-4">
<!-- SVG Icon -->
<figure id="SVGinnovation" class="svg-preloader max-width-23 w-100 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/folder-woman.svg" alt="Image Description"
data-parent="#SVGinnovation">
</figure>
<!-- End SVG Icon -->
<div class="media-body">
<h3 class="h5">Front Strategy</h3>
<p class="mb-1">We strive to figure out ways to help your audience grow.</p>
<a class="font-size-1" href="#">Read More <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card h-100 p-4">
<div class="media align-items-center pr-md-4">
<!-- SVG Icon -->
<figure id="SVGpowerTools" class="svg-preloader max-width-23 w-100 mr-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/revenue-graph.svg" alt="Image Description"
data-parent="#SVGpowerTools">
</figure>
<!-- End SVG Icon -->
<div class="media-body">
<h3 class="h5">Unlimited Power</h3>
<p class="mb-1">Find what you need in one template.</p>
<a class="font-size-1" href="#">Read More <span class="fas fa-angle-right align-middle ml-2"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
SVG blocks #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>
SVG blocks #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>
SVG blocks #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>
SVG blocks #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>
SVG blocks #14
Get in touch
If you would like to find out more about how we can help you, please give us a call or drop us an email.
Contact Us
<!-- Contact Section -->
<div id="SVGcontactsSection" class="svg-preloader position-relative gradient-half-warning-v1">
<div class="container position-relative z-index-2">
<div class="row">
<div class="col-lg-6">
<!-- Hire Us -->
<div class="d-flex align-items-center space-2 min-height-380 pr-lg-7">
<div class="d-block">
<h2 class="text-white">Have a project?</h2>
<p class="text-white-70 mb-4">Hire us. Our top professionals are ready to help with your business.</p>
<a class="btn text-primary btn-white btn-wide transition-3d-hover" href="../pages/hire-us.html">Hire Us</a>
</div>
</div>
<figure class="w-50 position-absolute right-0 bottom-0 mr-7">
<img class="js-svg-injector" src="../assets/svg/illustrations/building-site.svg" alt="SVG Illustration"
data-parent="#SVGcontactsSection">
</figure>
<!-- End Hire Us -->
</div>
<div class="col-lg-6">
<!-- Contact Us -->
<div class="d-flex align-items-center space-2 min-height-380 pl-lg-7">
<div class="d-block">
<h2 class="text-white">Get in touch</h2>
<p class="text-white-70 mb-4">If you would like to find out more about how we can help you, please give us a call or drop us an email.</p>
<a class="btn text-warning btn-white btn-wide transition-3d-hover" href="../pages/contacts-agency.html">Contact Us</a>
</div>
</div>
<figure class="w-50 position-absolute right-0 bottom-0">
<img class="js-svg-injector" src="../assets/svg/illustrations/pushing-boundaries.svg" alt="SVG Illustration"
data-parent="#SVGcontactsSection">
</figure>
<!-- End Contact Us -->
</div>
</div>
</div>
<div class="col-lg-6 gradient-half-primary-v1 position-absolute top-0 left-0 min-height-380"></div>
</div>
<!-- End Contact 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>
SVG blocks #15
Workspace administration
Want to learn more about setting up and managing your team? Look no further!
<!-- Basic Articles Section -->
<div class="container">
<div class="row">
<div class="col-lg-6 u-ver-divider u-ver-divider--none-lg mb-9 mb-md-0">
<!-- Basic Articles -->
<article class="text-center p-md-8">
<figure id="featuresSVG1" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/drawing-man.svg" alt="Image Description"
data-parent="#featuresSVG1">
</figure>
<div class="mb-4">
<h2 class="h4">Using Front</h2>
<p>Find the answer to any question, from the basics all the way to advanced tips and tricks!</p>
</div>
<a class="btn btn-soft-primary btn-wide transition-3d-hover" href="#">Browse all article</a>
</article>
<!-- End Basic Articles -->
</div>
<div class="col-lg-6">
<!-- Basic Articles -->
<article class="text-center p-md-8">
<figure id="featuresSVG2" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/charts-and-graphs.svg" alt="Image Description"
data-parent="#featuresSVG2">
</figure>
<div class="mb-4">
<h2 class="h4">Workspace administration</h2>
<p>Want to learn more about setting up and managing your team? Look no further!</p>
</div>
<a class="btn btn-soft-primary btn-wide transition-3d-hover" href="#">Browse all article</a>
</article>
<!-- End Basic Articles -->
</div>
</div>
</div>
<!-- End Basic Articles 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>
SVG blocks #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>
SVG blocks #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>
SVG blocks #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>
SVG blocks #19
<!-- Icon Blocks Section -->
<div class="container space-2">
<div class="row justify-content-center mx-gutters-2">
<div class="col-sm-6 col-lg-4 mb-7 mb-lg-0">
<!-- Icon Blocks -->
<div class="text-center px-5">
<figure id="exampleFeaturesSVG1" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/server-woman.svg" alt="Image Description"
data-parent="#exampleFeaturesSVG1">
</figure>
<div class="mb-4">
<h3 class="h5">Professional Design</h3>
<p class="mb-md-0">Achieve virtually any design and layout from within the one template.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
Get Front
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-lg-0">
<!-- Icon Blocks -->
<div class="text-center px-5">
<figure id="exampleFeaturesSVG2" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/full-stack.svg" alt="Image Description"
data-parent="#exampleFeaturesSVG2">
</figure>
<div class="mb-4">
<h3 class="h5">Unlimited Power</h3>
<p class="mb-md-0">Find what you need in one template and combine features at will.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="../../starter/index.html">
Front Power
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-4">
<!-- Icon Blocks -->
<div class="text-center px-5">
<figure id="exampleFeaturesSVG3" class="svg-preloader max-width-27 w-100 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/business-woman.svg" alt="Image Description"
data-parent="#exampleFeaturesSVG3">
</figure>
<div class="mb-4">
<h3 class="h5">Goal Driven</h3>
<p class="mb-md-0">The time has come to bring those ideas and plans to life.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="../pages/hire-us.html">
Hire Front
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<!-- End Icon Blocks Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
SVG blocks #20
Create an account
Create a Front account. Submit applications, save listings and manage jobs.
Post your resume
Create an account and upload your resume to be found by the recruiters who search Monster's databases every day.
Employers: Post a job
Your next hire is here. Our career advice, resume services and education partners give you a leg up in the job search.
<!-- Get Started Section -->
<div class="container space-2">
<div class="row justify-content-md-between">
<div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-0 mb-9 mb-lg-0">
<!-- Icon Blocks -->
<div class="text-center">
<!-- SVG Icon -->
<figure id="SVGcreateAccount" class="svg-preloader w-65 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/create-account.svg" alt="Image Description"
data-parent="#SVGcreateAccount">
</figure>
<!-- End SVG Icon -->
<div class="mb-4">
<h1 class="h5">Create an account</h1>
<p>Create a Front account. Submit applications, save listings and manage jobs.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-wide transition-3d-hover" href="#">
Create an Account
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-4 mb-9 mb-sm-0">
<!-- Icon Blocks -->
<div class="text-center">
<!-- SVG Icon -->
<figure id="SVGpostResume" class="svg-preloader w-65 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/post-resume.svg" alt="Image Description"
data-parent="#SVGpostResume">
</figure>
<!-- End SVG Icon -->
<div class="mb-4">
<h2 class="h5">Post your resume</h2>
<p>Create an account and upload your resume to be found by the recruiters who search Monster's databases every day.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-wide transition-3d-hover" href="#">
Post your Resume
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-lg-4">
<!-- Icon Blocks -->
<div class="text-center">
<!-- SVG Icon -->
<figure id="SVGportfolio" class="svg-preloader w-65 mx-auto mb-4">
<img class="js-svg-injector" src="../../assets/svg/illustrations/portfolio.svg" alt="Image Description"
data-parent="#SVGportfolio">
</figure>
<!-- End SVG Icon -->
<div class="mb-4">
<h3 class="h5">Employers: Post a job</h3>
<p>Your next hire is here. Our career advice, resume services and education partners give you a leg up in the job search.</p>
</div>
<a class="btn btn-sm btn-soft-primary btn-wide transition-3d-hover" href="#">
Post a Job
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
<!-- End Get Started 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>
SVG blocks #21
Refer friends
Send referrals to your friends either here or in your app.
Follow along
Follow your friend's progress and send encouraging messages along the way.
Get paid
When your friend starts building, you'll get paid after their first task completion.
<!-- Icon Blocks -->
<div class="container space-2">
<div class="row">
<div class="col-md-4 mb-9 mb-md-0">
<div class="pr-lg-4">
<figure id="SVGanalysis" class="svg-preloader mb-3 ie-analysis">
<img class="js-svg-injector w-75" src="../../assets/svg/illustrations/analysis.svg" alt="Image Description"
data-parent="#SVGanalysis">
</figure>
<h4 class="h5">Refer friends</h4>
<p>Send referrals to your friends either here or in your app.</p>
</div>
</div>
<div class="col-md-4 mb-9 mb-md-0">
<div class="pr-lg-4">
<figure id="SVGinTheOffice" class="svg-preloader mb-3 ie-in-the-office">
<img class="js-svg-injector w-75" src="../../assets/svg/illustrations/in-the-office.svg" alt="Image Description"
data-parent="#SVGinTheOffice">
</figure>
<h4 class="h5">Follow along</h4>
<p>Follow your friend's progress and send encouraging messages along the way.</p>
</div>
</div>
<div class="col-md-4">
<div class="pr-lg-4">
<figure id="SVGmakeItRain" class="svg-preloader mb-3 ie-make-it-rain">
<img class="js-svg-injector w-75" src="../../assets/svg/illustrations/make-it-rain.svg" alt="Image Description"
data-parent="#SVGmakeItRain">
</figure>
<h4 class="h5">Get paid</h4>
<p>When your friend starts building, you'll get paid after their first task completion.</p>
</div>
</div>
</div>
</div>
<!-- End Icon Blocks -->
<!-- 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>
SVG blocks #22
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>
SVG blocks #23
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>
SVG blocks #24
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>
SVG blocks #25
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>