2655 lines
141 KiB
HTML
2655 lines
141 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Title -->
|
||
<title>Pricing - Snippets | Front - Multipurpose Responsive Template</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="../favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||
|
||
<!-- CSS Implementing Plugins -->
|
||
<link rel="stylesheet" href="../assets/css/vendor.min.css">
|
||
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<link rel="stylesheet" href="../assets/css/theme.min.css?v=1.0">
|
||
<link rel="stylesheet" href="../assets/css/snippets.css">
|
||
</head>
|
||
|
||
<body class="navbar-sidebar-aside-lg">
|
||
<!-- ========== HEADER ========== -->
|
||
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
||
<div class="container-fluid">
|
||
<nav class="navbar-nav-wrap">
|
||
<div class="row flex-grow-1">
|
||
<!-- Default Logo -->
|
||
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
||
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<div class="col-md px-lg-0">
|
||
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
||
<div class="d-none d-md-block">
|
||
<!-- Search Form -->
|
||
<form id="snippetsSearch" class="position-relative"
|
||
data-hs-list-options='{
|
||
"searchMenu": true,
|
||
"keyboard": true,
|
||
"item": "searchTemplate",
|
||
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
||
"empty": "#searchNoResults"
|
||
}'>
|
||
<!-- Input Group -->
|
||
<div class="input-group input-group-merge navbar-input-group">
|
||
<div class="input-group-prepend input-group-text">
|
||
<i class="bi-search"></i>
|
||
</div>
|
||
|
||
<input type="search" class="search form-control form-control-sm" placeholder="Search in snippets" aria-label="Search in snippets">
|
||
|
||
<a class="input-group-append input-group-text" href="javascript:;">
|
||
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
||
</a>
|
||
</div>
|
||
<!-- End Input Group -->
|
||
|
||
<!-- List -->
|
||
<div class="list dropdown-menu w-100 overflow-auto" style="max-height: 16rem;"></div>
|
||
<!-- End List -->
|
||
|
||
<!-- Empty -->
|
||
<div id="searchNoResults" style="display: none;">
|
||
<div class="text-center p-4">
|
||
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
||
<p class="mb-0">No Results</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Empty -->
|
||
</form>
|
||
<!-- End Search Form -->
|
||
|
||
<!-- List Item Template -->
|
||
<div class="d-none">
|
||
<div id="searchTemplate" class="dropdown-item">
|
||
<a class="d-block link" href="#">
|
||
<span class="category d-block fw-normal text-muted mb-1"></span>
|
||
<span class="component text-dark"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End List Item Template -->
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav p-0">
|
||
<li class="nav-item">
|
||
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
||
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="btn btn-primary btn-sm" href="../index.html">
|
||
<i class="bi-eye me-1"></i> Preview Demo
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Navbar -->
|
||
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
||
data-hs-nav-scroller-options='{
|
||
"type": "vertical",
|
||
"target": ".navbar-nav .active",
|
||
"offset": 80
|
||
}'>
|
||
<!-- Navbar Toggle -->
|
||
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span class="h6 mb-0">Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<!-- Navbar Collapse -->
|
||
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
||
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
||
<!-- Default Logo -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment nav-fill nav-justified">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../documentation/index.html">Docs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../snippets/index.html">Snippets</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
|
||
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
||
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Snippets</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/index.html">Introduction</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Navbar / Heroes</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/navbar.html">Headers (Navbar)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/hero-sections.html">Hero Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Content</span>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
|
||
|
||
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="features-general.html">General</a>
|
||
<a class="nav-link " href="features-stats.html">Stats</a>
|
||
<a class="nav-link " href="features-step.html">Step</a>
|
||
<a class="nav-link " href="features-navs.html">Navs (Tabs)</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/icon-blocks.html">Icon Blocks</a>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavCardsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavCardsCollapse">Cards</a>
|
||
|
||
<div id="snippetsSidebarNavCardsCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="cards-grid.html">Grid</a>
|
||
<a class="nav-link " href="cards-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavDirectoryCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavDirectoryCollapse">Directory</a>
|
||
|
||
<div id="snippetsSidebarNavDirectoryCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="directory-grid.html">Grid</a>
|
||
<a class="nav-link " href="directory-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/testimonials.html">Testimonials</a>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavBlogsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavBlogsCollapse">Blogs</a>
|
||
|
||
<div id="snippetsSidebarNavBlogsCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="blogs-grid.html">Grid</a>
|
||
<a class="nav-link " href="blogs-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/tables.html">Tables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/ecommerce.html">E-commerce</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../snippets/pricing.html">Pricing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/team-sections.html">Team Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/cta.html">Call-to-Action (CTA)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/modals.html">Modals</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/portfolio.html">Portfolio</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/gallery.html">Gallery</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/clients.html">Clients</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/countdown.html">Countdown</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/faq.html">FAQ</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/lists.html">Lists</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/collapse-accordion.html">Collapse/Accordion</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/comments.html">Comments</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/feedback-and-reviews.html">Feedback & Reviews</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/user-profile.html">User Profile</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="sidebar-examples.html">Sidebar Examples</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="calendar-view.html">Calendar View</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="notification.html">Notification</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="content-sections.html">Content Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-authentication.html">Authentication</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-feedback.html">Feedback</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-filters.html">Filters</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-search.html">Search</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-directory.html">Directory</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-subscribe.html">Subscribe</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-account.html">Account</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-wizard-and-steps.html">Wizard & Steps</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Contact / Footer</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/contact-sections.html">Contact Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/footer.html">Footer</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Collapse -->
|
||
</nav>
|
||
<!-- End Navbar -->
|
||
|
||
<!-- Content -->
|
||
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
||
<!-- Page Header -->
|
||
<div class="docs-page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-sm">
|
||
<h1 class="docs-page-header-title">Pricing</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Page Header -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-1" class="hs-docs-heading">
|
||
Component #1 <a class="anchorjs-link" href="#component-1" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab1" href="#nav-result1" data-bs-toggle="pill" data-bs-target="#nav-result1" role="tab" aria-controls="nav-result1" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab1" href="#nav-js1" data-bs-toggle="pill" data-bs-target="#nav-js1" role="tab" aria-controls="nav-js1" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent1">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result1" role="tabpanel" aria-labelledby="nav-resultTab1">
|
||
<!-- Pricing -->
|
||
<div class="overflow-hidden">
|
||
<div class="container">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 text-center mx-md-auto mb-9">
|
||
<h2 class="h1">Flexible and transparent pricing</h2>
|
||
<p>Whatever your status, our offers evolve according to your needs.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Form Switch -->
|
||
<div class="d-flex justify-content-center mb-5">
|
||
<div class="form-check form-switch form-switch-between">
|
||
<label class="form-check-label">Monthly</label>
|
||
<input class="js-toggle-switch form-check-input" type="checkbox"
|
||
data-hs-toggle-switch-options='{
|
||
"targetSelector": "#pricingCount1, #pricingCount2, #pricingCount3"
|
||
}'>
|
||
<label class="form-check-label form-switch-promotion">
|
||
Annually
|
||
<span class="form-switch-promotion-container">
|
||
<span class="form-switch-promotion-body">
|
||
<svg class="form-switch-promotion-arrow" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
|
||
</svg>
|
||
<span class="form-switch-promotion-text">
|
||
<span class="badge bg-primary rounded-pill ms-1">Save up to 10%</span>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- End Form Switch -->
|
||
|
||
<div class="row mb-7">
|
||
<div class="col-md mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card h-100 shadow-none zi-1">
|
||
<div class="card-header text-center">
|
||
<div class="mb-2">
|
||
<span class="fs-5 align-top text-dark fw-semi-bold">$</span>
|
||
<span class="fs-1 text-dark fw-semi-bold">19</span>
|
||
<span>/mo</span>
|
||
</div>
|
||
|
||
<h3 class="card-title">Professional</h3>
|
||
<p class="card-text">All the basics for starting a new business</p>
|
||
</div>
|
||
|
||
<div class="card-body d-flex justify-content-center py-0">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">1 user</li>
|
||
<li class="list-checked-item">Front plan features</li>
|
||
<li class="list-checked-item">1 app</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
|
||
<div class="card-footer text-center">
|
||
<div class="d-grid mb-2">
|
||
<button type="button" class="btn btn-ghost-primary">Try free for 30 days</button>
|
||
</div>
|
||
<p class="card-text text-muted small">No card required</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md mb-3 mb-md-0">
|
||
<div class="position-relative">
|
||
<!-- Card -->
|
||
<div class="card h-100 zi-1">
|
||
<div class="card-header text-center">
|
||
<div class="mb-2">
|
||
<span class="fs-5 align-top text-dark fw-semi-bold">$</span>
|
||
<span id="pricingCount2" class="fs-1 text-dark fw-semi-bold"
|
||
data-hs-toggle-switch-item-options='{
|
||
"min": 49,
|
||
"max": 39
|
||
}'>39</span>
|
||
<span>/mo</span>
|
||
</div>
|
||
|
||
<h3 class="card-title">Team</h3>
|
||
<p class="card-text">Everything you need for a growing business</p>
|
||
</div>
|
||
|
||
<div class="card-body d-flex justify-content-center py-0">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">3 users</li>
|
||
<li class="list-checked-item">Front plan features</li>
|
||
<li class="list-checked-item">3 apps</li>
|
||
<li class="list-checked-item">Product support</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
|
||
<div class="card-footer text-center">
|
||
<div class="d-grid mb-2">
|
||
<button type="button" class="btn btn-primary">Try free for 30 days</button>
|
||
</div>
|
||
<p class="card-text text-muted small">No card required</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- SVG Elements -->
|
||
<figure class="position-absolute bottom-0 start-0 mb-n7 ms-n7" style="width: 9rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
|
||
</figure>
|
||
|
||
<figure class="position-absolute top-0 end-0 mt-n7 me-n7" style="width: 7rem;">
|
||
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||
viewBox="0 0 260 260" xml:space="preserve">
|
||
<circle fill="#ffc107" cx="130" cy="130" r="130"/>
|
||
</svg>
|
||
</figure>
|
||
<!-- End SVG Elements -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card h-100 shadow-none zi-1">
|
||
<div class="card-header text-center">
|
||
<div class="mb-2">
|
||
<span class="fs-5 align-top text-dark fw-semi-bold">$</span>
|
||
<span id="pricingCount3" class="fs-1 text-dark fw-semi-bold"
|
||
data-hs-toggle-switch-item-options='{
|
||
"min": 69,
|
||
"max": 59
|
||
}'>59</span>
|
||
<span>/mo</span>
|
||
</div>
|
||
|
||
<h3 class="card-title">Enterprise</h3>
|
||
<p class="card-text">Advanced features for scaling your business</p>
|
||
</div>
|
||
|
||
<div class="card-body d-flex justify-content-center py-0">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">Unlimited users</li>
|
||
<li class="list-checked-item">Front plan features</li>
|
||
<li class="list-checked-item">Unlimited apps</li>
|
||
<li class="list-checked-item">Product support</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
|
||
<div class="card-footer text-center">
|
||
<div class="d-grid mb-2">
|
||
<button type="button" class="btn btn-ghost-primary">Try free for 30 days</button>
|
||
</div>
|
||
<p class="card-text text-muted small">No card required</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Pricing -->
|
||
<div class="overflow-hidden">
|
||
<div class="container">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 text-center mx-md-auto mb-9">
|
||
<h2 class="h1">Flexible and transparent pricing</h2>
|
||
<p>Whatever your status, our offers evolve according to your needs.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Form Switch -->
|
||
<div class="d-flex justify-content-center mb-5">
|
||
<div class="form-check form-switch form-switch-between">
|
||
<label class="form-check-label">Monthly</label>
|
||
<input class="js-toggle-switch form-check-input" type="checkbox"
|
||
data-hs-toggle-switch-options='{
|
||
"targetSelector": "#pricingCount1, #pricingCount2, #pricingCount3"
|
||
}'>
|
||
<label class="form-check-label form-switch-promotion">
|
||
Annually
|
||
<span class="form-switch-promotion-container">
|
||
<span class="form-switch-promotion-body">
|
||
<svg class="form-switch-promotion-arrow" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
|
||
</svg>
|
||
<span class="form-switch-promotion-text">
|
||
<span class="badge bg-primary rounded-pill ms-1">Save up to 10%</span>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- End Form Switch -->
|
||
|
||
<div class="row mb-7">
|
||
<div class="col-md mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card h-100 shadow-none zi-1">
|
||
<div class="card-header text-center">
|
||
<div class="mb-2">
|
||
<span class="fs-5 align-top text-dark fw-semi-bold">$</span>
|
||
<span class="fs-1 text-dark fw-semi-bold">19</span>
|
||
<span>/mo</span>
|
||
</div>
|
||
|
||
<h3 class="card-title">Professional</h3>
|
||
<p class="card-text">All the basics for starting a new business</p>
|
||
</div>
|
||
|
||
<div class="card-body d-flex justify-content-center py-0">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">1 user</li>
|
||
<li class="list-checked-item">Front plan features</li>
|
||
<li class="list-checked-item">1 app</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
|
||
<div class="card-footer text-center">
|
||
<div class="d-grid mb-2">
|
||
<button type="button" class="btn btn-ghost-primary">Try free for 30 days</button>
|
||
</div>
|
||
<p class="card-text text-muted small">No card required</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md mb-3 mb-md-0">
|
||
<div class="position-relative">
|
||
<!-- Card -->
|
||
<div class="card h-100 zi-1">
|
||
<div class="card-header text-center">
|
||
<div class="mb-2">
|
||
<span class="fs-5 align-top text-dark fw-semi-bold">$</span>
|
||
<span id="pricingCount2" class="fs-1 text-dark fw-semi-bold"
|
||
data-hs-toggle-switch-item-options='{
|
||
"min": 49,
|
||
"max": 39
|
||
}'>39</span>
|
||
<span>/mo</span>
|
||
</div>
|
||
|
||
<h3 class="card-title">Team</h3>
|
||
<p class="card-text">Everything you need for a growing business</p>
|
||
</div>
|
||
|
||
<div class="card-body d-flex justify-content-center py-0">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">3 users</li>
|
||
<li class="list-checked-item">Front plan features</li>
|
||
<li class="list-checked-item">3 apps</li>
|
||
<li class="list-checked-item">Product support</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
|
||
<div class="card-footer text-center">
|
||
<div class="d-grid mb-2">
|
||
<button type="button" class="btn btn-primary">Try free for 30 days</button>
|
||
</div>
|
||
<p class="card-text text-muted small">No card required</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- SVG Elements -->
|
||
<figure class="position-absolute bottom-0 start-0 mb-n7 ms-n7" style="width: 9rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
|
||
</figure>
|
||
|
||
<figure class="position-absolute top-0 end-0 mt-n7 me-n7" style="width: 7rem;">
|
||
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||
viewBox="0 0 260 260" xml:space="preserve">
|
||
<circle fill="#ffc107" cx="130" cy="130" r="130"/>
|
||
</svg>
|
||
</figure>
|
||
<!-- End SVG Elements -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card h-100 shadow-none zi-1">
|
||
<div class="card-header text-center">
|
||
<div class="mb-2">
|
||
<span class="fs-5 align-top text-dark fw-semi-bold">$</span>
|
||
<span id="pricingCount3" class="fs-1 text-dark fw-semi-bold"
|
||
data-hs-toggle-switch-item-options='{
|
||
"min": 69,
|
||
"max": 59
|
||
}'>59</span>
|
||
<span>/mo</span>
|
||
</div>
|
||
|
||
<h3 class="card-title">Enterprise</h3>
|
||
<p class="card-text">Advanced features for scaling your business</p>
|
||
</div>
|
||
|
||
<div class="card-body d-flex justify-content-center py-0">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">Unlimited users</li>
|
||
<li class="list-checked-item">Front plan features</li>
|
||
<li class="list-checked-item">Unlimited apps</li>
|
||
<li class="list-checked-item">Product support</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
|
||
<div class="card-footer text-center">
|
||
<div class="d-grid mb-2">
|
||
<button type="button" class="btn btn-ghost-primary">Try free for 30 days</button>
|
||
</div>
|
||
<p class="card-text text-muted small">No card required</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js1" role="tabpanel" aria-labelledby="nav-jsTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/vendor/hs-toggle-switch/dist/hs-toggle-switch.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF TOGGLE SWITCH
|
||
// =======================================================
|
||
new HSToggleSwitch('.js-toggle-switch')
|
||
})()
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-2" class="hs-docs-heading">
|
||
Component #2 <a class="anchorjs-link" href="#component-2" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab2" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab2" href="#nav-result2" data-bs-toggle="pill" data-bs-target="#nav-result2" role="tab" aria-controls="nav-result2" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab2" href="#nav-html2" data-bs-toggle="pill" data-bs-target="#nav-html2" role="tab" aria-controls="nav-html2" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-cssTab2" href="#nav-css2" data-bs-toggle="pill" data-bs-target="#nav-css2" role="tab" aria-controls="nav-css2" aria-selected="false">CSS</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab2" href="#nav-js2" data-bs-toggle="pill" data-bs-target="#nav-js2" role="tab" aria-controls="nav-js2" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent2">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result2" role="tabpanel" aria-labelledby="nav-resultTab2">
|
||
<!-- Pricing -->
|
||
<div class="bg-light overflow-hidden">
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Pricing</span>
|
||
<h2 class="h1">Pick the best plan based on your ad spend</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="position-relative">
|
||
<div class="row gx-0 align-items-md-center">
|
||
<div class="col-md-6 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card card-lg zi-2" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<form>
|
||
<!-- Radio Button Group -->
|
||
<div class="text-center mb-5">
|
||
<div class="btn-group btn-group-segment btn-group-pills" role="group" aria-label="Pricing radio button group">
|
||
<input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked
|
||
data-hs-switch-text-options='{
|
||
"target": [{
|
||
"selector": "#rangeSliderResult",
|
||
"text": 500
|
||
}, {
|
||
"selector": "#rangeSliderSecondaryResult",
|
||
"text": 50000
|
||
}],
|
||
"startUpdateOnChange": true
|
||
}'>
|
||
<label class="js-toggle-switch btn btn-sm" for="btnradio1">
|
||
Monthly
|
||
</label>
|
||
|
||
<input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio2" autocomplete="off"
|
||
data-hs-switch-text-options='{
|
||
"target": [{
|
||
"selector": "#rangeSliderResult",
|
||
"text": 475
|
||
}, {
|
||
"selector": "#rangeSliderSecondaryResult",
|
||
"text": 25000
|
||
}],
|
||
"startUpdateOnChange": true
|
||
}'>
|
||
<label class="js-toggle-switch btn btn-sm" for="btnradio2">
|
||
<span class="form-switch-promotion">
|
||
Annually
|
||
|
||
<!-- Form Switch Promotion -->
|
||
<span class="form-switch-promotion-container">
|
||
<span class="form-switch-promotion-body">
|
||
<svg class="form-switch-promotion-arrow" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
|
||
</svg>
|
||
<span class="form-switch-promotion-text">
|
||
<span class="badge bg-primary rounded-pill ms-1">Save up to 10%</span>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<!-- End Form Switch Promotion -->
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- End Radio Button Group -->
|
||
|
||
<!-- Range Slider -->
|
||
<div class="display-4 text-dark text-center">
|
||
$<span id="rangeSliderResult"></span>/mo
|
||
</div>
|
||
<div class="d-flex justify-content-center mb-5">
|
||
Maximum ad spend:
|
||
<span class="text-primary ms-1">$<span id="rangeSliderSecondaryResult">50000</span>/mo</span>
|
||
</div>
|
||
<!-- End Range Slider -->
|
||
</form>
|
||
|
||
<div class="text-center mb-5">
|
||
<div class="range-slider">
|
||
<div class="js-nouislider"
|
||
data-hs-nouislider-options='{
|
||
"range": {
|
||
"min": 250,
|
||
"max": 720
|
||
},
|
||
"connect": [true, false],
|
||
"start": 500,
|
||
"result_min_target_el": "#rangeSliderResult"
|
||
}'>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary mb-0">
|
||
<li class="list-checked-item">All features</li>
|
||
<li class="list-checked-item">Email support</li>
|
||
<li class="list-checked-item">Google ads</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary mb-0">
|
||
<li class="list-checked-item">SSO via Google</li>
|
||
<li class="list-checked-item">API access</li>
|
||
<li class="list-checked-item">Facebook ads</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<a class="card-footer card-link bg-light text-center" href="#">Start free 14-day trial <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6">
|
||
<!-- Card -->
|
||
<div class="card card-lg bg-dark text-center ms-md-n2" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-white mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.1671 18.1421C22.4827 18.4577 23.0222 18.2331 23.0206 17.7868L23.0039 13.1053V5.52632C23.0039 4.13107 21.8729 3 20.4776 3H8.68815C7.2929 3 6.16183 4.13107 6.16183 5.52632V9H13C14.6568 9 16 10.3431 16 12V15.6316H19.6565L22.1671 18.1421Z" fill="#035A4B"/>
|
||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M1.98508 18V13C1.98508 11.8954 2.88051 11 3.98508 11H11.9851C13.0896 11 13.9851 11.8954 13.9851 13V18C13.9851 19.1046 13.0896 20 11.9851 20H4.10081L2.85695 21.1905C2.53895 21.4949 2.01123 21.2695 2.01123 20.8293V18.3243C1.99402 18.2187 1.98508 18.1104 1.98508 18ZM5.99999 14.5C5.99999 14.2239 6.22385 14 6.49999 14H11.5C11.7761 14 12 14.2239 12 14.5C12 14.7761 11.7761 15 11.5 15H6.49999C6.22385 15 5.99999 14.7761 5.99999 14.5ZM9.49999 16C9.22385 16 8.99999 16.2239 8.99999 16.5C8.99999 16.7761 9.22385 17 9.49999 17H11.5C11.7761 17 12 16.7761 12 16.5C12 16.2239 11.7761 16 11.5 16H9.49999Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h2 class="card-title text-white">Customized</h2>
|
||
<p class="card-text text-white">Design a custom package for your business.</p>
|
||
<p class="card-text text-white-70">Available for businesses with large payments volume or unique business models.</p>
|
||
</div>
|
||
|
||
<a class="card-footer card-link text-white" href="#">Contact sales <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 start-0 d-none d-lg-block" style="width: 10rem; margin-left: -10rem;">
|
||
<img class="img-fluid" src="../assets/svg/illustrations/oc-peeking.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Pricing -->
|
||
<div class="bg-light overflow-hidden">
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Pricing</span>
|
||
<h2 class="h1">Pick the best plan based on your ad spend</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="position-relative">
|
||
<div class="row gx-0 align-items-md-center">
|
||
<div class="col-md-6 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card card-lg zi-2" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<form>
|
||
<!-- Radio Button Group -->
|
||
<div class="text-center mb-5">
|
||
<div class="btn-group btn-group-segment btn-group-pills" role="group" aria-label="Pricing radio button group">
|
||
<input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked
|
||
data-hs-switch-text-options='{
|
||
"target": [{
|
||
"selector": "#rangeSliderResult",
|
||
"text": 500
|
||
}, {
|
||
"selector": "#rangeSliderSecondaryResult",
|
||
"text": 50000
|
||
}],
|
||
"startUpdateOnChange": true
|
||
}'>
|
||
<label class="js-toggle-switch btn btn-sm" for="btnradio1">
|
||
Monthly
|
||
</label>
|
||
|
||
<input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio2" autocomplete="off"
|
||
data-hs-switch-text-options='{
|
||
"target": [{
|
||
"selector": "#rangeSliderResult",
|
||
"text": 475
|
||
}, {
|
||
"selector": "#rangeSliderSecondaryResult",
|
||
"text": 25000
|
||
}],
|
||
"startUpdateOnChange": true
|
||
}'>
|
||
<label class="js-toggle-switch btn btn-sm" for="btnradio2">
|
||
<span class="form-switch-promotion">
|
||
Annually
|
||
|
||
<!-- Form Switch Promotion -->
|
||
<span class="form-switch-promotion-container">
|
||
<span class="form-switch-promotion-body">
|
||
<svg class="form-switch-promotion-arrow" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
|
||
</svg>
|
||
<span class="form-switch-promotion-text">
|
||
<span class="badge bg-primary rounded-pill ms-1">Save up to 10%</span>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<!-- End Form Switch Promotion -->
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- End Radio Button Group -->
|
||
|
||
<!-- Range Slider -->
|
||
<div class="display-4 text-dark text-center">
|
||
$<span id="rangeSliderResult"></span>/mo
|
||
</div>
|
||
<div class="d-flex justify-content-center mb-5">
|
||
Maximum ad spend:
|
||
<span class="text-primary ms-1">$<span id="rangeSliderSecondaryResult">50000</span>/mo</span>
|
||
</div>
|
||
<!-- End Range Slider -->
|
||
</form>
|
||
|
||
<div class="text-center mb-5">
|
||
<div class="range-slider">
|
||
<div class="js-nouislider"
|
||
data-hs-nouislider-options='{
|
||
"range": {
|
||
"min": 250,
|
||
"max": 720
|
||
},
|
||
"connect": [true, false],
|
||
"start": 500,
|
||
"result_min_target_el": "#rangeSliderResult"
|
||
}'>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary mb-0">
|
||
<li class="list-checked-item">All features</li>
|
||
<li class="list-checked-item">Email support</li>
|
||
<li class="list-checked-item">Google ads</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary mb-0">
|
||
<li class="list-checked-item">SSO via Google</li>
|
||
<li class="list-checked-item">API access</li>
|
||
<li class="list-checked-item">Facebook ads</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<a class="card-footer card-link bg-light text-center" href="#">Start free 14-day trial <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6">
|
||
<!-- Card -->
|
||
<div class="card card-lg bg-dark text-center ms-md-n2" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-white mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.1671 18.1421C22.4827 18.4577 23.0222 18.2331 23.0206 17.7868L23.0039 13.1053V5.52632C23.0039 4.13107 21.8729 3 20.4776 3H8.68815C7.2929 3 6.16183 4.13107 6.16183 5.52632V9H13C14.6568 9 16 10.3431 16 12V15.6316H19.6565L22.1671 18.1421Z" fill="#035A4B"/>
|
||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M1.98508 18V13C1.98508 11.8954 2.88051 11 3.98508 11H11.9851C13.0896 11 13.9851 11.8954 13.9851 13V18C13.9851 19.1046 13.0896 20 11.9851 20H4.10081L2.85695 21.1905C2.53895 21.4949 2.01123 21.2695 2.01123 20.8293V18.3243C1.99402 18.2187 1.98508 18.1104 1.98508 18ZM5.99999 14.5C5.99999 14.2239 6.22385 14 6.49999 14H11.5C11.7761 14 12 14.2239 12 14.5C12 14.7761 11.7761 15 11.5 15H6.49999C6.22385 15 5.99999 14.7761 5.99999 14.5ZM9.49999 16C9.22385 16 8.99999 16.2239 8.99999 16.5C8.99999 16.7761 9.22385 17 9.49999 17H11.5C11.7761 17 12 16.7761 12 16.5C12 16.2239 11.7761 16 11.5 16H9.49999Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h2 class="card-title text-white">Customized</h2>
|
||
<p class="card-text text-white">Design a custom package for your business.</p>
|
||
<p class="card-text text-white-70">Available for businesses with large payments volume or unique business models.</p>
|
||
</div>
|
||
|
||
<a class="card-footer card-link text-white" href="#">Contact sales <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 start-0 d-none d-lg-block" style="width: 10rem; margin-left: -10rem;">
|
||
<img class="img-fluid" src="../assets/svg/illustrations/oc-peeking.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-css2" role="tabpanel" aria-labelledby="nav-cssTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<link rel="stylesheet" href="../node_modules/nouislider/dist/nouislider.min.css">
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js2" role="tabpanel" aria-labelledby="nav-jsTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
|
||
<script src="../node_modules/nouislider/dist/nouislider.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="../assets/js/hs.nouislider.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF SWITCH TEXT
|
||
// =======================================================
|
||
new HSSwitchText('.js-switch-text', {
|
||
afterChange() {
|
||
document.querySelector('.js-nouislider').noUiSlider.set([this.target[0].text])
|
||
}
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF NOUISLIDER
|
||
// =======================================================
|
||
HSCore.components.HSNoUISlider.init(document.querySelector('.js-nouislider'))
|
||
const slider = HSCore.components.HSNoUISlider.getItem(0)
|
||
|
||
slider.on('change', function (val) {
|
||
const input = document.querySelector('.js-switch-text:checked'),
|
||
defData = JSON.parse(input.getAttribute('data-hs-switch-text-options'))
|
||
|
||
defData.target[0].text = val[0]
|
||
input.setAttribute('data-hs-switch-text-options', JSON.stringify(defData))
|
||
})
|
||
})()
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-3" class="hs-docs-heading">
|
||
Component #3 <a class="anchorjs-link" href="#component-3" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent3">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
||
<!-- Pricing -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-5 mb-md-9">
|
||
<h2>Always know what you'll pay.</h2>
|
||
<p>Once you're setup, instantly withdraw payments or deposit into your bank account within 2-3 business days.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row gx-0 align-items-lg-center mb-7 mb-md-10">
|
||
<div class="col-lg-7">
|
||
<!-- Card -->
|
||
<div class="card card-lg text-center zi-2" data-aos="fade-up">
|
||
<div class="card-header pb-0">
|
||
<div class="mb-1">
|
||
<span class="display-4 text-primary">1.5%</span>
|
||
<span class="badge bg-dark rounded-pill align-top ms-1">+0.5 USD</span>
|
||
</div>
|
||
<p>per successful transaction</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="row justify-content-sm-center align-items-sm-center mb-5">
|
||
<div class="col-sm-5">
|
||
<div class="mb-2">
|
||
<img class="avatar avatr-xl avatar-4x3" src="../assets/svg/illustrations/account-creation.svg" alt="SVG">
|
||
</div>
|
||
|
||
<h4>Account creation</h4>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-1 my-3 my-sm-0">
|
||
<span class="fs-3 text-primary">+</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-5">
|
||
<div class="mb-2">
|
||
<img class="avatar avatr-xl avatar-4x3" src="../assets/svg/illustrations/pro-account.svg" alt="SVG">
|
||
</div>
|
||
|
||
<h4>Professional account</h4>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<div class="mb-7">
|
||
<p class="card-text small">Included for 3 months,<br>then $2.5/monthly included VAT</p>
|
||
</div>
|
||
|
||
<button type="button" class="btn btn-primary btn-transition px-6">Get started</button>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-5">
|
||
<!-- Card -->
|
||
<div class="card card-lg bg-dark ms-md-n2" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="card-body">
|
||
<!-- List Checked -->
|
||
<ul class="list-pointer list-pointer-soft-bg-light list-pointer-lg">
|
||
<li class="list-pointer-item">
|
||
<h4 class="text-white mb-1">135+ currencies</h4>
|
||
<p class="text-white-70 mb-0">Process charges and display prices in your customer's.</p>
|
||
</li>
|
||
|
||
<li class="list-pointer-item">
|
||
<h4 class="text-white mb-1">Global support</h4>
|
||
<p class="text-white-70 mb-0">Businesses in 25+ countries can accept payments.</p>
|
||
</li>
|
||
|
||
<li class="list-pointer-item">
|
||
<h4 class="text-white mb-1">Secure payment info collection</h4>
|
||
<p class="text-white-70 mb-0">Use our libraries to collect payment information without sensitive data.</p>
|
||
</li>
|
||
|
||
<li class="list-pointer-item">
|
||
<h4 class="text-white mb-1">Over 10 million customers</h4>
|
||
<p class="text-white-70 mb-0">We’re on average 8x cheaper than leading world high street banks.</p>
|
||
</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- CTA -->
|
||
<div class="w-lg-75 mx-lg-auto">
|
||
<div class="d-block d-sm-flex align-items-sm-center">
|
||
<div class="flex-shrink-0 mb-3 mb-sm-0">
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/illustrations/growing-business.svg" alt="SVG">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4>Grow your business with Front Pay</h4>
|
||
<p class="mb-0">From startups to Fortune 500s, explore how millions of businesses use Front Pay to start and scale their companies. <a class="link" href="#">See our customers <i class="bi-chevron-right small"></i></a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End CTA -->
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Pricing -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-5 mb-md-9">
|
||
<h2>Always know what you'll pay.</h2>
|
||
<p>Once you're setup, instantly withdraw payments or deposit into your bank account within 2-3 business days.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row gx-0 align-items-lg-center mb-7 mb-md-10">
|
||
<div class="col-lg-7">
|
||
<!-- Card -->
|
||
<div class="card card-lg text-center zi-2" data-aos="fade-up">
|
||
<div class="card-header pb-0">
|
||
<div class="mb-1">
|
||
<span class="display-4 text-primary">1.5%</span>
|
||
<span class="badge bg-dark rounded-pill align-top ms-1">+0.5 USD</span>
|
||
</div>
|
||
<p>per successful transaction</p>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="row justify-content-sm-center align-items-sm-center mb-5">
|
||
<div class="col-sm-5">
|
||
<div class="mb-2">
|
||
<img class="avatar avatr-xl avatar-4x3" src="../assets/svg/illustrations/account-creation.svg" alt="SVG">
|
||
</div>
|
||
|
||
<h4>Account creation</h4>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-1 my-3 my-sm-0">
|
||
<span class="fs-3 text-primary">+</span>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-5">
|
||
<div class="mb-2">
|
||
<img class="avatar avatr-xl avatar-4x3" src="../assets/svg/illustrations/pro-account.svg" alt="SVG">
|
||
</div>
|
||
|
||
<h4>Professional account</h4>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<div class="mb-7">
|
||
<p class="card-text small">Included for 3 months,<br>then $2.5/monthly included VAT</p>
|
||
</div>
|
||
|
||
<button type="button" class="btn btn-primary btn-transition px-6">Get started</button>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-5">
|
||
<!-- Card -->
|
||
<div class="card card-lg bg-dark ms-md-n2" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="card-body">
|
||
<!-- List Checked -->
|
||
<ul class="list-pointer list-pointer-soft-bg-light list-pointer-lg">
|
||
<li class="list-pointer-item">
|
||
<h4 class="text-white mb-1">135+ currencies</h4>
|
||
<p class="text-white-70 mb-0">Process charges and display prices in your customer's.</p>
|
||
</li>
|
||
|
||
<li class="list-pointer-item">
|
||
<h4 class="text-white mb-1">Global support</h4>
|
||
<p class="text-white-70 mb-0">Businesses in 25+ countries can accept payments.</p>
|
||
</li>
|
||
|
||
<li class="list-pointer-item">
|
||
<h4 class="text-white mb-1">Secure payment info collection</h4>
|
||
<p class="text-white-70 mb-0">Use our libraries to collect payment information without sensitive data.</p>
|
||
</li>
|
||
|
||
<li class="list-pointer-item">
|
||
<h4 class="text-white mb-1">Over 10 million customers</h4>
|
||
<p class="text-white-70 mb-0">We’re on average 8x cheaper than leading world high street banks.</p>
|
||
</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- CTA -->
|
||
<div class="w-lg-75 mx-lg-auto">
|
||
<div class="d-block d-sm-flex align-items-sm-center">
|
||
<div class="flex-shrink-0 mb-3 mb-sm-0">
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/illustrations/growing-business.svg" alt="SVG">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4>Grow your business with Front Pay</h4>
|
||
<p class="mb-0">From startups to Fortune 500s, explore how millions of businesses use Front Pay to start and scale their companies. <a class="link" href="#">See our customers <i class="bi-chevron-right small"></i></a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End CTA -->
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-4" class="hs-docs-heading">
|
||
Component #4 <a class="anchorjs-link" href="#component-4" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab4" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab4" href="#nav-result4" data-bs-toggle="pill" data-bs-target="#nav-result4" role="tab" aria-controls="nav-result4" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab4" href="#nav-html4" data-bs-toggle="pill" data-bs-target="#nav-html4" role="tab" aria-controls="nav-html4" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent4">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result4" role="tabpanel" aria-labelledby="nav-resultTab4">
|
||
<!-- Pricing -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2>Choose a plan that's right for you.</h2>
|
||
<p>Everything you need. From front to back.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Table -->
|
||
<div class="table-responsive-lg w-lg-75 mx-lg-auto">
|
||
<table class="table table-lg table-striped table-borderless table-nowrap table-vertical-border-striped">
|
||
<thead class="table-text-center">
|
||
<tr>
|
||
<th scope="col" style="width: 40%;"></th>
|
||
|
||
<th scope="col" style="width: 20%;">
|
||
<span class="d-block">Professional</span>
|
||
<span class="d-block text-muted small">$0/mon</span>
|
||
</th>
|
||
|
||
<th scope="col" style="width: 20%;">
|
||
<span class="d-block">Team <span class="badge bg-warning text-dark rounded-pill ms-1">Hot</span></span>
|
||
<span class="d-block text-muted small">$60/mon</span>
|
||
</th>
|
||
|
||
<th scope="col" style="width: 20%;">
|
||
<span class="d-block">Enterprise</span>
|
||
<span class="d-block text-muted small">Custom</span>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row" class="text-dark">Cross-platform UI toolkit</th>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">14-days free trial</th>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">No user limit</th>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Long-term support</th>
|
||
<td></td>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Email support</th>
|
||
<td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Developer tools</th>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Removal of Front branding</th>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Active maintenance & support</th>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Data storage for 365 days</th>
|
||
<td></td>
|
||
<td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark"></th>
|
||
<td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
|
||
<td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
|
||
<td><button type="button" class="btn btn-primary btn-sm btn-transition">Contact us</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Pricing -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2>Choose a plan that's right for you.</h2>
|
||
<p>Everything you need. From front to back.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Table -->
|
||
<div class="table-responsive-lg w-lg-75 mx-lg-auto">
|
||
<table class="table table-lg table-striped table-borderless table-nowrap table-vertical-border-striped">
|
||
<thead class="table-text-center">
|
||
<tr>
|
||
<th scope="col" style="width: 40%;"></th>
|
||
|
||
<th scope="col" style="width: 20%;">
|
||
<span class="d-block">Professional</span>
|
||
<span class="d-block text-muted small">$0/mon</span>
|
||
</th>
|
||
|
||
<th scope="col" style="width: 20%;">
|
||
<span class="d-block">Team <span class="badge bg-warning text-dark rounded-pill ms-1">Hot</span></span>
|
||
<span class="d-block text-muted small">$60/mon</span>
|
||
</th>
|
||
|
||
<th scope="col" style="width: 20%;">
|
||
<span class="d-block">Enterprise</span>
|
||
<span class="d-block text-muted small">Custom</span>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row" class="text-dark">Cross-platform UI toolkit</th>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">14-days free trial</th>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">No user limit</th>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Long-term support</th>
|
||
<td></td>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Email support</th>
|
||
<td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Developer tools</th>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Removal of Front branding</th>
|
||
<td></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Active maintenance & support</th>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark">Data storage for 365 days</th>
|
||
<td></td>
|
||
<td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
|
||
<td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row" class="text-dark"></th>
|
||
<td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
|
||
<td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
|
||
<td><button type="button" class="btn btn-primary btn-sm btn-transition">Contact us</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-5" class="hs-docs-heading">
|
||
Component #5 <a class="anchorjs-link" href="#component-5" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab5" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab5" href="#nav-result5" data-bs-toggle="pill" data-bs-target="#nav-result5" role="tab" aria-controls="nav-result5" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab5" href="#nav-html5" data-bs-toggle="pill" data-bs-target="#nav-html5" role="tab" aria-controls="nav-html5" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent5">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result5" role="tabpanel" aria-labelledby="nav-resultTab5">
|
||
<!-- Pricing -->
|
||
<div class="container">
|
||
<!-- Heading -->
|
||
<div class="w-lg-75 text-center mx-auto mb-5 mb-sm-9">
|
||
<h2 class="h1">Scalable plans</h2>
|
||
<p>All kinds of plans that scale with your user growth</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="w-lg-75 mx-lg-auto">
|
||
<div class="row align-items-sm-end gx-3 mb-5 mb-md-7">
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card card-bordered shadow-none" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="card-header text-center pb-0">
|
||
<span class="svg-icon svg-icon-sm text-primary mb-3">
|
||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.85" d="M15.9999 25.6C21.3018 25.6 25.5999 21.302 25.5999 16C25.5999 10.6981 21.3018 6.40002 15.9999 6.40002C10.698 6.40002 6.3999 10.6981 6.3999 16C6.3999 21.302 10.698 25.6 15.9999 25.6Z" fill="#377dff"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Starter</h4>
|
||
<h3 class="card-title">Free</h3>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">Community support</li>
|
||
<li class="list-checked-item">400+ pages</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<div class="d-grid">
|
||
<button type="button" class="btn btn-primary btn-sm btn-transition">Create account</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card card-bordered shadow-none" data-aos="fade-up" data-aos-delay="50">
|
||
<div class="card-header text-center pb-0">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.85" d="M28 44.8C37.2783 44.8 44.7999 37.2784 44.7999 28C44.7999 18.7216 37.2783 11.2 28 11.2C18.7216 11.2 11.2 18.7216 11.2 28C11.2 37.2784 18.7216 44.8 28 44.8Z" fill="#377dff"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Individual</h4>
|
||
<h3 class="card-title">$59</h3>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">Community support</li>
|
||
<li class="list-checked-item">400+ pages</li>
|
||
<li class="list-checked-item">100+ header variations</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<div class="d-grid">
|
||
<button type="button" class="btn btn-primary btn-sm btn-transition">Try free for 14-days</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4">
|
||
<!-- Card -->
|
||
<div class="card card-bordered shadow-none" data-aos="fade-up">
|
||
<div class="card-header text-center pb-0">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g clip-path="url(#clip0)">
|
||
<path opacity="0.85" d="M9.6 20.2C14.9019 20.2 19.2 15.9019 19.2 10.6C19.2 5.29807 14.9019 1 9.6 1C4.29807 1 0 5.29807 0 10.6C0 15.9019 4.29807 20.2 9.6 20.2Z" fill="#377dff"/>
|
||
<path opacity="0.85" d="M22.4 20.2C27.702 20.2 32 15.9019 32 10.6C32 5.29807 27.702 1 22.4 1C17.0981 1 12.8 5.29807 12.8 10.6C12.8 15.9019 17.0981 20.2 22.4 20.2Z" fill="#377dff"/>
|
||
<path opacity="0.85" d="M16.2001 31C21.502 31 25.8001 26.7019 25.8001 21.4C25.8001 16.0981 21.502 11.8 16.2001 11.8C10.8982 11.8 6.6001 16.0981 6.6001 21.4C6.6001 26.7019 10.8982 31 16.2001 31Z" fill="#377dff"/>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0">
|
||
<rect width="32" height="32" fill="white"/>
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Enterprise</h4>
|
||
<h3 class="card-title">$599</h3>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">Community support</li>
|
||
<li class="list-checked-item">400+ pages</li>
|
||
<li class="list-checked-item">100+ header variations</li>
|
||
<li class="list-checked-item">20+ home page options</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<div class="d-grid">
|
||
<button type="button" class="btn btn-primary btn-sm btn-transition">Try free for 14-days</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Card Info -->
|
||
<div class="text-center" data-aos="fade-up">
|
||
<div class="card card-info-link card-sm">
|
||
<div class="card-body">
|
||
Need custom plan? <a class="card-link ms-2" href="#">Contact us <span class="bi-chevron-right small ms-1"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Info -->
|
||
</div>
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html5" role="tabpanel" aria-labelledby="nav-htmlTab5">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Pricing -->
|
||
<div class="container">
|
||
<!-- Heading -->
|
||
<div class="w-lg-75 text-center mx-auto mb-5 mb-sm-9">
|
||
<h2 class="h1">Scalable plans</h2>
|
||
<p>All kinds of plans that scale with your user growth</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="w-lg-75 mx-lg-auto">
|
||
<div class="row align-items-sm-end gx-3 mb-5 mb-md-7">
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card card-bordered shadow-none" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="card-header text-center pb-0">
|
||
<span class="svg-icon svg-icon-sm text-primary mb-3">
|
||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.85" d="M15.9999 25.6C21.3018 25.6 25.5999 21.302 25.5999 16C25.5999 10.6981 21.3018 6.40002 15.9999 6.40002C10.698 6.40002 6.3999 10.6981 6.3999 16C6.3999 21.302 10.698 25.6 15.9999 25.6Z" fill="#377dff"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Starter</h4>
|
||
<h3 class="card-title">Free</h3>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">Community support</li>
|
||
<li class="list-checked-item">400+ pages</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<div class="d-grid">
|
||
<button type="button" class="btn btn-primary btn-sm btn-transition">Create account</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card card-bordered shadow-none" data-aos="fade-up" data-aos-delay="50">
|
||
<div class="card-header text-center pb-0">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.85" d="M28 44.8C37.2783 44.8 44.7999 37.2784 44.7999 28C44.7999 18.7216 37.2783 11.2 28 11.2C18.7216 11.2 11.2 18.7216 11.2 28C11.2 37.2784 18.7216 44.8 28 44.8Z" fill="#377dff"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Individual</h4>
|
||
<h3 class="card-title">$59</h3>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">Community support</li>
|
||
<li class="list-checked-item">400+ pages</li>
|
||
<li class="list-checked-item">100+ header variations</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<div class="d-grid">
|
||
<button type="button" class="btn btn-primary btn-sm btn-transition">Try free for 14-days</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4">
|
||
<!-- Card -->
|
||
<div class="card card-bordered shadow-none" data-aos="fade-up">
|
||
<div class="card-header text-center pb-0">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g clip-path="url(#clip0)">
|
||
<path opacity="0.85" d="M9.6 20.2C14.9019 20.2 19.2 15.9019 19.2 10.6C19.2 5.29807 14.9019 1 9.6 1C4.29807 1 0 5.29807 0 10.6C0 15.9019 4.29807 20.2 9.6 20.2Z" fill="#377dff"/>
|
||
<path opacity="0.85" d="M22.4 20.2C27.702 20.2 32 15.9019 32 10.6C32 5.29807 27.702 1 22.4 1C17.0981 1 12.8 5.29807 12.8 10.6C12.8 15.9019 17.0981 20.2 22.4 20.2Z" fill="#377dff"/>
|
||
<path opacity="0.85" d="M16.2001 31C21.502 31 25.8001 26.7019 25.8001 21.4C25.8001 16.0981 21.502 11.8 16.2001 11.8C10.8982 11.8 6.6001 16.0981 6.6001 21.4C6.6001 26.7019 10.8982 31 16.2001 31Z" fill="#377dff"/>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0">
|
||
<rect width="32" height="32" fill="white"/>
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Enterprise</h4>
|
||
<h3 class="card-title">$599</h3>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<ul class="list-checked list-checked-primary">
|
||
<li class="list-checked-item">Community support</li>
|
||
<li class="list-checked-item">400+ pages</li>
|
||
<li class="list-checked-item">100+ header variations</li>
|
||
<li class="list-checked-item">20+ home page options</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<div class="d-grid">
|
||
<button type="button" class="btn btn-primary btn-sm btn-transition">Try free for 14-days</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Card Info -->
|
||
<div class="text-center" data-aos="fade-up">
|
||
<div class="card card-info-link card-sm">
|
||
<div class="card-body">
|
||
Need custom plan? <a class="card-link ms-2" href="#">Contact us <span class="bi-chevron-right small ms-1"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Info -->
|
||
</div>
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-6" class="hs-docs-heading">
|
||
Component #6 <a class="anchorjs-link" href="#component-6" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab6" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab6" href="#nav-result6" data-bs-toggle="pill" data-bs-target="#nav-result6" role="tab" aria-controls="nav-result6" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab6" href="#nav-html6" data-bs-toggle="pill" data-bs-target="#nav-html6" role="tab" aria-controls="nav-html6" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent6">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result6" role="tabpanel" aria-labelledby="nav-resultTab6">
|
||
<!-- Pricing -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="h1">Pricing</h2>
|
||
<p>No additional costs. Pay for what you use.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row align-items-lg-center">
|
||
<div class="col-sm-6 col-lg-5 mb-9 mb-sm-0">
|
||
<!-- Pricing -->
|
||
<div class="card zi-2" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<!-- Radio Button Group -->
|
||
<div class="text-center mb-5">
|
||
<div class="btn-group btn-group-segment" role="group" aria-label="Pricing radio button group">
|
||
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
||
<label class="btn btn-sm" for="btnradio1">Monthly</label>
|
||
|
||
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
||
<label class="btn btn-sm disabled" for="btnradio2">
|
||
<span class="form-switch-promotion">Annually
|
||
|
||
<!-- Form Switch Promotion -->
|
||
<span class="form-switch-promotion-container">
|
||
<span class="form-switch-promotion-body">
|
||
<svg class="form-switch-promotion-arrow" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
|
||
</svg>
|
||
<span class="form-switch-promotion-text">
|
||
<span class="badge bg-primary rounded-pill ms-1">Coming soon</span>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<!-- End Form Switch Promotion -->
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- End Radio Button Group -->
|
||
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-end">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-money-profits.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="text-dark">
|
||
<span class="fs-5 align-top text-dark fw-semi-bold">$</span>
|
||
<span class="display-3 text-dark fw-semi-bold">19</span>
|
||
<span>/mo</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
|
||
<hr class="my-4">
|
||
|
||
<div class="mb-5">
|
||
<p>Start your Front business now. 100% guaranteed money back. No questions asked.</p>
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<a class="btn btn-primary btn-transition" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">Get started</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-7">
|
||
<div class="ps-sm-6">
|
||
<div class="row">
|
||
<div class="col-sm-12 col-lg-6 mb-3" data-aos="fade-up" data-aos-delay="100">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="#035A4B"/>
|
||
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Hundreds of components</h4>
|
||
<p>Achieve maximum productivity with minimum effort with Front and create robust limitless products.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-12 col-lg-6 mb-3" data-aos="fade-up" data-aos-delay="150">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M22 5V19C22 19.6 21.6 20 21 20H19.5L11.9 12.4C11.5 12 10.9 12 10.5 12.4L3 20C2.5 20 2 19.5 2 19V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5ZM7.5 7C6.7 7 6 7.7 6 8.5C6 9.3 6.7 10 7.5 10C8.3 10 9 9.3 9 8.5C9 7.7 8.3 7 7.5 7Z" fill="#035A4B"/>
|
||
<path d="M19.1 10C18.7 9.60001 18.1 9.60001 17.7 10L10.7 17H2V19C2 19.6 2.4 20 3 20H21C21.6 20 22 19.6 22 19V12.9L19.1 10Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Images included</h4>
|
||
<p>We made custom license for all our premium images in the Front.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-12 col-lg-6 mb-3 mb-sm-0" data-aos="fade-up" data-aos-delay="200">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M12 10.6L14.8 7.8C15.2 7.4 15.8 7.4 16.2 7.8C16.6 8.2 16.6 8.80002 16.2 9.20002L13.4 12L12 10.6ZM10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 8.99999 16.4 9.19999 16.2L12 13.4L10.6 12Z" fill="#035A4B"/>
|
||
<path d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM13.4 12L16.2 9.20001C16.6 8.80001 16.6 8.19999 16.2 7.79999C15.8 7.39999 15.2 7.39999 14.8 7.79999L12 10.6L9.2 7.79999C8.8 7.39999 8.2 7.39999 7.8 7.79999C7.4 8.19999 7.4 8.80001 7.8 9.20001L10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 9 16.4 9.2 16.2L12 13.4L14.8 16.2C15 16.4 15.3 16.5 15.5 16.5C15.7 16.5 16 16.4 16.2 16.2C16.6 15.8 16.6 15.2 16.2 14.8L13.4 12Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Cancel anytime</h4>
|
||
<p>If its not for you, just cancel, no hidden costs or fees.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-12 col-lg-6" data-aos="fade-up" data-aos-delay="250">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M12.5 22C11.9 22 11.5 21.6 11.5 21V3C11.5 2.4 11.9 2 12.5 2C13.1 2 13.5 2.4 13.5 3V21C13.5 21.6 13.1 22 12.5 22Z" fill="#035A4B"/>
|
||
<path d="M17.8 14.7C17.8 15.5 17.6 16.3 17.2 16.9C16.8 17.6 16.2 18.1 15.3 18.4C14.5 18.8 13.5 19 12.4 19C11.1 19 10 18.7 9.10001 18.2C8.50001 17.8 8.00001 17.4 7.60001 16.7C7.20001 16.1 7 15.5 7 14.9C7 14.6 7.09999 14.3 7.29999 14C7.49999 13.8 7.80001 13.6 8.20001 13.6C8.50001 13.6 8.69999 13.7 8.89999 13.9C9.09999 14.1 9.29999 14.4 9.39999 14.7C9.59999 15.1 9.8 15.5 10 15.8C10.2 16.1 10.5 16.3 10.8 16.5C11.2 16.7 11.6 16.8 12.2 16.8C13 16.8 13.7 16.6 14.2 16.2C14.7 15.8 15 15.3 15 14.8C15 14.4 14.9 14 14.6 13.7C14.3 13.4 14 13.2 13.5 13.1C13.1 13 12.5 12.8 11.8 12.6C10.8 12.4 9.99999 12.1 9.39999 11.8C8.69999 11.5 8.19999 11.1 7.79999 10.6C7.39999 10.1 7.20001 9.39998 7.20001 8.59998C7.20001 7.89998 7.39999 7.19998 7.79999 6.59998C8.19999 5.99998 8.80001 5.60005 9.60001 5.30005C10.4 5.00005 11.3 4.80005 12.3 4.80005C13.1 4.80005 13.8 4.89998 14.5 5.09998C15.1 5.29998 15.6 5.60002 16 5.90002C16.4 6.20002 16.7 6.6 16.9 7C17.1 7.4 17.2 7.69998 17.2 8.09998C17.2 8.39998 17.1 8.7 16.9 9C16.7 9.3 16.4 9.40002 16 9.40002C15.7 9.40002 15.4 9.29995 15.3 9.19995C15.2 9.09995 15 8.80002 14.8 8.40002C14.6 7.90002 14.3 7.49995 13.9 7.19995C13.5 6.89995 13 6.80005 12.2 6.80005C11.5 6.80005 10.9 7.00005 10.5 7.30005C10.1 7.60005 9.79999 8.00002 9.79999 8.40002C9.79999 8.70002 9.9 8.89998 10 9.09998C10.1 9.29998 10.4 9.49998 10.6 9.59998C10.8 9.69998 11.1 9.90002 11.4 9.90002C11.7 10 12.1 10.1 12.7 10.3C13.5 10.5 14.2 10.7 14.8 10.9C15.4 11.1 15.9 11.4 16.4 11.7C16.8 12 17.2 12.4 17.4 12.9C17.6 13.4 17.8 14 17.8 14.7Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Money back</h4>
|
||
<p>100% guaranteed money back. No questions asked.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html6" role="tabpanel" aria-labelledby="nav-htmlTab6">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Pricing -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="h1">Pricing</h2>
|
||
<p>No additional costs. Pay for what you use.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row align-items-lg-center">
|
||
<div class="col-sm-6 col-lg-5 mb-9 mb-sm-0">
|
||
<!-- Pricing -->
|
||
<div class="card zi-2" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<!-- Radio Button Group -->
|
||
<div class="text-center mb-5">
|
||
<div class="btn-group btn-group-segment" role="group" aria-label="Pricing radio button group">
|
||
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
||
<label class="btn btn-sm" for="btnradio1">Monthly</label>
|
||
|
||
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
||
<label class="btn btn-sm disabled" for="btnradio2">
|
||
<span class="form-switch-promotion">Annually
|
||
|
||
<!-- Form Switch Promotion -->
|
||
<span class="form-switch-promotion-container">
|
||
<span class="form-switch-promotion-body">
|
||
<svg class="form-switch-promotion-arrow" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
|
||
</svg>
|
||
<span class="form-switch-promotion-text">
|
||
<span class="badge bg-primary rounded-pill ms-1">Coming soon</span>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<!-- End Form Switch Promotion -->
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- End Radio Button Group -->
|
||
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-end">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-money-profits.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<span class="text-dark">
|
||
<span class="fs-5 align-top text-dark fw-semi-bold">$</span>
|
||
<span class="display-3 text-dark fw-semi-bold">19</span>
|
||
<span>/mo</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
|
||
<hr class="my-4">
|
||
|
||
<div class="mb-5">
|
||
<p>Start your Front business now. 100% guaranteed money back. No questions asked.</p>
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<a class="btn btn-primary btn-transition" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">Get started</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-7">
|
||
<div class="ps-sm-6">
|
||
<div class="row">
|
||
<div class="col-sm-12 col-lg-6 mb-3" data-aos="fade-up" data-aos-delay="100">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="#035A4B"/>
|
||
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Hundreds of components</h4>
|
||
<p>Achieve maximum productivity with minimum effort with Front and create robust limitless products.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-12 col-lg-6 mb-3" data-aos="fade-up" data-aos-delay="150">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M22 5V19C22 19.6 21.6 20 21 20H19.5L11.9 12.4C11.5 12 10.9 12 10.5 12.4L3 20C2.5 20 2 19.5 2 19V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5ZM7.5 7C6.7 7 6 7.7 6 8.5C6 9.3 6.7 10 7.5 10C8.3 10 9 9.3 9 8.5C9 7.7 8.3 7 7.5 7Z" fill="#035A4B"/>
|
||
<path d="M19.1 10C18.7 9.60001 18.1 9.60001 17.7 10L10.7 17H2V19C2 19.6 2.4 20 3 20H21C21.6 20 22 19.6 22 19V12.9L19.1 10Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Images included</h4>
|
||
<p>We made custom license for all our premium images in the Front.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-12 col-lg-6 mb-3 mb-sm-0" data-aos="fade-up" data-aos-delay="200">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M12 10.6L14.8 7.8C15.2 7.4 15.8 7.4 16.2 7.8C16.6 8.2 16.6 8.80002 16.2 9.20002L13.4 12L12 10.6ZM10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 8.99999 16.4 9.19999 16.2L12 13.4L10.6 12Z" fill="#035A4B"/>
|
||
<path d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM13.4 12L16.2 9.20001C16.6 8.80001 16.6 8.19999 16.2 7.79999C15.8 7.39999 15.2 7.39999 14.8 7.79999L12 10.6L9.2 7.79999C8.8 7.39999 8.2 7.39999 7.8 7.79999C7.4 8.19999 7.4 8.80001 7.8 9.20001L10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 9 16.4 9.2 16.2L12 13.4L14.8 16.2C15 16.4 15.3 16.5 15.5 16.5C15.7 16.5 16 16.4 16.2 16.2C16.6 15.8 16.6 15.2 16.2 14.8L13.4 12Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Cancel anytime</h4>
|
||
<p>If its not for you, just cancel, no hidden costs or fees.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-12 col-lg-6" data-aos="fade-up" data-aos-delay="250">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path opacity="0.3" d="M12.5 22C11.9 22 11.5 21.6 11.5 21V3C11.5 2.4 11.9 2 12.5 2C13.1 2 13.5 2.4 13.5 3V21C13.5 21.6 13.1 22 12.5 22Z" fill="#035A4B"/>
|
||
<path d="M17.8 14.7C17.8 15.5 17.6 16.3 17.2 16.9C16.8 17.6 16.2 18.1 15.3 18.4C14.5 18.8 13.5 19 12.4 19C11.1 19 10 18.7 9.10001 18.2C8.50001 17.8 8.00001 17.4 7.60001 16.7C7.20001 16.1 7 15.5 7 14.9C7 14.6 7.09999 14.3 7.29999 14C7.49999 13.8 7.80001 13.6 8.20001 13.6C8.50001 13.6 8.69999 13.7 8.89999 13.9C9.09999 14.1 9.29999 14.4 9.39999 14.7C9.59999 15.1 9.8 15.5 10 15.8C10.2 16.1 10.5 16.3 10.8 16.5C11.2 16.7 11.6 16.8 12.2 16.8C13 16.8 13.7 16.6 14.2 16.2C14.7 15.8 15 15.3 15 14.8C15 14.4 14.9 14 14.6 13.7C14.3 13.4 14 13.2 13.5 13.1C13.1 13 12.5 12.8 11.8 12.6C10.8 12.4 9.99999 12.1 9.39999 11.8C8.69999 11.5 8.19999 11.1 7.79999 10.6C7.39999 10.1 7.20001 9.39998 7.20001 8.59998C7.20001 7.89998 7.39999 7.19998 7.79999 6.59998C8.19999 5.99998 8.80001 5.60005 9.60001 5.30005C10.4 5.00005 11.3 4.80005 12.3 4.80005C13.1 4.80005 13.8 4.89998 14.5 5.09998C15.1 5.29998 15.6 5.60002 16 5.90002C16.4 6.20002 16.7 6.6 16.9 7C17.1 7.4 17.2 7.69998 17.2 8.09998C17.2 8.39998 17.1 8.7 16.9 9C16.7 9.3 16.4 9.40002 16 9.40002C15.7 9.40002 15.4 9.29995 15.3 9.19995C15.2 9.09995 15 8.80002 14.8 8.40002C14.6 7.90002 14.3 7.49995 13.9 7.19995C13.5 6.89995 13 6.80005 12.2 6.80005C11.5 6.80005 10.9 7.00005 10.5 7.30005C10.1 7.60005 9.79999 8.00002 9.79999 8.40002C9.79999 8.70002 9.9 8.89998 10 9.09998C10.1 9.29998 10.4 9.49998 10.6 9.59998C10.8 9.69998 11.1 9.90002 11.4 9.90002C11.7 10 12.1 10.1 12.7 10.3C13.5 10.5 14.2 10.7 14.8 10.9C15.4 11.1 15.9 11.4 16.4 11.7C16.8 12 17.2 12.4 17.4 12.9C17.6 13.4 17.8 14 17.8 14.7Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4>Money back</h4>
|
||
<p>100% guaranteed money back. No questions asked.</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-7" class="hs-docs-heading">
|
||
Component #7 <a class="anchorjs-link" href="#component-7" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab7" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab7" href="#nav-result7" data-bs-toggle="pill" data-bs-target="#nav-result7" role="tab" aria-controls="nav-result7" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab7" href="#nav-html7" data-bs-toggle="pill" data-bs-target="#nav-html7" role="tab" aria-controls="nav-html7" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent7">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result7" role="tabpanel" aria-labelledby="nav-resultTab7">
|
||
<!-- Pricing -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Pricing</span>
|
||
<h2>Simple pricing model</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="d-grid gap-2 w-lg-75 mx-lg-auto">
|
||
<!-- Card -->
|
||
<div class="card card-sm" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<div class="row align-items-sm-center">
|
||
<div class="col">
|
||
<h4 class="card-title">UI Starter Kit</h4>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<p class="card-text mb-0">Figma</p>
|
||
<p class="card-text">Adobe XD</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-12 col-sm-4 col-xl-3 mt-3 mt-sm-0">
|
||
<div class="d-grid">
|
||
<a class="btn btn-outline-primary" href="#">Free download</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Card -->
|
||
<div class="card card-sm" data-aos="fade-up" data-aos-delay="150">
|
||
<div class="card-body">
|
||
<div class="row align-items-sm-center">
|
||
<div class="col">
|
||
<h4 class="card-title">Design Starter Kit</h4>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<p class="card-text mb-0">Figma</p>
|
||
<p class="card-text">Adobe XD</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-12 col-sm-4 col-xl-3 mt-3 mt-sm-0">
|
||
<div class="d-grid">
|
||
<a class="btn btn-outline-primary" href="#">Purchase for $49</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html7" role="tabpanel" aria-labelledby="nav-htmlTab7">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Pricing -->
|
||
<div class="container content-space-2">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Pricing</span>
|
||
<h2>Simple pricing model</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="d-grid gap-2 w-lg-75 mx-lg-auto">
|
||
<!-- Card -->
|
||
<div class="card card-sm" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<div class="row align-items-sm-center">
|
||
<div class="col">
|
||
<h4 class="card-title">UI Starter Kit</h4>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<p class="card-text mb-0">Figma</p>
|
||
<p class="card-text">Adobe XD</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-12 col-sm-4 col-xl-3 mt-3 mt-sm-0">
|
||
<div class="d-grid">
|
||
<a class="btn btn-outline-primary" href="#">Free download</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Card -->
|
||
<div class="card card-sm" data-aos="fade-up" data-aos-delay="150">
|
||
<div class="card-body">
|
||
<div class="row align-items-sm-center">
|
||
<div class="col">
|
||
<h4 class="card-title">Design Starter Kit</h4>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<p class="card-text mb-0">Figma</p>
|
||
<p class="card-text">Adobe XD</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-12 col-sm-4 col-xl-3 mt-3 mt-sm-0">
|
||
<div class="d-grid">
|
||
<a class="btn btn-outline-primary" href="#">Purchase for $49</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Content -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- Go To -->
|
||
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
||
data-hs-go-to-options='{
|
||
"offsetTop": 700,
|
||
"position": {
|
||
"init": {
|
||
"right": "2rem"
|
||
},
|
||
"show": {
|
||
"bottom": "2rem"
|
||
},
|
||
"hide": {
|
||
"bottom": "-2rem"
|
||
}
|
||
}
|
||
}'>
|
||
<i class="bi-chevron-up"></i>
|
||
</a>
|
||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/js/vendor.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="../assets/js/theme.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// INITIALIZATION OF NAV SCROLLER
|
||
// =======================================================
|
||
new HsNavScroller('.js-nav-scroller', {
|
||
delay: 400,
|
||
offset: 140
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF LISTJS COMPONENT
|
||
// =======================================================
|
||
HSCore.components.HSList.init('#snippetsSearch')
|
||
const snippetsSearch = HSCore.components.HSList.getItem('snippetsSearch')
|
||
|
||
|
||
// GET JSON FILE RESULTS
|
||
// =======================================================
|
||
fetch('../assets/json/snippets-search.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
snippetsSearch.add(data)
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
|
||
|
||
// INITIALIZATION OF TOGGLE SWITCH
|
||
// =======================================================
|
||
new HSToggleSwitch('.js-toggle-switch')
|
||
|
||
|
||
// INITIALIZATION OF SWITCH TEXT
|
||
// =======================================================
|
||
new HSSwitchText('.js-switch-text', {
|
||
afterChange() {
|
||
document.querySelector('.js-nouislider').noUiSlider.set([this.target[0].text])
|
||
}
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF NOUISLIDER
|
||
// =======================================================
|
||
HSCore.components.HSNoUISlider.init(document.querySelector('.js-nouislider'))
|
||
const slider = HSCore.components.HSNoUISlider.getItem(0)
|
||
|
||
slider.on('change', function (val) {
|
||
const input = document.querySelector('.js-switch-text:checked'),
|
||
defData = JSON.parse(input.getAttribute('data-hs-switch-text-options'))
|
||
|
||
defData.target[0].text = val[0]
|
||
input.setAttribute('data-hs-switch-text-options', JSON.stringify(defData))
|
||
})
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|