init
This commit is contained in:
@@ -0,0 +1,217 @@
|
||||
<section class="pricing-table-1 my-3" aria-label="pricing-table-10">
|
||||
<div class="container py-4">
|
||||
<div class="row mb-5">
|
||||
<div class="col-12">
|
||||
<div class="text-center">
|
||||
<div>
|
||||
<h2 class="">Our menu</h2>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Items -->
|
||||
<div class="row row-cols-1 row-cols-lg-2 g-4 g-xxl-5">
|
||||
<div class="col">
|
||||
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
|
||||
<div class="d-flex d-sm-block flex-shrink-0 col-sm-3">
|
||||
<img class="position-relative img-fluid" src="demo/img/team-1.jpg" alt="Team 1">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex gap-2 align-items-baseline">
|
||||
<div>
|
||||
<h3 class="h5 fw-bold">Caesar Salad</h3>
|
||||
</div>
|
||||
<div class="flex-grow-1 border-dashed opacity-25"></div>
|
||||
<div>
|
||||
|
||||
<strong class="h5">$10</strong>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="opacity-50">
|
||||
|
||||
Classic Caesar with romaine lettuce, parmesan cheese, croutons, and creamy dressing.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
|
||||
<div class="d-flex d-sm-block flex-shrink-0 col-sm-3">
|
||||
<img class="position-relative img-fluid" src="demo/img/team-2.jpg" alt="Team 2">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex gap-2 align-items-baseline">
|
||||
<div>
|
||||
<h3 class="h5 fw-bold">Margherita Pizza</h3>
|
||||
</div>
|
||||
<div class="flex-grow-1 border-dashed opacity-25"></div>
|
||||
<div>
|
||||
|
||||
<strong class="h5">$15</strong>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="opacity-50">
|
||||
|
||||
Traditional Italian pizza with tomato, mozzarella, fresh basil, and extra virgin olive oil.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
|
||||
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
|
||||
<img class="position-relative img-fluid" src="demo/img/team-1.jpg" alt="Team 1">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex gap-2 align-items-baseline">
|
||||
<div>
|
||||
<h3 class="h5 fw-bold">BBQ Ribs</h3>
|
||||
</div>
|
||||
<div class="flex-grow-1 border-dashed opacity-25"></div>
|
||||
<div>
|
||||
|
||||
<strong class="h5">$24</strong>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="opacity-50">
|
||||
|
||||
Slow-cooked pork ribs glazed with our signature BBQ sauce, served with fries and coleslaw.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
|
||||
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
|
||||
<img class="position-relative img-fluid" src="demo/img/team-2.jpg" alt="Team 2">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex gap-2 align-items-baseline">
|
||||
<div>
|
||||
<h3 class="h5 fw-bold">Pasta Primavera</h3>
|
||||
</div>
|
||||
<div class="flex-grow-1 border-dashed opacity-25"></div>
|
||||
<div>
|
||||
|
||||
<strong class="h5">$14</strong>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="opacity-50">
|
||||
|
||||
Fresh garden vegetables tossed with penne pasta in a light garlic and olive oil sauce.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
|
||||
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
|
||||
<img class="position-relative img-fluid" src="demo/img/team-1.jpg" alt="Team 1">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex gap-2 align-items-baseline">
|
||||
<div>
|
||||
<h3 class="h5 fw-bold">Chocolate Cake</h3>
|
||||
</div>
|
||||
<div class="flex-grow-1 border-dashed opacity-25"></div>
|
||||
<div>
|
||||
|
||||
<strong class="h5">$7</strong>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="opacity-50">
|
||||
|
||||
Rich and moist chocolate cake with a smooth chocolate ganache frosting.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
|
||||
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
|
||||
<img class="position-relative img-fluid" src="demo/img/team-2.jpg" alt="Team 2">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex gap-2 align-items-baseline">
|
||||
<div>
|
||||
<h3 class="h5 fw-bold">Craft Beer</h3>
|
||||
</div>
|
||||
<div class="flex-grow-1 border-dashed opacity-25"></div>
|
||||
<div>
|
||||
|
||||
<strong class="h5">$5</strong>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="opacity-50">
|
||||
|
||||
A selection of local and imported craft beers, served chilled.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
|
||||
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
|
||||
<img class="position-relative img-fluid" src="demo/img/team-1.jpg" alt="Team 1">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex gap-2 align-items-baseline">
|
||||
<div>
|
||||
<h3 class="h5 fw-bold">Mushroom Risotto with truffle cream.</h3>
|
||||
</div>
|
||||
<div class="flex-grow-1 border-dashed opacity-25"></div>
|
||||
<div>
|
||||
|
||||
<strong class="h5">$16</strong>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="opacity-50">
|
||||
|
||||
Creamy risotto enriched with porcini mushrooms and finished with black truffle.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="d-grid d-sm-flex gap-3 gap-xl-4">
|
||||
<div class="d-flex col-sm-3 d-sm-block flex-shrink-0">
|
||||
<img class="position-relative img-fluid" src="demo/img/team-2.jpg" alt="Team 2">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex gap-2 align-items-baseline">
|
||||
<div>
|
||||
<h3 class="h5 fw-bold">Panna Cotta</h3>
|
||||
</div>
|
||||
<div class="flex-grow-1 border-dashed opacity-25"></div>
|
||||
<div>
|
||||
|
||||
<strong class="h5">$9</strong>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="opacity-50">
|
||||
|
||||
Light and creamy spoon dessert with berry coulis.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,143 @@
|
||||
<section class="pricing-table-11 my-3" aria-label="pricing-table-11">
|
||||
<div class="container pb-5">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<div class=" mb-4">
|
||||
<span class="small mt-4 d-block">LOREM IPSUM</span>
|
||||
<h2 class="display-2 mb-0">
|
||||
<b>Pricing</b>
|
||||
</h2>
|
||||
<p editable="inline"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
|
||||
<br> ligula malesuada placerat sit amet quis enim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4 text-center">
|
||||
<div class="col-lg-3 col-md-6 text-dark my-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0 " editable="inline">Free</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
<span class="display-4" editable="inline">
|
||||
<b>$0</b>
|
||||
</span>
|
||||
<span class="lead">/mo</span>
|
||||
</h5>
|
||||
|
||||
<div class="card-text my-4 ">
|
||||
<div editable="rich">
|
||||
<ul class="list-unstyled">
|
||||
|
||||
<li editable="inline">10 users included</li>
|
||||
<li editable="inline">2 GB of storage</li>
|
||||
<li editable="inline">Email support</li>
|
||||
<li editable="inline">Help center access</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid ">
|
||||
<a href="#" class="btn btn-lg btn-outline-primary">Sign up for free</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 text-dark my-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0" editable="inline">Pro</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
<span class="display-4" editable="inline">
|
||||
<b>$15</b>
|
||||
</span>
|
||||
<span class="lead">/mo</span>
|
||||
</h5>
|
||||
|
||||
<div class="card-text my-4 ">
|
||||
<div editable="rich">
|
||||
<ul class="list-unstyled">
|
||||
|
||||
<li class="">20 users included</li>
|
||||
<li class="">10 GB of storage</li>
|
||||
<li class="">Priority email support</li>
|
||||
<li class="">Help center access</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid ">
|
||||
<a href="#" class="btn btn-lg btn-primary">Contact us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 text-dark my-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0" editable="inline">Enterprise</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
<span class="display-4" editable="inline">
|
||||
<b>$29</b>
|
||||
</span>
|
||||
<span class="lead">/mo</span>
|
||||
</h5>
|
||||
|
||||
<div class="card-text my-4 ">
|
||||
<div editable="rich">
|
||||
<ul class="list-unstyled">
|
||||
|
||||
<li class="">30 users included</li>
|
||||
<li class="">15 GB of storage</li>
|
||||
<li class="">Phone and email support</li>
|
||||
<li class="">Help center access</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid ">
|
||||
<a href="#" class="btn btn-lg btn-primary">Contact us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 text-dark my-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0" editable="inline">Exclusive</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
<span class="display-4" editable="inline">
|
||||
<b>$49</b>
|
||||
</span>
|
||||
<span class="lead">/mo</span>
|
||||
</h5>
|
||||
|
||||
<div class="card-text my-4 ">
|
||||
<div editable="rich">
|
||||
<ul class="list-unstyled">
|
||||
|
||||
<li class="">50 users included</li>
|
||||
<li class="">45 GB of storage</li>
|
||||
<li class="">Phone and email support</li>
|
||||
<li editable="inline">Help center access</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid ">
|
||||
<a href="#" class="btn btn-lg btn-primary">Contact us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,117 @@
|
||||
<section class="pricing-table-12 my-3" aria-label="pricing-table-12">
|
||||
<div class="container py-4">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<div class=" mb-4">
|
||||
<span class="small mt-4 d-block">LOREM IPSUM</span>
|
||||
<h2 class="display-2 mb-0">
|
||||
<b>Pricing</b>
|
||||
</h2>
|
||||
<p editable="inline"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
|
||||
<br> ligula malesuada placerat sit amet quis enim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="text-center col-md-3 py-4 shadow-sm">
|
||||
<div class="">
|
||||
<div>
|
||||
|
||||
<h2>
|
||||
<strong>Basic</strong>
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<em>1 USER</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div>
|
||||
|
||||
<h2 class="display-3">$59</h2>
|
||||
<p>/month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" px-4 mb-4">
|
||||
<div>
|
||||
|
||||
<p> Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,
|
||||
vulputate eu tellus ac, mattis cursus nunc.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<a class="btn btn-outline-primary" href="#" role="button">Buy Now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center col-md-4 offset-md-1 pb-4 pt-2 shadow-lg">
|
||||
<div class=" text-end pb-2 ">
|
||||
<span class="badge bg-dark" editable="inline">Popular</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="">
|
||||
<div>
|
||||
|
||||
<h2 class="display-3">
|
||||
<strong>Pro</strong>
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<em>100 USER</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div>
|
||||
|
||||
<h2 class="display-3">$79</h2>
|
||||
<p>/month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" px-4 mb-4">
|
||||
<div>
|
||||
|
||||
<p> Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,
|
||||
vulputate eu tellus ac, mattis cursus nunc.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<a class="btn btn-outline-primary" href="#" role="button">Buy Now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center col-md-3 offset-md-1 py-4 shadow-sm">
|
||||
<div class="">
|
||||
<div>
|
||||
|
||||
<h2>
|
||||
<strong>Business</strong>
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<em>UNLIMITED</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div>
|
||||
|
||||
<h2 class="display-3">$199</h2>
|
||||
<p>/month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" px-4 mb-4">
|
||||
<div>
|
||||
|
||||
<p> Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,
|
||||
vulputate eu tellus ac, mattis cursus nunc.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<a class="btn btn-outline-primary" href="#" role="button">Buy Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,114 @@
|
||||
<section class="pricing-table-13 my-3" aria-label="pricing-table-13">
|
||||
<div class="container pb-5">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<div class="mb-4">
|
||||
<span editable="inline" class="small mt-4 d-block">LOREM IPSUM</span>
|
||||
<h2 editable="inline" class="display-2 mb-0">
|
||||
<b>Pricing</b>
|
||||
</h2>
|
||||
<p editable="inline"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
|
||||
<br> ligula malesuada placerat sit amet quis enim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4 text-center">
|
||||
<div class="col-lg-4 col-md-6 text-dark my-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0 " editable="inline">Free</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
<span class="display-4" editable="inline">
|
||||
<b>$0</b>
|
||||
</span>
|
||||
<span editable="inline" class="lead">/mo</span>
|
||||
</h5>
|
||||
|
||||
<div class="card-text my-4 ">
|
||||
<div editable="rich">
|
||||
<ul class="list-unstyled">
|
||||
|
||||
<li editable="inline">10 users included</li>
|
||||
<li editable="inline">2 GB of storage</li>
|
||||
<li editable="inline">Email support</li>
|
||||
<li editable="inline">Help center access</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid ">
|
||||
<a href="#" class="btn btn-lg btn-outline-primary">Sign up for free</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 text-dark my-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0" editable="inline">Pro</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
<span class="display-4" editable="inline">
|
||||
<b>$15</b>
|
||||
</span>
|
||||
<span editable="inline" class="lead">/mo</span>
|
||||
</h5>
|
||||
|
||||
<div class="card-text my-4 ">
|
||||
<div editable="rich">
|
||||
<ul class="list-unstyled">
|
||||
|
||||
<li editable="inline" class="">20 users included</li>
|
||||
<li editable="inline" class="">10 GB of storage</li>
|
||||
<li editable="inline" class="">Priority email support</li>
|
||||
<li editable="inline" class="">Help center access</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid ">
|
||||
<a href="#" class="btn btn-lg btn-primary">Contact us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 text-dark my-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0" editable="inline">Enterprise</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
<span class="display-4" editable="inline">
|
||||
<b>$29</b>
|
||||
</span>
|
||||
<span editable="inline" class="lead">/mo</span>
|
||||
</h5>
|
||||
|
||||
<div class="card-text my-4 ">
|
||||
<div editable="rich">
|
||||
<ul class="list-unstyled">
|
||||
|
||||
<li editable="inline" class="">30 users included</li>
|
||||
<li editable="inline" class="">15 GB of storage</li>
|
||||
<li editable="inline" class="">Phone and email support</li>
|
||||
<li editable="inline" class="">Help center access</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid ">
|
||||
<a href="#" class="btn btn-lg btn-primary">Contact us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,120 @@
|
||||
<section class="pricing-table-14 my-3" aria-label="pricing-table-14">
|
||||
<div class="container py-4">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<div class="mb-4">
|
||||
<span editable="inline" class="mt-4 d-block lead">OUR PRICING PLANS</span>
|
||||
<h2 editable="inline" class="display-2 mb-3">
|
||||
<b>Find the Right Tier.</b>
|
||||
</h2>
|
||||
<p editable="inline" class="text-secondary">Flexible pricing options for freelancers and design teams. No Credit Card required!
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4" id="pricing">
|
||||
<div class="col-lg-4 mb-4 mb-lg-0">
|
||||
<div class="py-3 shadow-sm bg-dark text-white rounded">
|
||||
|
||||
<div class="mb-4 text-left px-4">
|
||||
<svg class="text-warning" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="2em" height="2em" viewBox="0 0 24 24" style="" lc-helper="svg-icon" fill="currentColor">
|
||||
<path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z"></path>
|
||||
</svg>
|
||||
|
||||
<span editable="inline" class="ml-2 fw-light">Individual</span>
|
||||
</div>
|
||||
<div class="mb-5 px-4">
|
||||
<div editable="rich">
|
||||
<h2 class="text-light">Professional</h2>
|
||||
|
||||
<p class="h5">$19.99 <span class="text-secondary fw-light">/month</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5 text-left">
|
||||
<div editable="rich">
|
||||
|
||||
<ul>
|
||||
<li>1 users</li>
|
||||
<li>20 TB of secure storage</li>
|
||||
<li>Premium productivity features and simple, secure file sharing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 text-center">
|
||||
<a class="btn btn-outline-primary " href="#" role="button">Try free for 30 days</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 mb-4 mb-lg-0">
|
||||
<div class="py-3 rounded shadow">
|
||||
<div class="mb-4 text-left px-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="text-primary" width="2em" height="2em" viewBox="0 0 24 24" style="" lc-helper="svg-icon" fill="currentColor">
|
||||
<path d="M19 17V19H7V17S7 13 13 13 19 17 19 17M16 8A3 3 0 1 0 13 11A3 3 0 0 0 16 8M19.2 13.06A5.6 5.6 0 0 1 21 17V19H24V17S24 13.55 19.2 13.06M18 5A2.91 2.91 0 0 0 17.11 5.14A5 5 0 0 1 17.11 10.86A2.91 2.91 0 0 0 18 11A3 3 0 0 0 18 5M7.34 8.92L8.5 10.33L3.75 15.08L1 12.08L2.16 10.92L3.75 12.5L7.34 8.92"></path>
|
||||
</svg>
|
||||
|
||||
<span editable="inline" class="ml-2 fw-light">Small Team</span>
|
||||
</div>
|
||||
<div class="mb-5 px-4">
|
||||
<div editable="rich">
|
||||
<h2 class=" ">Standard</h2>
|
||||
|
||||
<p class="h5 text-primary">$39.99 <span class="text-secondary fw-light">/month</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5 text-left">
|
||||
<div editable="rich">
|
||||
|
||||
<ul>
|
||||
<li> 2 users</li>
|
||||
<li> 20 TB of secure storage</li>
|
||||
<li> Premium productivity features and simple, secure file sharing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 text-center">
|
||||
<a class="btn btn-outline-primary " href="#" role="button">Try free for 30 days</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 ">
|
||||
<div class="py-3 rounded border">
|
||||
<div class="mb-4 text-left px-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="text-primary" width="2em" height="2em" viewBox="0 0 24 24" style="" lc-helper="svg-icon" fill="currentColor">
|
||||
<path d="M5,3V21H11V17.5H13V21H19V3H5M7,5H9V7H7V5M11,5H13V7H11V5M15,5H17V7H15V5M7,9H9V11H7V9M11,9H13V11H11V9M15,9H17V11H15V9M7,13H9V15H7V13M11,13H13V15H11V13M15,13H17V15H15V13M7,17H9V19H7V17M15,17H17V19H15V17Z"></path>
|
||||
</svg>
|
||||
|
||||
<span editable="inline" class="ml-2 fw-light">Large Team</span>
|
||||
</div>
|
||||
<div class="mb-5 px-4">
|
||||
<div editable="rich">
|
||||
<h2 class=" ">Ultimate</h2>
|
||||
|
||||
<p class="h5 text-primary">$99.99 <span class="text-secondary fw-lighter">/month</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5 text-left">
|
||||
<div editable="rich">
|
||||
|
||||
<ul>
|
||||
<li>+20 users</li>
|
||||
<li>100 TB of secure storage</li>
|
||||
<li> Premium productivity features and simple, secure file sharing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 text-center">
|
||||
<a class="btn btn-outline-primary" href="#" role="button">Try free for 30 days</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,111 @@
|
||||
<section class="pricing-table-3 my-3" aria-label="pricing-table-3">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center pb-2">
|
||||
<div class="col-md-7 heading-section text-center">
|
||||
<h2 class="text-center display-6 mb-1 fw-bold">Choose your plan</h2>
|
||||
<p class="lead text-center text-muted mb-4">14-day free trial no credit card required.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="price my-5-col shadow-sm border rounded-3" data-aos="fade-up">
|
||||
<!--
|
||||
<div class="img"><img src="demo/img/illustrations.co/104-dumbbell.svg" alt="104-dumbbell" loading="lazy" class="img-fluid" /></div>
|
||||
-->
|
||||
<div class="text-center p-5">
|
||||
<span class="excerpt d-block">Personal</span>
|
||||
<span class="price my-5">
|
||||
<sup>$</sup>
|
||||
<span class="number">49</span>
|
||||
<sub>/mos</sub>
|
||||
</span>
|
||||
<ul class="pricing-text mb-5">
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>5 Dog Walk
|
||||
</li>
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>3 Vet Visit
|
||||
</li>
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>3 Pet Spa
|
||||
</li>
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>Free Support
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/page/pricing" class="btn btn-primary">
|
||||
<span>Get Started</span>
|
||||
<i class="la la-long-arrow-alt-right ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="price my-5-col shadow-sm border rounded-3" data-aos="fade-up" data-aos-delay="200">
|
||||
<!--
|
||||
<div class="img"><img src="demo/img/illustrations.co/107-healthy.svg" alt="107-healthy" loading="lazy" class="img-fluid" /></div>
|
||||
-->
|
||||
<div class="text-center p-5">
|
||||
<span class="excerpt d-block">Business</span>
|
||||
<span class="price my-5">
|
||||
<sup>$</sup>
|
||||
<span class="number">79</span>
|
||||
<sub>/mos</sub>
|
||||
</span>
|
||||
<ul class="pricing-text mb-5">
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>5 Dog Walk
|
||||
</li>
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>3 Vet Visit
|
||||
</li>
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>3 Pet Spa
|
||||
</li>
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>Free Support
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/page/pricing" class="btn btn-primary">
|
||||
<span>Get Started</span>
|
||||
<i class="la la-long-arrow-alt-right ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="price my-5-col shadow-sm border rounded-3" data-aos="fade-up" data-aos-delay="400">
|
||||
<!--
|
||||
<div class="img"><img src="demo/img/illustrations.co/126-namaste-no-hand-shake.svg" alt="126-namaste-no-hand-shake" loading="lazy" class="img-fluid" /></div>
|
||||
-->
|
||||
<div class="text-center p-5">
|
||||
<span class="excerpt d-block">Ultimate</span>
|
||||
<span class="price my-5">
|
||||
<sup>$</sup>
|
||||
<span class="number">109</span>
|
||||
<sub>/mos</sub>
|
||||
</span>
|
||||
<ul class="pricing-text mb-5">
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>5 Dog Walk
|
||||
</li>
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>3 Vet Visit
|
||||
</li>
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>3 Pet Spa
|
||||
</li>
|
||||
<li>
|
||||
<span class="la la-check me-2"></span>Free Support
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/page/pricing" class="btn btn-primary">
|
||||
<span>Get Started</span>
|
||||
<i class="la la-long-arrow-alt-right ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,243 @@
|
||||
<section class="pricing-table-4 my-3" aria-label="pricing-table-4">
|
||||
<div class="container py-4 py-lg-6">
|
||||
<div class="row g-4 ">
|
||||
<div class="col-lg-4 col-xl-5">
|
||||
<div class=" card h-100 px-xl-3 border-0 py-lg-4 " style="" id="">
|
||||
<div class=" mb-2">
|
||||
<div editable="rich">
|
||||
<h1 class="fw-bolder">Our Plans</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div editable="rich">
|
||||
<p class="lead text-dark">Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div editable="rich">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quasi, blanditiis sed!
|
||||
<br>Facere laborum debitis veritatis vel ex enim, eligendi distinctio, quidem esse accusantium amet facilis dolore ea impedit alias..
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" bg-primary">
|
||||
<img style="mix-blend-mode:overlay" class="img-fluid" src="demo/img/team-1.jpg" alt="Team 2" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-xl-3 ms-auto text-center my-lg-auto">
|
||||
<div class=" card px-xl-3 border py-lg-4" style="" id="">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<div class=" mb-4">
|
||||
<div editable="rich">
|
||||
<h3>Basic</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-4 bg-body-tertiary text-dark rounded py-3 ">
|
||||
<h3 editable="inline" class="fw-bolder d-inline small">$</h3>
|
||||
<h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">19</h3>
|
||||
<span class="opacity-50" editable="inline">/ Year</span>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class=" d-grid">
|
||||
<a class="btn btn-primary" href="#" role="button">Subscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-xl-3 text-center">
|
||||
<div class=" card h-100 px-xl-3 border py-lg-5" style="" id="">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<div class=" mb-4">
|
||||
<div editable="rich">
|
||||
<h3>Professional</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-4 bg-body-tertiary text-dark rounded py-3 ">
|
||||
<h3 editable="inline" class="fw-bolder d-inline small">$</h3>
|
||||
<h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">149</h3>
|
||||
<span class="opacity-50" editable="inline">/ Year</span>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div editable="rich">
|
||||
<p class="text-start">Consectetur similique</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class=" d-grid">
|
||||
<a class="btn btn-primary" href="#" role="button">Subscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,174 @@
|
||||
<section class="pricing-table-5 my-3" aria-label="pricing-table-5">
|
||||
<div class="container py-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-lg-6 col-xl-5">
|
||||
<div class=" ">
|
||||
<div>
|
||||
<h2 class="fw-bolder">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 offset-xl-1">
|
||||
<div class=" opacity-50">
|
||||
<div>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 g-xxl-5">
|
||||
<div class="col-lg-4">
|
||||
<div class=" card h-100 p-4 py-xl-6 shadow border-0">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p class="opacity-50 mb-0 ls-3">Basic</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-4">
|
||||
<h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">$29</h3>
|
||||
<span class="opacity-50" editable="inline">/ month</span>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> Nunc et metus id ligula malesuada placerat sit amet quis enim.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> Aliquam erat volutpat. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p class="text-decoration-line-through"> In pellentesque scelerisque auctor. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p class="text-decoration-line-through"> Ut porta lacus eget nisi fermentum lobortis.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 ">
|
||||
<div class=" card h-100 p-4 py-xl-6 shadow border-0 bg-dark text-light">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p class="opacity-50 mb-0 ls-3">Standard</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-4">
|
||||
<h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">$59</h3>
|
||||
<span class="opacity-50" editable="inline">/ month</span>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> Nunc et metus id ligula malesuada placerat sit amet quis enim.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> Aliquam erat volutpat. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> In pellentesque scelerisque auctor. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p class="text-decoration-line-through"> Ut porta lacus eget nisi fermentum lobortis.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class=" d-grid">
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class=" card h-100 p-4 py-xl-6 shadow border-0">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p class="opacity-50 mb-0 ls-3">Premium</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-4">
|
||||
<h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">$199</h3>
|
||||
<span class="opacity-50" editable="inline">/ month</span>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> Nunc et metus id ligula malesuada placerat sit amet quis enim.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> Aliquam erat volutpat. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> In pellentesque scelerisque auctor. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mb-2">
|
||||
<div>
|
||||
<p> Ut porta lacus eget nisi fermentum lobortis.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class=" d-grid">
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,268 @@
|
||||
<section class="pricing-table-6 my-3" aria-label="pricing-table-6">
|
||||
<div class="container py-4">
|
||||
|
||||
<div class="row g-4 g-xxl-5">
|
||||
<div class="col-lg-4 text-center">
|
||||
<div class="card h-100 p-4" style="">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<div class="border-bottom border-4 mb-4">
|
||||
<div>
|
||||
<p class="opacity-50 mb-0 ls-3">SINGLE</p>
|
||||
<h2 class="fw-bolder h4">Basic plan</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div>
|
||||
|
||||
<h3 class="fw-bolder rfs-40">
|
||||
<span class="h2 align-top">$</span>29
|
||||
</h3>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start">Consectetur similique repellat ex doloribus error</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start text-decoration-line-through">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start text-decoration-line-through">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 text-center">
|
||||
<div class="card h-100 p-4">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<div class="border-bottom border-4 mb-4">
|
||||
<div>
|
||||
<p class="opacity-50 mb-0 ls-3">TEAM</p>
|
||||
<h2 class="fw-bolder h4">Pro plan</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div>
|
||||
|
||||
<h3 class="fw-bolder rfs-40">
|
||||
<span class="h2 align-top">$</span>99
|
||||
</h3>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start">Consectetur similique repellat ex doloribus error</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start text-decoration-line-through">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 text-center">
|
||||
<div class="card h-100 p-4">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<div class="border-bottom border-4 mb-4">
|
||||
<div>
|
||||
<p class="opacity-50 mb-0 ls-3">ENTERPRISE</p>
|
||||
<h2 class="fw-bolder h4">Pro plan</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div>
|
||||
|
||||
<h3 class="fw-bolder rfs-40">
|
||||
<span class="h2 align-top">$</span>219
|
||||
</h3>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start">Consectetur similique repellat ex doloribus error</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start ">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start">Cupiditate, quidem magnam quaerat molestiae.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="d-inline-flex w-100 gap-2 ">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="text-primary">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-start ">Assumenda fuga suscipit aliquam illum aut voluptas atque laborum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,122 @@
|
||||
<section class="pricing-table-7 my-3" aria-label="pricing-table-7">
|
||||
<div class="container py-5 overflow-hidden">
|
||||
<div class="row mb-5 pb-2">
|
||||
<div class="col-md-12 text-center">
|
||||
<div class="mb-4">
|
||||
<span class="small mt-4 d-block">LOREM IPSUM</span>
|
||||
<h2 class="display-2 mb-0">Pricing</h2>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
|
||||
<br> ligula malesuada placerat sit amet quis enim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center pt-2 pb-4">
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="text-center rounded border shadow-sm py-5 mb-5">
|
||||
<div class="text-center">
|
||||
<img src="demo/img/team-1.jpg" alt="Team 1" style="" loading="lazy" class="w-50 mb-2 rounded-4">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div editable="rich">
|
||||
<h2>Personal</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center small">
|
||||
<div editable="rich">
|
||||
<p>Perfect for
|
||||
<strong>designers</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-primary display-4">
|
||||
<p>
|
||||
<span>
|
||||
<b>$79</b>
|
||||
</span>
|
||||
<span class="lead">/ per year</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<ul class="list-unstyled mt-3 mb-4">
|
||||
<li class="py-2">
|
||||
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
|
||||
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
|
||||
</svg>
|
||||
<span>Build Unlimited Websites</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
|
||||
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
|
||||
</svg>
|
||||
<span>Updates for 1 Year</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
|
||||
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
|
||||
</svg>
|
||||
<span>Support for 1 Year</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="" style="z-index:4">
|
||||
<a class="btn btn-outline-primary" href="#" role="button">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Single Price Plan Area -->
|
||||
<div class="col-12 col-lg-4" style="z-index: 5;">
|
||||
<div class="text-center mb-5 py-5 shadow bg-white shadow-lg text-dark" style="border-radius: 12px;z-index: 2;transform: scale(1.2);">
|
||||
<div class="text-center">
|
||||
<img src="demo/img/team-2.jpg" alt="Team 2" style="" loading="lazy" class="w-50 mb-2 rounded-4">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div editable="rich">
|
||||
<h2>Business</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center small">
|
||||
<div editable="rich">
|
||||
<p>Perfect for
|
||||
<strong>agency</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-primary display-4">
|
||||
<p>
|
||||
<span>
|
||||
<b>$199</b>
|
||||
</span>
|
||||
<span class="lead">/ per year</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<ul class="list-unstyled mt-3 mb-4">
|
||||
<li class="py-2">
|
||||
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
|
||||
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
|
||||
</svg>
|
||||
<span>Build Unlimited Websites</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
|
||||
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
|
||||
</svg>
|
||||
<span>Updates for 1 Year</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
|
||||
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
|
||||
</svg>
|
||||
<span>Support for 1 Year</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="" style="z-index:4">
|
||||
<a class="btn btn-outline-primary" href="#" role="button">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,212 @@
|
||||
<section class="pricing-table-8 my-3" aria-label="pricing-table-8">
|
||||
<div class="container py-4">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="text-center">
|
||||
<div>
|
||||
<h2>Pricing</h2>
|
||||
<p class="lead">We offer flexible pricing options for freelancers and design teams.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-start g-0">
|
||||
<div class="col-lg-3 text-center border mb-4 mb-lg-0">
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
|
||||
<div class="">
|
||||
<div>
|
||||
<h2>Free</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<div>
|
||||
<p class="lead">Forever Free</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div>
|
||||
<p>$</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="display-1">0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<a class="btn mb-4 btn-outline-primary" href="#" role="button">Start for free</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
<div class="">
|
||||
<div>
|
||||
<p> 1 GB of Space
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 text-center border mb-4 mb-lg-0">
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
|
||||
<div class="">
|
||||
<div>
|
||||
<h2>Starter</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<div>
|
||||
<p class="lead">Basic</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div>
|
||||
<p>$</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="display-1">9</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<a class="btn btn-primary mb-4" href="#" role="button">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
<div class="">
|
||||
<div>
|
||||
<p>5 GB of Space
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
<div class="">
|
||||
<div>
|
||||
<p>Unlimited Projects </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
<div class="">
|
||||
<div>
|
||||
<p>1 Users </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 text-center border mb-4 mb-lg-0">
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
|
||||
<div class="">
|
||||
<div>
|
||||
<h2>Pro</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<div>
|
||||
<p class="lead">Best value</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div>
|
||||
<p>$</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="display-1">29</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<a class="btn btn-primary mb-4" href="#" role="button">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
<div class="">
|
||||
<div>
|
||||
<p>20 GB of Space
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
<div class="">
|
||||
<div>
|
||||
<p> Unlimited Projects
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
<div class="">
|
||||
<div>
|
||||
<p>5 Users
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 text-center border">
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
|
||||
<div class="">
|
||||
<div>
|
||||
<h2>Agency</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<div>
|
||||
<p class="lead">Enterprise</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div>
|
||||
<p>$</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="display-1">199</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<a class="btn btn-primary mb-4" href="#" role="button">Buy now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
<div class="">
|
||||
<div>
|
||||
<p>Unlimited Space</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
<div class="">
|
||||
<div>
|
||||
<p> Unlimited Projects
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
<div class="">
|
||||
<div>
|
||||
<p> Unlimited Users</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 px-md-4 border-bottom">
|
||||
<div class="">
|
||||
<div>
|
||||
<p>Access to Cloud</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,81 @@
|
||||
<section class="pricing-table-9 my-3" aria-label="pricing-table-9">
|
||||
<div class="container py-4">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<div class="mb-4">
|
||||
<span class="small mt-4 d-block">LOREM IPSUM</span>
|
||||
<h2 class="display-2 mb-0">
|
||||
<b>Pricing</b>
|
||||
</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
|
||||
<br> ligula malesuada placerat sit amet quis enim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="text-center col-md-6 py-5 bg-body-tertiary text-dark">
|
||||
<div class="">
|
||||
<div editable="rich">
|
||||
|
||||
<h2>
|
||||
<strong>Basic</strong>
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<em>1 USER</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div editable="rich">
|
||||
|
||||
<h2 class="display-3">$59</h2>
|
||||
<p>/month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 mb-4">
|
||||
<div editable="rich">
|
||||
|
||||
<p> Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,
|
||||
vulputate eu tellus ac, mattis cursus nunc.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<a class="btn btn-outline-primary" href="#" role="button">Buy Now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center col-md-6 py-5 shadow-lg">
|
||||
<div class="">
|
||||
<div editable="rich">
|
||||
|
||||
<h2>
|
||||
<strong>Business</strong>
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<em>100 USERs</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div editable="rich">
|
||||
|
||||
<h2 class="display-3">$199</h2>
|
||||
<p>/month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 mb-4">
|
||||
<div editable="rich">
|
||||
|
||||
<p> Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,
|
||||
vulputate eu tellus ac, mattis cursus nunc.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<a class="btn btn-outline-primary" href="#" role="button">Buy Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user