mirror of
https://github.com/responsively-org/responsively-app
synced 2024-11-14 00:17:12 +00:00
771 lines
49 KiB
HTML
771 lines
49 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Leap Bootstrap Theme and HTML Template</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="A corporate Bootstrap theme by Medium Rare">
|
||
<link href="assets/css/loaders/loader-typing.css" rel="stylesheet" type="text/css" media="all" />
|
||
<link href="assets/css/theme.css" rel="stylesheet" type="text/css" media="all" />
|
||
<link rel="preload" as="font" href="assets/fonts/Inter-UI-upright.var.woff2" type="font/woff2" crossorigin="anonymous">
|
||
<link rel="preload" as="font" href="assets/fonts/Inter-UI.var.woff2" type="font/woff2" crossorigin="anonymous">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="loader">
|
||
<div class="loading-animation"></div>
|
||
</div>
|
||
|
||
<div class="navbar-container ">
|
||
<nav class="navbar navbar-expand-lg navbar-transparent navbar-light bg-primary-alt" data-sticky="top">
|
||
<div class="container">
|
||
<a class="navbar-brand fade-page" href="index.html">
|
||
<img src="assets/img/logo.svg" alt="Leap">
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
|
||
<img class="icon navbar-toggler-open" src="assets/img/icons/interface/menu.svg" alt="menu interface icon" data-inject-svg />
|
||
<img class="icon navbar-toggler-close" src="assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
|
||
</button>
|
||
<div class="collapse navbar-collapse justify-content-end">
|
||
<div class="py-2 py-lg-0">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item dropdown">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Demos</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="home-course.html" class="dropdown-item fade-page">Course</a><a href="home-coworking.html" class="dropdown-item fade-page">Coworking<span class="badge badge-primary ml-2">New</span></a><a href="home-cryptocurrency.html" class="dropdown-item fade-page">Cryptocurrency</a>
|
||
<a
|
||
href="home-desktop-app.html" class="dropdown-item fade-page">Desktop App</a><a href="home-event.html" class="dropdown-item fade-page">Event</a><a href="home-mobile-app.html" class="dropdown-item fade-page">Mobile App</a><a href="home-portfolio.html" class="dropdown-item fade-page">Portfolio</a>
|
||
<a
|
||
href="home-saas.html" class="dropdown-item fade-page">SaaS</a><a href="home-saas-trend.html" class="dropdown-item fade-page">SaaS - Trend</a><a href="home-software-library.html" class="dropdown-item fade-page">Software Library</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Pages</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="about-company.html" class="dropdown-item fade-page">About Company</a>
|
||
<div class="dropdown">
|
||
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
|
||
<span>Careers</span>
|
||
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
||
</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="careers.html" class="dropdown-item fade-page">Careers</a><a href="career-single.html" class="dropdown-item fade-page">Career Single</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
|
||
<span>Contact</span>
|
||
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
||
</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="contact.html" class="dropdown-item fade-page">Contact</a><a href="contact-multiple-locations.html" class="dropdown-item fade-page">Contact - Multiple Locations</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
|
||
<span>Customers</span>
|
||
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
||
</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="customer-stories.html" class="dropdown-item fade-page">Customer Stories</a><a href="customer-story.html" class="dropdown-item fade-page">Customer Story</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
|
||
<span>Knowledgebase</span>
|
||
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
||
</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="knowledgebase.html" class="dropdown-item fade-page">Knowledgebase</a><a href="knowledgebase-category.html" class="dropdown-item fade-page">Knowledgebase Category</a><a href="knowledgebase-article.html" class="dropdown-item fade-page">Knowledgebase Article</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
|
||
<span>Pricing</span>
|
||
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
||
</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="pricing-plans.html" class="dropdown-item fade-page">Pricing Plans</a><a href="pricing-plans-table.html" class="dropdown-item fade-page">Pricing Plans Table</a><a href="pricing-slider.html" class="dropdown-item fade-page">Pricing Slider</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
|
||
<span>Utility</span>
|
||
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
||
</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="404.html" class="dropdown-item fade-page">404</a><a href="utility-coming-soon-subscribe.html" class="dropdown-item fade-page">Coming Soon - Subscribe</a><a href="utility-coming-soon.html" class="dropdown-item fade-page">Coming Soon</a>
|
||
<a
|
||
href="utility-confirmation-download.html" class="dropdown-item fade-page">Confirmation - Download</a><a href="utility-confirmation-subscription.html" class="dropdown-item fade-page">Confirmation - Subscription</a><a href="utility-legal.html" class="dropdown-item fade-page">Legal</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
|
||
<span>Account</span>
|
||
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
||
</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="account-onboarding.html" class="dropdown-item fade-page">Onboarding</a><a href="account-sign-in.html" class="dropdown-item fade-page">Sign In</a><a href="account-sign-up.html" class="dropdown-item fade-page">Sign Up</a>
|
||
<a
|
||
href="account-sign-up-image.html" class="dropdown-item fade-page">Sign Up Image</a><a href="account-forgot-password.html" class="dropdown-item fade-page">Forgot Password</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Blog</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu">
|
||
<div class="dropdown">
|
||
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
|
||
<span>Blog Layouts</span>
|
||
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
||
</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="blog-cards.html" class="dropdown-item fade-page">Blog Cards</a><a href="blog-masonry.html" class="dropdown-item fade-page">Blog Masonry</a><a href="blog-sidebar.html" class="dropdown-item fade-page">Blog Sidebar</a>
|
||
<a
|
||
href="blog-magazine.html" class="dropdown-item fade-page">Blog Magazine</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
|
||
<span>Article Layouts</span>
|
||
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
||
</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="blog-article.html" class="dropdown-item fade-page">Article Basic</a><a href="blog-article-video.html" class="dropdown-item fade-page">Article Video</a><a href="blog-article-image-header.html" class="dropdown-item fade-page">Article Image Header</a>
|
||
<a
|
||
href="blog-article-image-header-parallax.html" class="dropdown-item fade-page">Article Image Parallax</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Portfolio</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu">
|
||
<div class="dropdown">
|
||
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
|
||
<span>Grid Layouts</span>
|
||
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
||
</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="portfolio-2-columns.html" class="dropdown-item fade-page">2 Columns</a><a href="portfolio-3-columns.html" class="dropdown-item fade-page">3 Columns</a><a href="portfolio-4-columns.html" class="dropdown-item fade-page">4 Columns</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
|
||
<span>Project Layouts</span>
|
||
<img class="icon bg-dark opacity-20" src="assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
|
||
</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto" data-dropdown-content>
|
||
<div class="dropdown-grid-menu"><a href="portfolio-case-study.html" class="dropdown-item fade-page">Case Study</a><a href="portfolio-single-sidebar.html" class="dropdown-item fade-page">Sidebar</a><a href="portfolio-single-slider.html" class="dropdown-item fade-page">Slider</a>
|
||
<a
|
||
href="portfolio-single-parallax.html" class="dropdown-item fade-page">Parallax</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Elements</a>
|
||
<div class="dropdown-menu bg-primary-3 text-light border-bottom">
|
||
<div class="container py-4" data-dropdown-content>
|
||
<div class="row">
|
||
<div class="col-lg col-md-4 mb-3 mb-lg-0">
|
||
<h5>Base</h5>
|
||
<div><a class="dropdown-item fade-page" href="elements-grid.html">Grid</a><a class="dropdown-item fade-page" href="elements-forms.html">Forms</a><a class="dropdown-item fade-page" href="elements-tables.html">Tables</a><a class="dropdown-item fade-page"
|
||
href="elements-typography.html">Typography</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg col-md-4 mb-3 mb-lg-0">
|
||
<h5>General</h5>
|
||
<div><a class="dropdown-item fade-page" href="elements-alerts.html">Alerts</a><a class="dropdown-item fade-page" href="elements-avatars.html">Avatars</a><a class="dropdown-item fade-page" href="elements-badges.html">Badges</a><a class="dropdown-item fade-page"
|
||
href="elements-breadcrumbs.html">Breadcrumbs</a><a class="dropdown-item fade-page" href="elements-buttons.html">Buttons</a><a class="dropdown-item fade-page" href="elements-cards.html">Cards</a><a class="dropdown-item fade-page"
|
||
href="elements-dropdowns-bootstrap.html">Dropdowns Bootstrap</a><a class="dropdown-item fade-page" href="elements-dropdowns-grid.html">Dropdowns Grid</a><a class="dropdown-item fade-page" href="elements-footers.html">Footers</a>
|
||
<a
|
||
class="dropdown-item fade-page" href="elements-navbars.html">Navigation</a><a class="dropdown-item fade-page" href="elements-tooltips.html">Tooltips</a><a class="dropdown-item fade-page" href="elements-toasts.html">Toasts</a><a class="dropdown-item fade-page" href="elements-widgets.html">Widgets</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg col-md-4 mb-3 mb-lg-0">
|
||
<h5>Graphic</h5>
|
||
<div><a class="dropdown-item fade-page" href="elements-decorations.html">Decorations</a><a class="dropdown-item fade-page" href="elements-dividers.html">Dividers</a><a class="dropdown-item fade-page" href="elements-icons.html">Icons</a>
|
||
<a
|
||
class="dropdown-item fade-page" href="elements-icons-reference.html">Icons Reference</a><a class="dropdown-item fade-page" href="elements-processes.html">Processes</a><a class="dropdown-item fade-page" href="elements-progress.html">Progress</a><a class="dropdown-item fade-page" href="elements-pricing.html">Pricing</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg col-md-4 mb-3 mb-lg-0">
|
||
<h5>Media</h5>
|
||
<div><a class="dropdown-item fade-page" href="elements-fancybox.html">Fancybox</a><a class="dropdown-item fade-page" href="elements-isotope.html">Isotope</a><a class="dropdown-item fade-page" href="elements-maps.html">Maps</a><a class="dropdown-item fade-page"
|
||
href="elements-flickity.html">Slider Flickity</a><a class="dropdown-item fade-page" href="elements-twitter.html">Twitter Feeds</a><a class="dropdown-item fade-page" href="elements-video-players.html">Video Players</a><a class="dropdown-item fade-page"
|
||
href="elements-video-backgrounds.html">Video Backgrounds</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg col-md-4 mb-3 mb-lg-0">
|
||
<h5>Interactive</h5>
|
||
<div><a class="dropdown-item fade-page" href="elements-animations.html">Animations</a><a class="dropdown-item fade-page" href="elements-accordions.html">Accordion</a><a class="dropdown-item fade-page" href="elements-counters.html">Counters</a>
|
||
<a
|
||
class="dropdown-item fade-page" href="elements-countdown.html">Countdown</a><a class="dropdown-item fade-page" href="elements-date-picker.html">Date Picker</a><a class="dropdown-item fade-page" href="elements-modals.html">Modals</a><a class="dropdown-item fade-page" href="elements-navs.html">Tabs (Nav)</a>
|
||
<a
|
||
class="dropdown-item fade-page" href="elements-typed-text.html">Typed Text</a><a class="dropdown-item fade-page" href="elements-parallax.html">Parallax</a><a class="dropdown-item fade-page" href="elements-popovers.html">Popovers</a><a class="dropdown-item fade-page" href="elements-wizards.html">Wizards</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Support</a>
|
||
<div class="dropdown-menu row">
|
||
<div class="col-auto px-0" data-dropdown-content>
|
||
<div class="bg-white rounded border shadow-lg o-hidden">
|
||
<div class="p-3">
|
||
<h6 class="mb-0">Product Support</h6>
|
||
</div>
|
||
<div class="list-group list-group-flush">
|
||
<a href="documentation/index.html" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-3">
|
||
<img class="icon icon-md" src="assets/img/icons/theme/files/selected-file.svg" alt="selected-file icon" data-inject-svg />
|
||
<div class="text-body ml-3">
|
||
<span>Documentation</span>
|
||
<div class="text-small text-muted">Get all the information you need</div>
|
||
</div>
|
||
</a>
|
||
<a href="https://themes.zendesk.com/hc/en-us/articles/360000006291-How-do-I-get-help-with-the-theme-I-purchased-" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-3">
|
||
<img class="icon icon-md" src="assets/img/icons/theme/communication/chat-4.svg" alt="chat-4 icon" data-inject-svg />
|
||
<div class="text-body ml-3">
|
||
<span>Looking for answers?</span>
|
||
<div class="text-small text-muted">Get support</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div><a href="#" class="btn btn-primary ml-lg-3">Purchase Now</a>
|
||
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<section class="bg-primary-alt header-inner o-hidden">
|
||
<div class="container">
|
||
<div class="row my-3">
|
||
<div class="col">
|
||
<nav aria-label="breadcrumb">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item">
|
||
<a href="index.html">Home</a>
|
||
</li>
|
||
<li class="breadcrumb-item">
|
||
<a href="#">Pages</a>
|
||
</li>
|
||
<li class="breadcrumb-item active" aria-current="page">Pricing Slider</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
<div class="row py-6 text-center justify-content-center align-items-center">
|
||
<div class="col-xl-8 col-lg-10">
|
||
<h1 class="display-4">Pricing Slider</h1>
|
||
<p class="lead mb-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="decoration-wrapper d-none d-md-block">
|
||
<div class="decoration left middle-y scale-2" data-jarallax-element="100">
|
||
<img class="bg-primary" src="assets/img/decorations/deco-dots-4.svg" alt="deco-dots-4 decoration" data-inject-svg />
|
||
</div>
|
||
<div class="decoration bottom right scale-2" data-jarallax-element="100 100">
|
||
<img class="bg-primary-2" src="assets/img/decorations/deco-blob-6.svg" alt="deco-blob-6 decoration" data-inject-svg />
|
||
</div>
|
||
</div>
|
||
<div class="divider">
|
||
<img src="assets/img/dividers/divider-1.svg" alt="graphical divider" data-inject-svg />
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-xl-6">
|
||
<form>
|
||
<div>
|
||
<label class="h5">Select your number of users</label>
|
||
<input type="text" data-ion-rangeslider data-values="1,2,3,4,5,6,7,8,9,10,11+" data-from="2" data-step="1" data-grid="true" data-grid-snap="true" data-on-change="mrUpdatePrice" data-unit-selector=".js-users-word" data-unit-single="User" data-unit-plural="Users"
|
||
data-from-selector=".js-users-per-month" data-hide-from-to="true" />
|
||
</div>
|
||
<div class="mt-5 card card-body justify-content-center text-center shadow-3d">
|
||
<div class="text-muted">
|
||
<span class="js-users-per-month">3</span>
|
||
<span class="js-users-word">Users</span>
|
||
</div>
|
||
<div class="d-flex justify-content-center my-3">
|
||
<span class="h3 pt-1 mr-1 js-dollar-sign">$</span>
|
||
<span class="display-3 js-price-per-month">120</span>
|
||
</div>
|
||
<div class="text-small text-muted js-pricing-charge-description">Total charge per month</div>
|
||
<button class="btn btn-lg btn-primary mt-3 js-pricing-submit-button" type="submit">Get started</button>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col text-center">
|
||
<span>Interested in a custom plan? <a href="#">Get in touch</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="pt-0">
|
||
<div class="container text-center">
|
||
<div class="row mb-5">
|
||
<div class="col">
|
||
<h5>Trusted by over 30,000 of the world’s leading companies</h5>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-xl-8 col-lg-9">
|
||
<ul class="d-flex flex-wrap justify-content-center list-unstyled">
|
||
<li class="mx-3 mb-5">
|
||
<img class="icon icon-md bg-primary-3 opacity-20" src="assets/img/logos/brand/apple.svg" alt="icon" data-inject-svg />
|
||
</li>
|
||
<li class="mx-3 mb-5">
|
||
<img class="icon icon-md bg-primary-3 opacity-20" src="assets/img/logos/brand/buzzfeed.svg" alt="icon" data-inject-svg />
|
||
</li>
|
||
<li class="mx-3 mb-5">
|
||
<img class="icon icon-md bg-primary-3 opacity-20" src="assets/img/logos/brand/intercom.svg" alt="icon" data-inject-svg />
|
||
</li>
|
||
<li class="mx-3 mb-5">
|
||
<img class="icon icon-md bg-primary-3 opacity-20" src="assets/img/logos/brand/slack.svg" alt="icon" data-inject-svg />
|
||
</li>
|
||
<li class="mx-3 mb-5">
|
||
<img class="icon icon-md bg-primary-3 opacity-20" src="assets/img/logos/brand/spotify.svg" alt="icon" data-inject-svg />
|
||
</li>
|
||
<li class="mx-3 mb-5">
|
||
<img class="icon icon-md bg-primary-3 opacity-20" src="assets/img/logos/brand/target.svg" alt="icon" data-inject-svg />
|
||
</li>
|
||
<li class="mx-3 mb-5">
|
||
<img class="icon icon-md bg-primary-3 opacity-20" src="assets/img/logos/brand/time.svg" alt="icon" data-inject-svg />
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="p-0">
|
||
<div class="container mb-lg-n7 position-relative">
|
||
<div class="row">
|
||
<div class="col-md-4 d-flex" data-aos="fade-up" data-aos-delay="NaN">
|
||
<div class="card card-body shadow-sm">
|
||
<div class="d-flex mb-3">
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
</div>
|
||
<div class="my-md-2 flex-grow-1">
|
||
<h4>
|
||
“I couldn’t have done it without the team from Leap.”
|
||
</h4>
|
||
</div>
|
||
<div class="avatar-author align-items-center">
|
||
<img src="assets/img/avatars/male-1.jpg" alt="Avatar" class="avatar">
|
||
<div class="ml-2">
|
||
<h6>Benjamin Cameron</h6>
|
||
<span>Designer</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 d-flex" data-aos="fade-up" data-aos-delay="NaN">
|
||
<div class="card card-body shadow-sm">
|
||
<div class="d-flex mb-3">
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
</div>
|
||
<div class="my-md-2 flex-grow-1">
|
||
<h4>
|
||
“Finally, a template that covers all bases for a bootstrapped startup.”
|
||
</h4>
|
||
</div>
|
||
<div class="avatar-author align-items-center">
|
||
<img src="assets/img/avatars/male-4.jpg" alt="Avatar" class="avatar">
|
||
<div class="ml-2">
|
||
<h6>Marco Origez</h6>
|
||
<span>Developer</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 d-flex" data-aos="fade-up" data-aos-delay="NaN">
|
||
<div class="card card-body shadow-sm">
|
||
<div class="d-flex mb-3">
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
<img class="icon bg-warning" src="assets/img/icons/interface/star.svg" alt="star interface icon" data-inject-svg />
|
||
</div>
|
||
<div class="my-md-2 flex-grow-1">
|
||
<h4>
|
||
“I fell in love with the design immediately.”
|
||
</h4>
|
||
</div>
|
||
<div class="avatar-author align-items-center">
|
||
<img src="assets/img/avatars/female-4.jpg" alt="Avatar" class="avatar">
|
||
<div class="ml-2">
|
||
<h6>Helen Shultz</h6>
|
||
<span>Business Owner</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="divider">
|
||
<img class="bg-primary-alt" src="assets/img/dividers/divider-1.svg" alt="divider graphic" data-inject-svg />
|
||
</div>
|
||
</section>
|
||
<section class="bg-primary-alt">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-xl-8 col-lg-9">
|
||
<h3 class="h2">Frequently Asked Questions</h3>
|
||
<div class="my-4">
|
||
<div class="card mb-2 card-sm card-body hover-shadow-sm" data-aos="fade-up" data-aos-delay="NaN">
|
||
<div data-target="#panel-1" class="accordion-panel-title" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
|
||
<span class="h6 mb-0">Can I change plans later on?</span>
|
||
<img class="icon" src="assets/img/icons/interface/plus.svg" alt="plus interface icon" data-inject-svg />
|
||
</div>
|
||
<div class="collapse" id="panel-1">
|
||
<div class="pt-3">
|
||
<p class="mb-0">
|
||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card mb-2 card-sm card-body hover-shadow-sm" data-aos="fade-up" data-aos-delay="NaN">
|
||
<div data-target="#panel-2" class="accordion-panel-title" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-2">
|
||
<span class="h6 mb-0">What is the difference between Pro and Ultimate?</span>
|
||
<img class="icon" src="assets/img/icons/interface/plus.svg" alt="plus interface icon" data-inject-svg />
|
||
</div>
|
||
<div class="collapse" id="panel-2">
|
||
<div class="pt-3">
|
||
<p class="mb-0">
|
||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card mb-2 card-sm card-body hover-shadow-sm" data-aos="fade-up" data-aos-delay="NaN">
|
||
<div data-target="#panel-3" class="accordion-panel-title" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-3">
|
||
<span class="h6 mb-0">Can I try before I buy?</span>
|
||
<img class="icon" src="assets/img/icons/interface/plus.svg" alt="plus interface icon" data-inject-svg />
|
||
</div>
|
||
<div class="collapse" id="panel-3">
|
||
<div class="pt-3">
|
||
<p class="mb-0">
|
||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card mb-2 card-sm card-body hover-shadow-sm" data-aos="fade-up" data-aos-delay="NaN">
|
||
<div data-target="#panel-4" class="accordion-panel-title" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-4">
|
||
<span class="h6 mb-0">Do you offer bulk discounts?</span>
|
||
<img class="icon" src="assets/img/icons/interface/plus.svg" alt="plus interface icon" data-inject-svg />
|
||
</div>
|
||
<div class="collapse" id="panel-4">
|
||
<div class="pt-3">
|
||
<p class="mb-0">
|
||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card mb-2 card-sm card-body hover-shadow-sm" data-aos="fade-up" data-aos-delay="NaN">
|
||
<div data-target="#panel-5" class="accordion-panel-title" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-5">
|
||
<span class="h6 mb-0">Is this a subscription service?</span>
|
||
<img class="icon" src="assets/img/icons/interface/plus.svg" alt="plus interface icon" data-inject-svg />
|
||
</div>
|
||
<div class="collapse" id="panel-5">
|
||
<div class="pt-3">
|
||
<p class="mb-0">
|
||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span>Still have questions? <a href="#">Get in touch</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<footer class="pb-4 bg-primary-3 text-light" id="footer">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col">
|
||
<div class="card card-body border-0 o-hidden mb-0 bg-primary text-light">
|
||
<div class="position-relative d-flex flex-column flex-md-row justify-content-between align-items-center">
|
||
<div class="h3 text-center mb-md-0">Start building beautiful websites</div>
|
||
<a href="#" class="btn btn-lg btn-white">
|
||
Purchase Now
|
||
</a>
|
||
</div>
|
||
<div class="decoration layer-0">
|
||
<img class="bg-primary-2" src="assets/img/decorations/deco-blob-1.svg" alt="deco-blob-1 decoration" data-inject-svg />
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row mb-5">
|
||
<div class="col-6 col-lg-3 col-xl-2">
|
||
<h5>Navigate</h5>
|
||
<ul class="nav flex-column">
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link">Demos</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link">Pages</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link">Blog</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link">Portfolio</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link">Elements</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-6 col-lg">
|
||
<h5>Contact</h5>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-3 d-flex">
|
||
<img class="icon" src="assets/img/icons/theme/map/marker-1.svg" alt="marker-1 icon" data-inject-svg />
|
||
<div class="ml-3">
|
||
<span>348 Greenpoint Avenue
|
||
<br />Brooklyn, NY</span>
|
||
</div>
|
||
</li>
|
||
<li class="mb-3 d-flex">
|
||
<img class="icon" src="assets/img/icons/theme/communication/call-1.svg" alt="call-1 icon" data-inject-svg />
|
||
<div class="ml-3">
|
||
<span>+61 3928 3324</span>
|
||
<span class="d-block text-muted text-small">Mon - Fri 9am - 5pm</span>
|
||
</div>
|
||
</li>
|
||
<li class="mb-3 d-flex">
|
||
<img class="icon" src="assets/img/icons/theme/communication/mail.svg" alt="mail icon" data-inject-svg />
|
||
<div class="ml-3">
|
||
<a href="#">hello@company.io</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-lg-5 col-xl-4 mt-3 mt-lg-0">
|
||
<h5>Subscribe</h5>
|
||
<p>The latest Leap news, articles, and resources, sent straight to your inbox every month.</p>
|
||
<form action="/forms/mailchimp.php" data-form-email novalidate>
|
||
<div class="form-row">
|
||
<div class="col-12">
|
||
<input type="email" class="form-control mb-2" placeholder="Email Address" name="email" required>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="d-none alert alert-success" role="alert" data-success-message>
|
||
Thanks, a member of our team will be in touch shortly.
|
||
</div>
|
||
<div class="d-none alert alert-danger" role="alert" data-error-message>
|
||
Please fill all fields correctly.
|
||
</div>
|
||
<div data-recaptcha data-sitekey="INSERT_YOUR_RECAPTCHA_V2_SITEKEY_HERE" data-size="invisible" data-badge="bottomleft">
|
||
</div>
|
||
<button type="submit" class="btn btn-primary btn-loading btn-block" data-loading-text="Sending">
|
||
<img class="icon" src="assets/img/icons/theme/code/loading.svg" alt="loading icon" data-inject-svg />
|
||
<span>Subscribe</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<small class="text-muted form-text">We’ll never share your details. See our <a href="#">Privacy Policy</a>
|
||
</small>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center mb-2">
|
||
<div class="col-auto">
|
||
<ul class="nav">
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link">
|
||
<img class="icon undefined" src="assets/img/icons/social/instagram.svg" alt="instagram social icon" data-inject-svg />
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link">
|
||
<img class="icon undefined" src="assets/img/icons/social/twitter.svg" alt="twitter social icon" data-inject-svg />
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link">
|
||
<img class="icon undefined" src="assets/img/icons/social/youtube.svg" alt="youtube social icon" data-inject-svg />
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link">
|
||
<img class="icon undefined" src="assets/img/icons/social/medium.svg" alt="medium social icon" data-inject-svg />
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link">
|
||
<img class="icon undefined" src="assets/img/icons/social/facebook.svg" alt="facebook social icon" data-inject-svg />
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col col-md-auto text-center">
|
||
<small class="text-muted">©2019 This page is protected by reCAPTCHA and is subject to the Google <a href="https://www.google.com/policies/privacy/">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service.</a>
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<a href="#" class="btn back-to-top btn-primary btn-round" data-smooth-scroll data-aos="fade-up" data-aos-offset="2000" data-aos-mirror="true" data-aos-once="false">
|
||
<img class="icon" src="assets/img/icons/theme/navigation/arrow-up.svg" alt="arrow-up icon" data-inject-svg />
|
||
</a>
|
||
<!-- Required vendor scripts (Do not remove) -->
|
||
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
|
||
<script type="text/javascript" src="assets/js/popper.min.js"></script>
|
||
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
|
||
|
||
<!-- Optional Vendor Scripts (Remove the plugin script here and comment initializer script out of index.js if site does not use that feature) -->
|
||
|
||
<!-- AOS (Animate On Scroll - animates elements into view while scrolling down) -->
|
||
<script type="text/javascript" src="assets/js/aos.js"></script>
|
||
<!-- Clipboard (copies content from browser into OS clipboard) -->
|
||
<script type="text/javascript" src="assets/js/clipboard.js"></script>
|
||
<!-- Fancybox (handles image and video lightbox and galleries) -->
|
||
<script type="text/javascript" src="assets/js/jquery.fancybox.min.js"></script>
|
||
<!-- Flatpickr (calendar/date/time picker UI) -->
|
||
<script type="text/javascript" src="assets/js/flatpickr.min.js"></script>
|
||
<!-- Flickity (handles touch enabled carousels and sliders) -->
|
||
<script type="text/javascript" src="assets/js/flickity.pkgd.min.js"></script>
|
||
<!-- Ion rangeSlider (flexible and pretty range slider elements) -->
|
||
<script type="text/javascript" src="assets/js/ion.rangeSlider.min.js"></script>
|
||
<!-- Isotope (masonry layouts and filtering) -->
|
||
<script type="text/javascript" src="assets/js/isotope.pkgd.min.js"></script>
|
||
<!-- jarallax (parallax effect and video backgrounds) -->
|
||
<script type="text/javascript" src="assets/js/jarallax.min.js"></script>
|
||
<script type="text/javascript" src="assets/js/jarallax-video.min.js"></script>
|
||
<script type="text/javascript" src="assets/js/jarallax-element.min.js"></script>
|
||
<!-- jQuery Countdown (displays countdown text to a specified date) -->
|
||
<script type="text/javascript" src="assets/js/jquery.countdown.min.js"></script>
|
||
<!-- jQuery smartWizard facilitates steppable wizard content -->
|
||
<script type="text/javascript" src="assets/js/jquery.smartWizard.min.js"></script>
|
||
<!-- Plyr (unified player for Video, Audio, Vimeo and Youtube) -->
|
||
<script type="text/javascript" src="assets/js/plyr.polyfilled.min.js"></script>
|
||
<!-- Prism (displays formatted code boxes) -->
|
||
<script type="text/javascript" src="assets/js/prism.js"></script>
|
||
<!-- ScrollMonitor (manages events for elements scrolling in and out of view) -->
|
||
<script type="text/javascript" src="assets/js/scrollMonitor.js"></script>
|
||
<!-- Smooth scroll (animation to links in-page)-->
|
||
<script type="text/javascript" src="assets/js/smooth-scroll.polyfills.min.js"></script>
|
||
<!-- SVGInjector (replaces img tags with SVG code to allow easy inclusion of SVGs with the benefit of inheriting colors and styles)-->
|
||
<script type="text/javascript" src="assets/js/svg-injector.umd.production.js"></script>
|
||
<!-- TwitterFetcher (displays a feed of tweets from a specified account)-->
|
||
<script type="text/javascript" src="assets/js/twitterFetcher_min.js"></script>
|
||
<!-- Typed text (animated typing effect)-->
|
||
<script type="text/javascript" src="assets/js/typed.min.js"></script>
|
||
<!-- Required theme scripts (Do not remove) -->
|
||
<script type="text/javascript" src="assets/js/theme.js"></script>
|
||
<!-- Removes page load animation when window is finished loading -->
|
||
<script type="text/javascript">
|
||
window.addEventListener("load", function () { document.querySelector('body').classList.add('loaded'); });
|
||
</script>
|
||
<!-- This function is used as a callback from the ionRangeSlider to calculate the price based on slider value -->
|
||
<script type="text/javascript">
|
||
var mrUpdatePrice = (function(){
|
||
var priceElements = document.querySelectorAll('.js-price-per-month');
|
||
var hideSignup = document.querySelectorAll('.js-pricing-charge-description');
|
||
var dollarSign = document.querySelector('.js-dollar-sign');
|
||
var prices = ['Free','99','120','169','209','239','279','299','329','369','Contact us'];
|
||
var updatePrice = function(data){
|
||
// Hide or show dollar sign based on value "FREE" or "Contact us"
|
||
if (dollarSign){
|
||
dollarSign.classList[data.from < 1 || data.from == 10 ? 'add' : 'remove']('d-none');
|
||
}
|
||
|
||
theme.mrUtil.forEach(hideSignup, function(index, element) {
|
||
element.classList[data.from === 10 ? 'add' : 'remove']('d-none');
|
||
});
|
||
|
||
theme.mrUtil.forEach(priceElements, function(index, element) {
|
||
element.textContent = prices[data.from];
|
||
});
|
||
};
|
||
return updatePrice;
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html>
|