2230 lines
114 KiB
HTML
2230 lines
114 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="@@autopath/favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="@@vars.themeFont" rel="stylesheet">
|
||
|
||
<!-- CSS Implementing Plugins -->
|
||
<!-- bundlecss:vendor [@@autopath] -->
|
||
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||
<link rel="stylesheet" href="@@autopath/node_modules/nouislider/dist/nouislider.min.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
||
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
|
||
<link rel="stylesheet" href="@@autopath/assets/css/snippets.css">
|
||
</head>
|
||
|
||
<body class="navbar-sidebar-aside-lg">
|
||
<!-- ========== HEADER ========== -->
|
||
@@include("@@autopath/partials/docs/snippets-navbar.html")
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Navbar -->
|
||
@@include("@@autopath/partials/docs/snippets-sidebar.html", {
|
||
"category": "",
|
||
"link": "pricing.html"
|
||
})
|
||
<!-- 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="@@autopath/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="@@autopath/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="@@autopath/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">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/com/com012.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="@@autopath/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">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/com/com012.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="@@autopath/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="@@autopath/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="@@autopath/assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
|
||
<script src="@@autopath/node_modules/nouislider/dist/nouislider.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="@@autopath/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="@@autopath/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="@@autopath/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="@@autopath/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="@@autopath/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="@@autopath/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="@@autopath/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">
|
||
@@include("@@autopath/assets/svg/illustrations/circle-small.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">
|
||
@@include("@@autopath/assets/svg/illustrations/circle.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">
|
||
@@include("@@autopath/assets/svg/illustrations/circle-triple.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">
|
||
@@include("@@autopath/assets/svg/illustrations/circle-small.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">
|
||
@@include("@@autopath/assets/svg/illustrations/circle.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">
|
||
@@include("@@autopath/assets/svg/illustrations/circle-triple.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="@@autopath/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">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/abs/abs027.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">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/gen/gen006.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">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/arr/arr015.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">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/fin/fin010.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="@@autopath/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">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/abs/abs027.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">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/gen/gen006.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">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/arr/arr015.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">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/fin/fin010.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="@@autopath/assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="@@autopath/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="@@autopath/assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="@@autopath/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="@@autopath/assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="@@autopath/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="@@autopath/assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="@@autopath/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 -->
|
||
@@include("@@autopath/partials/layouts-components/go-to.html")
|
||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||
|
||
<!-- JS Global Compulsory @@deleteLine:build -->
|
||
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<!-- bundlejs:vendor [@@autopath] -->
|
||
<script src="@@autopath/assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
||
<script src="@@autopath/assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
||
<script src="@@autopath/node_modules/list.js/dist/list.min.js"></script>
|
||
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
||
<script src="@@autopath/assets/vendor/prism/prism.js"></script>
|
||
<script src="@@autopath/node_modules/fslightbox/index.js"></script>
|
||
<script src="@@autopath/assets/vendor/hs-toggle-switch/dist/hs-toggle-switch.min.js"></script>
|
||
<script src="@@autopath/assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
|
||
<script src="@@autopath/node_modules/nouislider/dist/nouislider.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<!-- bundlejs:theme [@@autopath] -->
|
||
<script src="@@autopath/assets/js/hs.core.js"></script>
|
||
<script src="@@autopath/assets/js/hs.list.js"></script>
|
||
<script src="@@autopath/assets/js/hs.nouislider.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('@@autopath/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>
|