One Month Free
* Place some disclaimer text here
Monthly
* Place some disclaimer text here
Monthly
* Place some disclaimer text here
<!--start pricing-->
<section class="mb-xxl-14 mb-lg-8 mb-6">
<div class="container">
<div class="row gy-5">
<!-- free -->
<div class="col-lg-4 col-md-4 col-12">
<!--card-->
<div class="card rounded-3">
<!--card body-->
<div class="card-body p-lg-6 p-md-3">
<!--content-->
<h4 class="mb-3 text-primary">Free</h4>
<span class="h1">$0.00</span>
<p class="mb-0">One Month Free</p>
</div>
<div class="card-body pb-6 pt-0 px-lg-6 px-md-3">
<!--list-->
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Total Clients/Coachees</span>
<span class="text-dark">2</span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Storage</span>
<span class="text-dark">50 MB</span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Base Functionality</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Calendar Syncronization</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Public Coach Profile</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Inquiries & Contacts</span>
<span class="text-danger font-12"><i class="fas fa-times-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Librariess</span>
<span class="text-danger font-12"><i class="fas fa-times-circle"></i></span>
</li>
</ul>
<!--button-->
<div class="d-grid">
<a href="#"
class="btn btn-outline-secondary mt-6 mb-3">Get Started Free</a>
</div>
<p class="mb-0 font-14">* Place some disclaimer text here</p>
</div>
</div>
</div>
<!-- basic plan -->
<div class="col-lg-4 col-md-4 col-12">
<!--card-->
<div class="card rounded-3">
<!--card body-->
<div class="card-body p-lg-6 p-md-3">
<!--content-->
<h4 class="mb-3 text-primary">Basic Plan</h4>
<span class="h1">$19.00</span>
<p class="mb-0">Monthly</p>
</div>
<div class="card-body pb-6 pt-0 px-lg-6 px-md-3">
<!--list-->
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Total Clients/Coachees</span>
<span class="text-dark">10</span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Storage</span>
<span class="text-dark">150 MB</span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Base Functionality</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Calendar Syncronization</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Public Coach Profile</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Inquiries & Contacts</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Librariess</span>
<span class="text-danger font-12"><i class="fas fa-times-circle"></i></span>
</li>
</ul>
<!--button-->
<div class="d-grid">
<a href="#"
class="btn btn-primary mt-6 mb-3">Get Started</a>
</div>
<p class="mb-0 font-14">* Place some disclaimer text here</p>
</div>
</div>
</div>
<!-- premium plan -->
<div class="col-lg-4 col-md-4 col-12">
<!--card-->
<div class="card rounded-3">
<!--card body-->
<div class="card-body p-lg-6 p-md-3">
<h4 class="mb-3 text-primary">Premium Plan</h4>
<span class="h1">$49.00</span>
<p class="mb-0">Monthly</p>
</div>
<div class="card-body pb-6 pt-0 px-lg-6 px-md-3">
<!--list-->
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Total Clients/Coachees</span>
<span class="text-dark">25</span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Storage</span>
<span class="text-dark">500 MB</span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Base Functionality</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Calendar Syncronization</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Public Coach Profile</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Inquiries & Contacts</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
<li class="d-flex justify-content-between
align-items-center mb-2">
<span>Librariess</span>
<span class="text-success font-12"><i class="fas fa-check-circle"></i></span>
</li>
</ul>
<!--button-->
<div class="d-grid">
<a href="#"
class="btn btn-outline-secondary mt-6 mb-3">Get Started</a>
</div>
<p class="mb-0 font-14">* Place some disclaimer text here</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of pricing--><div class="card rounded-3 mb-4">
<!-- card header -->
<div class="card-header bg-white p-4">
<h3 class="mb-0 h4">Subscription Plan</h3>
</div>
<!-- card body -->
<div class="card-body p-4">
<div class="bg-light-primary p-4 rounded-3 mb-4">
<div class="d-flex justify-content-between mb-4">
<div class="font-13">
<h4 class="mb-1">Basic Plan</h4>
<span>2 Clients, 250 Storage Capacity</span>
</div>
<div>
<span class="h4">$19.00</span>
<span class="font-13 text-muted ms-1">/ month</span>
</div>
</div>
<div class="d-flex justify-content-between">
<div>
<a href="#"
class="btn btn-primary btn-sm me-4">Upgrade Plan</a>
<a href="#"
class="text-secondary">Cancel Subscription</a>
</div>
<div class="font-13">
<span>Next payment due</span>
<span class="text-dark ms-2 fw-bold">April 22, 2024</span>
</div>
</div>
</div>
<div class="bg-light p-4 rounded-3">
<div class="d-flex justify-content-between mb-4">
<div class="font-13">
<h4 class="mb-1">Free Plan</h4>
<span>1 Clients, 50 Storage Capacity</span>
</div>
<div>
<span class="h4">$0.00</span>
<span class="font-13 text-muted ms-1">/ month</span>
</div>
</div>
<div class="d-flex justify-content-between">
<div>
<a href="#"
class="btn btn-dark btn-sm me-4 disabled">Expired Plan</a>
</div>
<div class="font-13">
<span>Next payment due</span>
<span class="text-dark ms-2 fw-bold">April 22, 2024</span>
</div>
</div>
</div>
</div>
</div>We are so glad you are here. There’s a plan for every type of a need - choose the one that fits your needs best. Both plans auto-renew so be sure to make any changes 7 days before the end of your subscription cycle.
Charges you every month and you can cancel anytime you want.
Charges you once a year and saves you money.
<!--start join now-->
<section class="py-lg-8 py-xxl-16 py-6 bg-light">
<div class="container">
<!--row-->
<div class="row">
<div class="col-xxl-6 offset-xxl-3 col-lg-8 offset-lg-2
col-md-12 col-12">
<div class="text-center mb-lg-9 mb-5">
<!--content-->
<h2 class="fw-bold mb-3">
Join Now &
<span class="text-bottom-line">Start Free</span>
7 days
</h2>
<p class="mb-0">
We are so glad you are here. There’s a plan for every type of a need - choose the one that
fits your needs best. Both plans auto-renew so be sure to make any
changes 7 days before the end of your subscription cycle.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1 col-md-12 col-12">
<div class="row">
<div class="col-xl-6 col-md-12 col-lg-6 col-12">
<!--card-->
<div class="card mb-5 mb-lg-0">
<!--card-body-->
<div class="card-body p-5">
<!--content-->
<span class="text-uppercase text-dark">Monthly</span>
<div class="d-flex align-items-center mt-5">
<h2>$12.99/mo</h2>
<span class="ms-1">(USD)</span>
</div>
<p class="mb-0">Charges you every month and you can cancel
anytime you want.</p>
<!--list-->
<ul class="list-unstyled mt-4">
<li class="mb-2">
<!--icon-->
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16"
fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16
0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97
11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
/>
</svg>
</span>
<span class="ms-1">New videos every week</span>
</li>
<li class="mb-2">
<span>
<!--icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16"
fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16
0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97
11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
/>
</svg>
</span>
<span class="ms-1">Premium Courses</span>
</li>
<li class="mb-2">
<span>
<!--icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16"
fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16
0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97
11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
/>
</svg>
</span>
<span class="ms-1">Online YouTube Courses</span>
</li>
<li class="mb-2">
<span>
<!--icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16"
fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16
0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97
11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
/>
</svg>
</span>
<span class="ms-1">Exclusive Classes and Guest Instructors</span>
</li>
</ul>
<!--button-->
<div class="mt-5 d-grid">
<a href="#"
class="btn btn-outline-secondary">Free 7 Days Trial</a>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-md-12 col-lg-6 col-12">
<!--card-->
<div class="card">
<!--card body-->
<div class="card-body p-5">
<!--content-->
<span class="text-uppercase text-dark">Annual</span>
<div class="d-flex align-items-center mt-5">
<h2>$129.99/year</h2>
<span class="ms-1">(USD)</span>
</div>
<p class="mb-0">Charges you once a year and saves you
money.</p>
<!--list-->
<ul class="list-unstyled mt-4">
<li class="mb-2">
<span>
<!--icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16"
fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16
0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97
11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
/>
</svg>
</span>
<span class="ms-1">All the same content as the monthly
plan</span>
</li>
<li class="mb-2">
<span>
<!--icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16"
fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16
0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97
11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
/>
</svg>
</span>
<span class="ms-1">Save $25 a year compared monthly plan</span>
</li>
<li class="mb-2">
<span>
<!--icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16"
fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16
0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97
11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
/>
</svg>
</span>
<span class="ms-1">Online YouTube Courses</span>
</li>
<li class="mb-2">
<span>
<!--icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16"
fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16
0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97
11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
/>
</svg>
</span>
<span class="ms-1">Personal Training</span>
</li>
<li class="mb-2">
<span>
<!--icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16"
fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16
0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97
11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
/>
</svg>
</span>
<span class="ms-1">Premium Courses</span>
</li>
</ul>
<!--button-->
<div class="mt-5 d-grid">
<a href="#"
class="btn btn-secondary">Start Trial 7 Days</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of join mow-->