117 lines
3.0 KiB
HTML
117 lines
3.0 KiB
HTML
|
<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>
|