Pricing 1
<section>
<div class="bg-gradient-primary position-relative">
<div class="container pb-lg-9 pb-7 pt-7 postion-relative z-index-2">
<div class="row">
<div class="col-md-8 mx-auto text-center">
<span class="badge bg-dark mb-2">Pricing</span>
<h3 class="text-white">See our pricing</h3>
<p class="text-white">You have Free Unlimited Updates and Premium Support on each package.</p>
</div>
</div>
</div>
</div>
<div class="mt-n8">
<div class="container">
<div class="row">
<div class="col-lg-3 mb-lg-auto mb-4 my-auto p-md-0 ms-auto">
<div class="card border-radius-top-end-lg-0 border-radius-bottom-end-lg-0">
<div class="card-header text-center pt-4 pb-3">
<h6 class="text-dark opacity-8 mb-0">Starter</h6>
<h1 class="font-weight-bold">
<small>$</small>199
</h1>
</div>
<div class="card-body mx-auto pt-0">
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Complete documentation</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Working materials in Sketch</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">500MB cloud storage</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Lite support</span>
</div>
</div>
</div>
<div class="card-footer pt-0">
<a href="javascript:;" class="btn w-100 bg-gradient-dark mb-0">
Buy now
</a>
</div>
</div>
</div>
<div class="col-lg-3 p-md-0 mb-lg-auto mb-4 z-index-2">
<div class="card">
<div class="card-header text-center pt-4 pb-3">
<h6 class="text-dark opacity-8 text mb-0 mt-2">Pro</h6>
<h1 class="font-weight-bold">
<small>$</small>299
</h1>
</div>
<div class="card-body mx-auto pt-0">
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Complete documentation</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Working materials in Sketch</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">100GB cloud storage</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">500 team members</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Premium support</span>
</div>
</div>
</div>
<div class="card-footer pt-0">
<a href="javascript:;" class="btn btn-icon bg-gradient-primary d-block mb-0 icon-move-right">Try Pro
<i class="fas fa-arrow-right ms-2" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-3 mb-lg-auto mb-4 my-auto p-md-0 me-auto">
<div class="card border-radius-top-start-lg-0 border-radius-bottom-start-lg-0">
<div class="card-header text-center pt-4 pb-2">
<h6 class="text-dark opacity-8 text mb-0">Premium</h6>
<h1 class="font-weight-bold">
<small>$</small>399
</h1>
</div>
<div class="card-body mx-auto pt-0">
<div class="justify-content-start d-flex px-2 py-1 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Complete documentation</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Working materials in Sketch</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">2GB cloud storage</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-dark opacity-6 text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Premium support</span>
</div>
</div>
</div>
<div class="card-footer pt-0">
<a href="javascript:;" class="btn w-100 bg-gradient-dark mb-0">Buy now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Pricing 2
<!-- START Pricing w/ 2 cards & nav tabs -->
<section class="py-2 bg-light">
<div class="container pt-5">
<div class="row">
<div class="col-lg-4 col-md-10 d-flex justify-content-center flex-column">
<h3 class="mt-3">Choose a plan for your next project</h3>
<p class="lead">You have Free Unlimited Updates and Premium Support on each package. You also have 20 days to request a refund.</p>
<div class="nav-wrapper me-auto mt-4 mb-5 mb-lg-0">
<ul class="nav nav-pills nav-fill p-1 rounded-pill" id="tabs-pricing" role="tablist">
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 active rounded-pill" id="tabs-iconpricing-tab-1" data-bs-toggle="tab" href="#personal" role="tab" aria-controls="tabs-pricing-tab-1" aria-selected="true">
Freelancer
</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 rounded-pill" id="tabs-iconpricing-tab-2" data-bs-toggle="tab" href="#commercial" role="tab" aria-controls="tabs-pricing-tab-2" aria-selected="false">
Startup
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-7 col-md-12 ms-lg-auto me-lg-auto">
<div class="tab-content tab-space">
<div class="tab-pane active" id="personal">
<div class="row">
<div class="col-md-6">
<div class="card card-pricing bg-white border-0 text-center mb-4">
<div class="card-header bg-transparent">
<h6 class="text-uppercase ls-1 py-3 mb-0">Standard</h6>
</div>
<div class="card-body text-dark">
<p class="display-2 font-weight-bold mb-0">$25</p>
<span>per month</span>
<ul class="list-unstyled my-4">
<li class="align-items-center">
<b>20GB</b> <span>File Storage</span>
</li>
<li class="align-items-center my-2">
<b>15</b> <span>Users</span>
</li>
<li class="align-items-center">
<b>False</b> <span>Support</span>
</li>
</ul>
</div>
<div class="card-footer bg-transparent">
<button class="btn btn-outline-primary">Request a demo</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-pricing bg-gradient-primary border-0 text-center mb-4 overflow-hidden">
<div class="card-header bg-transparent">
<h6 class="text-uppercase text-white ls-1 py-3 mb-0">Premium</h6>
</div>
<div class="card-body text-white position-relative">
<p class="display-2 font-weight-bold mb-0">$59</p>
<span>per month</span>
<ul class="list-unstyled my-4">
<li class="align-items-center">
<b>50GB</b> <span>File Storage</span>
</li>
<li class="align-items-center my-2">
<b>100</b> <span>Users</span>
</li>
<li class="align-items-center">
<b>Premium</b> <span>Support</span>
</li>
</ul>
</div>
<div class="card-footer bg-transparent position-relative">
<button class="btn bg-white text-dark">Request a demo</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="commercial">
<div class="row">
<div class="col-md-6">
<div class="card card-pricing bg-white border-0 text-center mb-4">
<div class="card-header bg-transparent">
<h6 class="text-uppercase ls-1 py-3 mb-0">Gold</h6>
</div>
<div class="card-body text-dark">
<p class="display-2 font-weight-bold mb-0">$100</p>
<span>per month</span>
<ul class="list-unstyled my-4">
<li class="align-items-center">
<b>200GB</b> <span>File Storage</span>
</li>
<li class="align-items-center my-2">
<b>Unlimited</b> <span>Users</span>
</li>
<li class="align-items-center">
<b>Premium</b> <span>Support</span>
</li>
</ul>
</div>
<div class="card-footer bg-transparent">
<button class="btn btn-outline-primary">Request a demo</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-pricing bg-gradient-primary border-0 text-center mb-4 overflow-hidden">
<div class="card-header bg-transparent">
<h6 class="text-uppercase text-white ls-1 py-3 mb-0">Platinum</h6>
</div>
<div class="card-body text-white position-relative">
<p class="display-2 font-weight-bold mb-0">$135</p>
<span>per month</span>
<ul class="list-unstyled my-4">
<li class="align-items-center">
<b>500GB</b> <span>File Storage</span>
</li>
<li class="align-items-center my-2">
<b>Unlimited</b> <span>Users</span>
</li>
<li class="align-items-center">
<b>No time</b> <span>Tracking</span>
</li>
</ul>
</div>
<div class="card-footer bg-transparent position-relative">
<button class="btn bg-white text-dark">Request a demo</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END Pricing w/ 2 cards & nav tabs -->Pricing 3
<section class="py-3">
<div class="bg-gradient-primary position-relative">
<div class="container pb-lg-9 pb-10 pt-7 postion-relative z-index-2">
<div class="row">
<div class="col-md-6 mx-auto text-center">
<h3 class="text-white">See our pricing</h3>
<p class="text-white">You have Free Unlimited Updates and Premium Support on each package.</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-7 mx-auto text-center">
<div class="nav-wrapper mt-5 position-relative z-index-2">
<ul class="nav nav-pills nav-fill flex-row p-1 rounded-pill" id="tabs-pricing" role="tablist">
<li class="nav-item">
<a class="nav-link mb-0 active rounded-pill" id="tabs-iconpricing-tab-1" data-bs-toggle="tab" href="#monthly" role="tab" aria-controls="monthly" aria-selected="true">
Monthly
</a>
</li>
<li class="nav-item">
<a class="nav-link mb-0 rounded-pill" id="tabs-iconpricing-tab-2" data-bs-toggle="tab" href="#annual" role="tab" aria-controls="annual" aria-selected="false">
Annual
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="mt-n8">
<div class="container">
<div class="tab-content tab-space">
<div class="tab-pane active" id="monthly">
<div class="row">
<div class="col-lg-4 mb-lg-0 mb-4">
<div class="card">
<div class="card-header text-center pt-4 pb-3">
<span class="badge rounded-pill bg-light text-dark">Starter</span>
<h1 class="font-weight-bold mt-2">
<small>$</small>59
</h1>
</div>
<div class="card-body text-lg-start text-center pt-0">
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">2 team members</span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">20GB Cloud storage </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-minus text-dark mt-1"></i>
<div>
<span class="ps-3">Integration help </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-minus text-dark mt-1"></i>
<div>
<span class="ps-3">Sketch Files </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-minus text-dark mt-1"></i>
<div>
<span class="ps-3">API Access </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-minus text-dark mt-1"></i>
<div>
<span class="ps-3">Complete documentation </span>
</div>
</div>
<a href="javascript:;" class="btn btn-icon bg-gradient-dark d-lg-block mt-3 mb-0">
Join
</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-lg-0 mb-4">
<div class="card">
<div class="card-header text-center pt-4 pb-3">
<span class="badge rounded-pill bg-light text-dark">Premium</span>
<h1 class="font-weight-bold mt-2">
<small>$</small>89
</h1>
</div>
<div class="card-body text-lg-start text-center pt-0">
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">10 team members</span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">40GB Cloud storage </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">Integration help </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">Sketch Files </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-minus text-dark mt-1"></i>
<div>
<span class="ps-3">API Access </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-minus text-dark mt-1"></i>
<div>
<span class="ps-3">Complete documentation </span>
</div>
</div>
<a href="javascript:;" class="btn btn-icon bg-gradient-primary d-lg-block mt-3 mb-0">
Try Premium
</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-lg-0 mb-4">
<div class="card">
<div class="card-header text-center pt-4 pb-3">
<span class="badge rounded-pill bg-light text-dark">Enterprise</span>
<h1 class="font-weight-bold mt-2">
<small>$</small>99
</h1>
</div>
<div class="card-body text-lg-start text-center pt-0">
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">Unlimited team members</span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">100GB Cloud storage </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">Integration help </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">Sketch Files </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">API Access </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<i class="fas fa-check text-success mt-1"></i>
<div>
<span class="ps-3">Complete documentation </span>
</div>
</div>
<a href="javascript:;" class="btn btn-icon bg-gradient-dark d-lg-block mt-3 mb-0">
Join
</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="annual">
<div class="row">
<div class="col-lg-4 mb-lg-0 mb-4">
<div class="card">
<div class="card-header text-center pt-4 pb-3">
<span class="badge rounded-pill bg-light text-dark">Starter</span>
<h1 class="font-weight-bold mt-2">
<small>$</small>119
</h1>
</div>
<div class="card-body text-lg-start text-center pt-0">
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">2 team members</span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">20GB Cloud storage </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
<i class="fas fa-minus"></i>
</div>
<div>
<span class="ps-3">Integration help </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
<i class="fas fa-minus"></i>
</div>
<div>
<span class="ps-3">Sketch Files </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
<i class="fas fa-minus"></i>
</div>
<div>
<span class="ps-3">API Access </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
<i class="fas fa-minus"></i>
</div>
<div>
<span class="ps-3">Complete documentation </span>
</div>
</div>
<a href="javascript:;" class="btn btn-icon bg-gradient-dark d-lg-block mt-3 mb-0">
Join
<i class="fas fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-lg-0 mb-4">
<div class="card">
<div class="card-header text-center pt-4 pb-3">
<span class="badge rounded-pill bg-light text-dark">Premium</span>
<h1 class="font-weight-bold mt-2">
<small>$</small>159
</h1>
</div>
<div class="card-body text-lg-start text-center pt-0">
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">10 team members</span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">40GB Cloud storage </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">Integration help </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">Sketch Files </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
<i class="fas fa-minus"></i>
</div>
<div>
<span class="ps-3">API Access </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
<i class="fas fa-minus"></i>
</div>
<div>
<span class="ps-3">Complete documentation </span>
</div>
</div>
<a href="javascript:;" class="btn btn-icon bg-gradient-primary d-lg-block mt-3 mb-0">
Try Premium
<i class="fas fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-lg-0 mb-4">
<div class="card">
<div class="card-header text-center pt-4 pb-3">
<span class="badge rounded-pill bg-light text-dark">Enterprise</span>
<h1 class="font-weight-bold mt-2">
<small>$</small>399
</h1>
</div>
<div class="card-body text-lg-start text-center pt-0">
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">Unlimited team members</span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">100GB Cloud storage </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">Integration help </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">Sketch Files </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">API Access </span>
</div>
</div>
<div class="d-flex justify-content-lg-start justify-content-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-3">Complete documentation </span>
</div>
</div>
<a href="javascript:;" class="btn btn-icon bg-gradient-dark d-lg-block mt-3 mb-0">
Join
<i class="fas fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Pricing 4
<section class="py-md-7">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto text-center">
<h3>Pick the best plan for you</h3>
<p>You have Free Unlimited Updates and Premium Support on each package.</p>
</div>
</div>
<div class="row">
<div class="col-lg-5 col-md-8 col-12 mx-auto text-center">
<div class="nav-wrapper mt-5">
<ul class="nav nav-pills nav-fill flex-row p-1 rounded-pill" id="tabs-pricing" role="tablist">
<li class="nav-item">
<a class="nav-link rounded-pill mb-0 active" id="tabs-iconpricing-tab-1" data-bs-toggle="tab" href="#tabs-pricing-tab-1" role="tab" aria-selected="true">
Annual
</a>
</li>
<li class="nav-item">
<a class="nav-link rounded-pill mb-0" id="tabs-iconpricing-tab-2" data-bs-toggle="tab" href="#tabs-pricing-tab-2" role="tab" aria-selected="false">
Monthly
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
<div class="card shadow-none h-100">
<div class="card-header text-sm-start text-center pt-4 pb-3 px-4">
<h5 class="mb-1">Starter</h5>
<p class="mb-3 text-sm">Free access for 2 members</p>
<h3 class="font-weight-bold mt-3">
$199 <small class="text-sm text-secondary font-weight-bold">/ year</small>
</h3>
<a href="javascript:;" class="btn bg-gradient-dark w-100 rounded-pill mt-4 mb-2">Buy now</a>
</div>
<hr class="horizontal dark my-0">
<div class="card-body">
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm">Complete documentation</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm">Working materials in Sketch</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
<div class="card shadow-none h-100">
<div class="card-header text-sm-start text-center pt-4 pb-3 px-4">
<h5 class="mb-1">Pro</h5>
<p class="mb-3 text-sm">Free access for 30 members</p>
<h3 class="font-weight-bold mt-3">
$299 <small class="text-sm text-secondary font-weight-bold">/ year</small>
</h3>
<a href="javascript:;" class="btn bg-gradient-dark w-100 rounded-pilld mt-4 mb-2">Buy now</a>
</div>
<hr class="horizontal dark my-0">
<div class="card-body">
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm">Complete documentation</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm">Working materials in Sketch</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm">2GB cloud storage</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
<div class="card shadow-none bg-gradient-dark h-100 overflow-hidden">
<div class="card-header bg-transparent text-sm-start text-center pt-4 pb-3 px-4">
<h5 class="mb-1 text-white">Premium</h5>
<p class="mb-3 text-sm text-white">Free access for 200 members</p>
<h3 class="font-weight-bold mt-3 text-white">
$499 <small class="text-sm text-secondary font-weight-bold">/ year</small>
</h3>
<a href="javascript:;" class="btn shadow-none btn-white w-100 rounded-pill mt-4 mb-2">Buy now</a>
</div>
<hr class="horizontal light my-0">
<div class="card-body">
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">Complete documentation</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">Working materials in Sketch</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">20GB cloud storage</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">100 team members</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
<div class="card shadow-none h-100">
<div class="card-header text-sm-start text-center pt-4 pb-3 px-4">
<h5 class="mb-1">Enterprise</h5>
<p class="mb-3 text-sm">Free access for all members</p>
<h3 class="font-weight-bold mt-3">
$899 <small class="text-sm text-secondary font-weight-bold">/ year</small>
</h3>
<a href="javascript:;" class="btn bg-gradient-dark w-100 rounded-pill mt-4 mb-2">Buy now</a>
</div>
<hr class="horizontal dark my-0">
<div class="card-body">
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm">Complete documentation</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm">Working materials in Sketch</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm">100GB cloud storage</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm">500 team members</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm">Premium support</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Pricing 5
<section class="py-lg-7 bg-light">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto text-center mb-5">
<h2>Best no-tricks pricing</h2>
<p class="lead">If you're not satisfied, contact us within the first 30 days and we'll send you a full refund.</p>
</div>
</div>
<div class="row">
<div class="card">
<div class="row">
<div class="col-lg-8">
<div class="card-body">
<h3 class="text-info">Lifetime Membership</h3>
<p>You have Free Unlimited Updates and Premium Support on each package. You also have 30 days to request a refund.</p>
<div class="row mt-5 mb-2">
<div class="col-lg-3 col-12">
<h6 class="text-dark tet-uppercase">What's included</h6>
</div>
<div class="col-6">
<hr class="horizontal dark">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-12 ps-0">
<div class="d-flex align-items-center p-2">
<i class="fas fa-check text-dark"></i>
<div>
<span class="ps-2">Private code access</span>
</div>
</div>
<div class="d-flex align-items-center p-2">
<i class="fas fa-check text-dark"></i>
<div>
<span class="ps-2">Free entry to all repositories</span>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-12 ps-sm-2 ps-0">
<div class="d-flex align-items-center p-2">
<i class="fas fa-check text-dark"></i>
<div>
<span class="ps-2">Pro member accounts</span>
</div>
</div>
<div class="d-flex align-items-center p-2">
<i class="fas fa-check text-dark"></i>
<div>
<span class="ps-2">Support team full assist</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 my-auto">
<div class="card-body text-center">
<h6 class="mt-sm-4 mt-0 mb-0">Pay once, own it forever</h6>
<h1 class="mt-0">
<small>$</small>399
</h1>
<button type="button" class="btn bg-gradient-info btn-lg mt-2">Get Access</button>
<p class="text-sm">Get a free sample (20MB)</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Pricing 6
<section class="py-3">
<div class="bg-gradient-dark position-relative">
<div class="container pb-lg-9 pb-7 pt-7 postion-relative z-index-2">
<div class="row">
<div class="col-md-8 mx-auto text-center">
<span class="badge bg-info mb-2">Pricing</span>
<h3 class="text-white">See our pricing</h3>
<p class="text-white">You have Free Unlimited Updates and Premium Support on each package.</p>
</div>
</div>
</div>
</div>
<div class="mt-n8">
<div class="container">
<div class="row">
<div class="col-lg-3 mb-lg-auto mb-4 my-auto p-md-0 ms-auto">
<div class="card border-radius-top-end-lg-0 border-radius-bottom-end-lg-0">
<div class="card-header text-center pt-4 pb-3">
<h6 class="text-dark opacity-8 text mb-0">Starter</h6>
<h1 class="font-weight-bolder">
<small>$</small>199
</h1>
</div>
<div class="card-body mx-auto pt-0">
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Complete documentation</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Working materials in Sketch</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">500MB cloud storage</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Lite support</span>
</div>
</div>
</div>
<div class="card-footer pt-0">
<a href="javascript:;" class="btn w-100 bg-gradient-dark mb-0">
Buy now
</a>
</div>
</div>
</div>
<div class="col-lg-3 p-md-0 mb-lg-auto mb-4 z-index-2">
<div class="card">
<div class="card-header text-center pt-4 pb-3">
<h6 class="text-dark opacity-8 text mb-0 mt-2">Pro</h6>
<h1 class="font-weight-bolder">
<small>$</small>299
</h1>
</div>
<div class="card-body mx-auto pt-0">
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Complete documentation</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Working materials in Sketch</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">100GB cloud storage</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">500 team members</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Premium support</span>
</div>
</div>
</div>
<div class="card-footer pt-0">
<a href="javascript:;" class="btn btn-icon bg-gradient-info d-block mb-0">
Try Pro
</a>
</div>
</div>
</div>
<div class="col-lg-3 mb-lg-auto mb-4 my-auto p-md-0 me-auto">
<div class="card border-radius-top-start-lg-0 border-radius-bottom-start-lg-0">
<div class="card-header text-center pt-4 pb-2">
<h6 class="text-dark opacity-8 text mb-0">Premium</h6>
<h1 class="font-weight-bolder">
<small>$</small>399
</h1>
</div>
<div class="card-body mx-auto pt-0">
<div class="justify-content-start d-flex px-2 py-1 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Complete documentation</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Working materials in Sketch</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">2GB cloud storage</span>
</div>
</div>
<div class="justify-content-start d-flex px-2 py-1">
<div>
<i class="fas fa-check text-info text-sm"></i>
</div>
<div class="ps-2">
<span class="text-sm">Premium support</span>
</div>
</div>
</div>
<div class="card-footer pt-0">
<a href="javascript:;" class="btn w-100 bg-gradient-dark mb-0">Buy now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Pricing 7
<section class="py-5 bg-dark position-relative overflow-hidden">
<div class="container py-7 postion-relative z-index-2">
<div class="col-lg-6 col-md-8 mx-auto text-center mb-5">
<h3 class="text-white">Pick the best plan for you</h3>
<p class="text-white opacity-6">You have Free Unlimited Updates and Premium Support on each package.</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 ms-lg-auto mb-sm-0 mb-5">
<div class="card text-center">
<div class="card-header bg-transparent">
<h5 class="mt-4 mb-2">Freelancer</h5>
<h2>
$29 <small class="text-sm text-secondary font-weight-bold">/ month</small>
</h2>
</div>
<div class="card-body">
<ul class="list-unstyled max-width-200 mx-auto">
<li>
<b>10</b> Projects
</li>
<hr class="horizontal dark">
<li>
<b>1</b> Team Members
</li>
<hr class="horizontal dark">
<li>
<b>5</b> Personal Contacts
</li>
<hr class="horizontal dark">
<li>
<b>500</b> Messages
</li>
</ul>
<button type="button" class="btn bg-gradient-warning mt-4">Get Access</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 me-lg-auto">
<div class="card text-center bg-gradient-warning">
<div class="card-header bg-transparent">
<h5 class="mt-4 mb-2 text-white">Startup</h5>
<h2 class="text-white">
$49 <small class="text-sm">/ month</small>
</h2>
</div>
<div class="card-body">
<ul class="list-unstyled max-width-200 mx-auto text-white">
<li>
<b>100</b> Projects
</li>
<hr class="horizontal light">
<li>
<b>25</b> Team Members
</li>
<hr class="horizontal light">
<li>
<b>15</b> Personal Contacts
</li>
<hr class="horizontal light">
<li>
<b>5K</b> Messages
</li>
</ul>
<button type="button" class="btn btn-white mt-4">Get Access</button>
</div>
</div>
</div>
</div>
</div>
</section>Pricing 8
<section class="py-4 bg-gray-100">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 mx-auto text-center">
<h3>Pick the best plan for you</h3>
<p>You have Free Unlimited Updates and Premium Support on each package.</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-8 mx-auto mt-4 mb-3">
<div class="nav-wrapper">
<ul class="nav nav-pills rounded-pill nav-fill p-1" id="tabs-pricing" role="tablist">
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 active rounded-pill" id="tabs-iconpricing-tab-1" data-bs-toggle="tab" href="#tabs-pricing-tab-1" role="tab" aria-controls="tabs-pricing-tab-1" aria-selected="true">
Annual
</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 rounded-pill" id="tabs-iconpricing-tab-2" data-bs-toggle="tab" href="#tabs-pricing-tab-2" role="tab" aria-controls="tabs-pricing-tab-2" aria-selected="false">
Monthly
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-4 col-md-6">
<div class="card card-pricing">
<div class="card-header bg-gradient-dark text-center py-4 position-relative">
<div class="z-index-1 position-relative">
<h5 class="text-white">Freelancer</h5>
<h1 class="text-white mt-2 mb-0">
<small>$</small>199</h1>
<h6 class="text-white">per year</h6>
</div>
</div>
<div class="card-body text-center">
<ul class="list-unstyled max-width-200 mx-auto">
<li>
<b>10</b> Projects
<hr class="horizontal dark">
</li>
<li>
<b>1</b> Team Members
<hr class="horizontal dark">
</li>
<li>
<b>5</b> Personal Contacts
<hr class="horizontal dark">
</li>
<li>
<b>500</b> Messages
</li>
</ul>
<a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0">
Get started
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-5 mt-sm-0 ">
<div class="card card-pricing">
<div class="card-header bg-gradient-primary text-center py-4 position-relative">
<div class="z-index-1 position-relative">
<h5 class="text-white">Startup</h5>
<h1 class="text-white mt-2 mb-0">
<small>$</small>349</h1>
<h6 class="text-white">per year</h6>
</div>
</div>
<div class="card-body text-center">
<ul class="list-unstyled max-width-200 mx-auto">
<li>
<b>10</b> Projects
<hr class="horizontal dark">
</li>
<li>
<b>1</b> Team Members
<hr class="horizontal dark">
</li>
<li>
<b>5</b> Personal Contacts
<hr class="horizontal dark">
</li>
<li>
<b>500</b> Messages
</li>
</ul>
<a href="javascript:;" class="btn bg-gradient-primary w-100 mt-4 mb-0">
Get started
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-5 mt-lg-0 mx-md-auto">
<div class="card card-pricing">
<div class="card-header bg-gradient-dark text-center py-4 position-relative">
<div class="z-index-1 position-relative">
<h5 class="text-white">Company</h5>
<h1 class="text-white mt-2 mb-0">
<small>$</small>779</h1>
<h6 class="text-white">per year</h6>
</div>
</div>
<div class="card-body text-center">
<ul class="list-unstyled max-width-200 mx-auto">
<li>
<b>10</b> Projects
<hr class="horizontal dark">
</li>
<li>
<b>1</b> Team Members
<hr class="horizontal dark">
</li>
<li>
<b>5</b> Personal Contacts
<hr class="horizontal dark">
</li>
<li>
<b>500</b> Messages
</li>
</ul>
<a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0">
Get started
</a>
</div>
</div>
</div>
</div>
</div>
</section>