responsively-app/website/pages/elements-pricing.html
2019-09-11 21:45:17 +05:30

1038 lines
56 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 bg-white navbar-light" 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-3 header-inner p-0 jarallax position-relative o-hidden" data-overlay>
<div class="container py-0 layer-2">
<div class="row my-3 text-light">
<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="#">Elements</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Pricing</li>
</ol>
</nav>
</div>
</div>
<div class="row my-4 my-md-6 text-light" data-aos="fade-up">
<div class="col-lg-9 col-xl-6">
<h1 class="display-4">Pricing</h1>
<p class="lead mb-0">A collection of pricing arrangements suitable for a range of price offerings.</p>
</div>
</div>
</div>
<div class="decoration right middle-y scale-4">
<img class="bg-primary" src="assets/img/decorations/deco-blob-3.svg" alt="deco-blob-3 decoration" data-inject-svg />
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col">
<h2>Plans</h2>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-4">
<div class="card card-body align-items-center ">
<div class="pt-md-2">
<h4>Basic</h4>
</div>
<div class="d-flex align-items-start pb-md-2">
<span class="h3">$</span>
<span class="display-4 mb-0">49</span>
</div>
<span class="text-small text-muted">Per user, per month</span>
<ul class="text-center list-unstyled my-2 my-md-4">
<li class="py-1">
<span>10k Visitors/mo</span>
</li>
<li class="py-1">
<span>10 Funnels, 50 Pages</span>
</li>
<li class="py-1">
<span>Unlimited Transactions</span>
</li>
<li class="py-1">
<span>Analytics</span>
</li>
<li class="py-1">
<span>Integrations</span>
</li>
<li class="py-1">
<span class="text-muted text-strikethrough">Audience Data</span>
</li>
<li class="py-1">
<span class="text-muted text-strikethrough">Premium Templates</span>
</li>
<li class="py-1">
<span class="text-muted text-strikethrough">White Labelling</span>
</li>
</ul>
<a href="#" class="btn btn-outline-primary">
Get Basic
</a>
</div>
</div>
<div class="col-md-4">
<div class="card card-body align-items-center shadow-3d">
<span class="badge badge-top badge-dark">Most Popular</span>
<div class="pt-md-2">
<h4>Professional</h4>
</div>
<div class="d-flex align-items-start pb-md-2">
<span class="h3">$</span>
<span class="display-4 mb-0">69</span>
</div>
<span class="text-small text-muted">Per user, per month</span>
<ul class="text-center list-unstyled my-2 my-md-4">
<li class="py-1">
<span>10k Visitors/mo</span>
</li>
<li class="py-1">
<span>10 Funnels, 50 Pages</span>
</li>
<li class="py-1">
<span>Unlimited Transactions</span>
</li>
<li class="py-1">
<span>Analytics</span>
</li>
<li class="py-1">
<span>Integrations</span>
</li>
<li class="py-1">
<span>Audience Data</span>
</li>
<li class="py-1">
<span>Premium Templates</span>
</li>
<li class="py-1">
<span class="text-muted text-strikethrough">White Labelling</span>
</li>
</ul>
<a href="#" class="btn btn-primary">
Get Pro
</a>
</div>
</div>
<div class="col-md-4">
<div class="card card-body align-items-center ">
<div class="pt-md-2">
<h4>Ultimate</h4>
</div>
<div class="d-flex align-items-start pb-md-2">
<span class="h3">$</span>
<span class="display-4 mb-0">89</span>
</div>
<span class="text-small text-muted">Per user, per month</span>
<ul class="text-center list-unstyled my-2 my-md-4">
<li class="py-1">
<span>10k Visitors/mo</span>
</li>
<li class="py-1">
<span>10 Funnels, 50 Pages</span>
</li>
<li class="py-1">
<span>Unlimited Transactions</span>
</li>
<li class="py-1">
<span>Analytics</span>
</li>
<li class="py-1">
<span>Integrations</span>
</li>
<li class="py-1">
<span>Audience Data</span>
</li>
<li class="py-1">
<span>Premium Templates</span>
</li>
<li class="py-1">
<span>White Labelling</span>
</li>
</ul>
<a href="#" class="btn btn-outline-primary">
Get Ultimate
</a>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col">
<h2>Table</h2>
</div>
</div>
<div class="row">
<div class="col">
<table class="table table-hover pricing-table table-responsive-md">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">
<span class="h4">Basic</span>
<div class="d-flex pt-md-3">
<span class="h3">$</span>
<span class="display-4">49</span>
</div>
<span class="text-small text-muted">Per user, per month</span>
<a href="#" class="btn d-block mt-4 btn-outline-primary">Get Basic</a>
</th>
<th scope="col">
<span class="h4">Pro</span>
<div class="d-flex pt-md-3">
<span class="h3">$</span>
<span class="display-4">69</span>
</div>
<span class="text-small text-muted">Per user, per month</span>
<a href="#" class="btn d-block mt-4 btn-primary">Get Pro</a>
</th>
<th scope="col">
<span class="h4">Ultimate</span>
<div class="d-flex pt-md-3">
<span class="h3">$</span>
<span class="display-4">89</span>
</div>
<span class="text-small text-muted">Per user, per month</span>
<a href="#" class="btn d-block mt-4 btn-outline-primary">Get Ultimate</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">Bandwidth</span>
<span class="text-small text-muted">On a per site basis</span>
</th>
<td>
<span>50GB</span>
</td>
<td>
<span>100GB</span>
</td>
<td>
<span>Unlimited</span>
</td>
</tr>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">Page Views</span>
<span class="text-small text-muted">Fair use policy applies</span>
</th>
<td>
<span>20,000</span>
</td>
<td>
<span>100,000</span>
</td>
<td>
<span>Unlimited</span>
</td>
</tr>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">Contracts</span>
<span class="text-small text-muted">With Digital Signature</span>
</th>
<td>
<span>100</span>
</td>
<td>
<span>1,000</span>
</td>
<td>
<span>Unlimited</span>
</td>
</tr>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">Integrations</span>
<span class="text-small text-muted"></span>
</th>
<td>
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td>
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td>
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
</tr>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">Segmentation</span>
<span class="text-small text-muted"></span>
</th>
<td></td>
<td>
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td>
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
</tr>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">White Labelling</span>
<span class="text-small text-muted"></span>
</th>
<td></td>
<td></td>
<td>
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10">
<h2>Table - Competitors</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-10">
<table class="table pricing-table pricing-table-competitors">
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="bg-primary-alt">
<img src="assets/img/logo.svg" alt="Image">
</th>
<th scope="col">
<img src="assets/img/dropbox.svg" alt="Image">
</th>
<th scope="col">
<img src="assets/img/invision.svg" alt="Image">
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">Integrations</span>
<span class="text-small text-muted"></span>
</th>
<td class="bg-primary-alt">
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td>
<div class="icon-round icon-round-xs bg-primary-3-alt">
<img class="icon bg-primary-3" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td>
<div class="icon-round icon-round-xs bg-primary-3-alt">
<img class="icon bg-primary-3" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
</tr>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">Segmentation</span>
<span class="text-small text-muted"></span>
</th>
<td class="bg-primary-alt">
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td>
<div class="icon-round icon-round-xs bg-primary-3-alt">
<img class="icon bg-primary-3" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td>
<div class="icon-round icon-round-xs bg-primary-3-alt">
<img class="icon bg-primary-3" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
</tr>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">White Labelling</span>
<span class="text-small text-muted"></span>
</th>
<td class="bg-primary-alt">
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td>
<div class="icon-round icon-round-xs bg-primary-3-alt">
<img class="icon bg-primary-3" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td>
<div class="icon-round icon-round-xs bg-primary-3-alt">
<img class="icon bg-primary-3" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
</tr>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">Document Signing</span>
<span class="text-small text-muted"></span>
</th>
<td class="bg-primary-alt">
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td>
<div class="icon-round icon-round-xs bg-primary-3-alt">
<img class="icon bg-primary-3" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td></td>
</tr>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">Personalised Support</span>
<span class="text-small text-muted"></span>
</th>
<td class="bg-primary-alt">
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td></td>
<td>
<div class="icon-round icon-round-xs bg-primary-3-alt">
<img class="icon bg-primary-3" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
</tr>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">Storage</span>
<span class="text-small text-muted"></span>
</th>
<td class="bg-primary-alt">
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">
<span class="h6 mb-0 d-block">Funnels</span>
<span class="text-small text-muted"></span>
</th>
<td class="bg-primary-alt">
<div class="icon-round icon-round-xs bg-success">
<img class="icon bg-light" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td>
<div class="icon-round icon-round-xs bg-primary-3-alt">
<img class="icon bg-primary-3" src="assets/img/icons/interface/check.svg" alt="check interface icon" data-inject-svg />
</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-xl-7">
<h2>Single Option</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8 col-xl-7">
<div class="card card-lg card-body flex-sm-row align-items-center pricing-ticket bg-primary text-light">
<div class="mx-2 text-center text-sm-left mb-3 mb-sm-0">
<span class="h1 d-block">All Access</span>
<p class="lead pr-xl-3">
Every workshop, talk and event, all weekend.
</p>
<a href="#" class="btn btn-lg mt-2 btn-white">Purchase Now</a>
</div>
<div class="mx-2 text-center">
<div class="d-flex align-items-center">
<span class="h3 mb-0">$</span>
<span class="display-3">259</span>
</div>
<span class="text-small">Price Includes GST.</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-xl-7">
<h2>Adjustable Slider</h2>
<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>
</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">Well 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">&copy;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>