Pricing 1
<section class="py-3">
<div class="bg-gradient-primary position-relative m-3 border-radius-xl">
<img src="../../assets/img/shapes/waves-white.svg" alt="pattern-lines" class="position-absolute start-0 top-md-0 w-100 opacity-6">
<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-gradient-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-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-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-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-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-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-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" id="tabs-pricing" role="tablist">
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 active" 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" 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">
<img src="../../assets/img/shapes/waves-white.svg" alt="pattern-lines" class="position-absolute opacity-8">
<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 btn-outline-white">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">
<img src="../../assets/img/shapes/waves-white.svg" alt="pattern-lines" class="position-absolute opacity-8">
<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 btn-outline-white">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 m-3 border-radius-xl">
<img src="../../assets/img/shapes/waves-white.svg" alt="pattern-lines" class="position-absolute opacity-6 start-0 top-0 w-100">
<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" id="tabs-pricing" role="tablist">
<li class="nav-item">
<a class="nav-link mb-0 active" 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" 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">
<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>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">
<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>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">
<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 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-5">
<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-8 col-md-10 col-12 mx-auto text-center">
<div class="nav-wrapper mt-5">
<ul class="nav nav-pills nav-fill flex-row p-1 position-relative" id="tabs-pricing-4" role="tablist">
<li class="nav-item">
<a class="nav-link mb-0 active" 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">
Monthly
</a>
</li>
<li class="nav-item">
<a class="nav-link mb-0" 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">
Quarterly
</a>
</li>
<li class="nav-item">
<a class="nav-link mb-0" 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">
Annual
</a>
</li>
<li class="nav-item">
<a class="nav-link mb-0" 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">
Lifetime access
</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 border 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-bolder mt-3">
$199 <small class="text-sm text-secondary font-weight-bold">/ year</small>
</h3>
<a href="javascript:;" class="btn btn-sm bg-gradient-dark w-100 border-radius-md 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 border 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-bolder mt-3">
$299 <small class="text-sm text-secondary font-weight-bold">/ year</small>
</h3>
<a href="javascript:;" class="btn btn-sm bg-gradient-dark w-100 border-radius-md 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 border bg-gradient-dark h-100 overflow-hidden">
<img src="../../assets/img/shapes/pattern-lines.svg" alt="pattern-lines" class="position-absolute">
<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-bolder mt-3 text-white">
$499 <small class="text-sm text-secondary font-weight-bold">/ year</small>
</h3>
<a href="javascript:;" class="btn btn-sm btn-white w-100 border-radius-md 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 border 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-bolder mt-3">
$899 <small class="text-sm text-secondary font-weight-bold">/ year</small>
</h3>
<a href="javascript:;" class="btn btn-sm bg-gradient-dark w-100 border-radius-md 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-5 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-gradient 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="info d-flex align-items-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-info opacity-6 shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-2">Private code access</span>
</div>
</div>
<div class="info d-flex align-items-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-info opacity-6 shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-2">Free entry to all repositories</span>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-12">
<div class="info d-flex align-items-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-info opacity-6 shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<div>
<span class="ps-2">Pro member accounts</span>
</div>
</div>
<div class="info d-flex align-items-center p-2">
<div class="icon icon-shape icon-xs rounded-circle bg-gradient-info opacity-6 shadow text-center">
<i class="fas fa-check opacity-10"></i>
</div>
<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-4 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 m-3 border-radius-xl">
<img src="../../assets/img/shapes/waves-white.svg" alt="pattern-lines" class="position-absolute start-0 top-md-0 w-100 opacity-6">
<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-gradient-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
<i class="fas fa-arrow-right ms-1"></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-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-gradient-dark position-relative overflow-hidden">
<img src="../../assets/img/shapes/pattern-lines.svg" alt="pattern-lines" class="position-absolute start-0 top-0 w-100 h-100 opacity-6">
<div class="position-absolute w-100 z-inde-1 top-0 mt-n3">
<svg width="100%" viewBox="0 -2 1920 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>wave-down</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g fill="#FFFFFF" fill-rule="nonzero">
<g id="wave-down">
<path d="M0,60.8320331 C299.333333,115.127115 618.333333,111.165365 959,47.8320321 C1299.66667,-15.5013009 1620.66667,-15.2062179 1920,47.8320331 L1920,156.389409 L0,156.389409 L0,60.8320331 Z" id="Path-Copy-2" transform="translate(960.000000, 78.416017) rotate(180.000000) translate(-960.000000, -78.416017) "></path>
</g>
</g>
</g>
</svg>
</div>
<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>
<div class="position-absolute w-100 bottom-0">
<svg width="100%" viewBox="0 -1 1920 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>wave-up</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(0.000000, 5.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="wave-up" transform="translate(0.000000, -5.000000)">
<path d="M0,70 C298.666667,105.333333 618.666667,95 960,39 C1301.33333,-17 1621.33333,-11.3333333 1920,56 L1920,165 L0,165 L0,70 Z"></path>
</g>
</g>
</g>
</svg>
</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 nav-pills-info nav-fill p-1" id="tabs-pricing" role="tablist">
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 active" 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" 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">
<div class="col-lg-4 col-md-6">
<div class="card card-pricing">
<div class="card-header bg-gradient-dark text-center pt-4 pb-5 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="position-relative mt-n5" style="height: 50px;">
<div class="position-absolute w-100">
<svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="moving-waves">
<use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
<use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
<use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
<use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
<use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
<use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
</g>
</svg>
</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 text-center pt-4 pb-5 position-relative" style="background-image: url('../../assets/img/curved-images/curved6-small.jpg');background-size: cover;">
<span class="mask bg-gradient-dark opacity-4 border-radius-lg"></span>
<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="position-relative mt-n5" style="height: 50px;">
<div class="position-absolute w-100">
<svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="moving-waves">
<use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
<use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
<use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
<use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
<use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
<use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
</g>
</svg>
</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 pt-4 pb-5 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="position-relative mt-n5" style="height: 50px;">
<div class="position-absolute w-100">
<svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="moving-waves">
<use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
<use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
<use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
<use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
<use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
<use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
</g>
</svg>
</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>