Pricing

Copy
<section class="py-3">
  <div class="bg-gradient-primary">
    <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>
Copy
<!-- START Pricing w/ 2 cards & nav tabs -->
<section class="py-2 bg-gray-200">
  <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 shadow 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 bg-gradient-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/pattern-lines.svg" alt="pattern-lines" class="position-absolute opacity-6 h-100">
                  <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-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 bg-gradient-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/pattern-lines.svg" alt="pattern-lines" class="position-absolute opacity-6 h-100">
                  <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-white">Request a demo</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- END Pricing w/ 2 cards & nav tabs -->
Copy
<section class="py-3">
  <div class="bg-gradient-dark m-3 border-radius-xl">
    <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>
  </div>
  <div class="mt-n10">
    <div class="container">
      <div class="row mb-5">
        <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 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 shadow-lg">
                <span class="badge bg-light text-dark w-30 mt-n2 mx-auto">Starter</span>
                <div class="card-header text-center pt-4 pb-3">
                  <h1 class="font-weight-bold mt-2">
                    <small class="text-lg align-top me-1">$</small>59<small class="text-lg">/mo</small>
                  </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="material-icons my-auto">done</i>
                    <span class="ps-3">2 team members</span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">20GB Cloud storage </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">Integration help </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">remove</i>
                    <span class="ps-3">Sketch Files </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">remove</i>
                    <span class="ps-3">API Access </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">remove</i>
                    <span class="ps-3">Complete documentation </span>
                  </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 bg-gradient-dark shadow-lg">
                <span class="badge bg-primary w-30 mt-n2 mx-auto">Premium</span>
                <div class="card-header text-center pt-4 pb-3 bg-transparent">
                  <h1 class="font-weight-bold mt-2 text-white">
                    <small class="text-lg align-top me-1">$</small>89<small class="text-lg">/mo</small>
                  </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="material-icons my-auto text-white">done</i>
                    <span class="ps-3 text-white">10 team members</span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto text-white">done</i>
                    <span class="ps-3 text-white">40GB Cloud storage </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto text-white">done</i>
                    <span class="ps-3 text-white">Integration help </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto text-white">done</i>
                    <span class="ps-3 text-white">Sketch Files </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto text-white">remove</i>
                    <span class="ps-3 text-white">API Access </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto text-white">remove</i>
                    <span class="ps-3 text-white">Complete documentation </span>
                  </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 shadow-lg">
                <span class="badge bg-light text-dark w-30 mt-n2 mx-auto">Enterprise</span>
                <div class="card-header text-center pt-4 pb-3">
                  <h1 class="font-weight-bold mt-2">
                    <small class="text-lg align-top me-1">$</small>99<small class="text-lg">/mo</small>
                  </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="material-icons my-auto">done</i>
                    <span class="ps-3">Unlimited team members</span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">100GB Cloud storage </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">Integration help </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">Sketch Files </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">API Access </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">Complete documentation </span>
                  </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 shadow-lg">
                <span class="badge rounded-pill bg-light text-dark w-30 mx-auto">Starter</span>
                <div class="card-header text-center pt-4 pb-3">
                  <h1 class="font-weight-bold mt-2">
                    <small class="text-lg align-top me-1">$</small>119<small class="text-lg">/mo</small>
                  </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="material-icons my-auto">done</i>
                    <span class="ps-3">2 team members</span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">20GB Cloud storage </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">remove</i>
                    <span class="ps-3">Integration help </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">remove</i>
                    <span class="ps-3">Sketch Files </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">remove</i>
                    <span class="ps-3">API Access </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">remove</i>
                    <span class="ps-3">Complete documentation </span>
                  </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 bg-gradient-dark shadow-lg">
                <span class="badge rounded-pill bg-primary w-30 mx-auto">Premium</span>
                <div class="card-header text-center pt-4 pb-3 bg-transparent">
                  <h1 class="font-weight-bold mt-2 text-white">
                    <small class="text-lg align-top me-1">$</small>159<small class="text-lg">/mo</small>
                  </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="material-icons my-auto text-white">done</i>
                    <span class="ps-3 text-white">10 team members</span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto text-white">done</i>
                    <span class="ps-3 text-white">40GB Cloud storage </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto text-white">done</i>
                    <span class="ps-3 text-white">Integration help </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto text-white">done</i>
                    <span class="ps-3 text-white">Sketch Files </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto text-white">remove</i>
                    <span class="ps-3 text-white">API Access </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto text-white">remove</i>
                    <span class="ps-3 text-white">Complete documentation </span>
                  </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 shadow-lg">
                <span class="badge rounded-pill bg-light text-dark w-30 mx-auto">Enterprise</span>
                <div class="card-header text-center pt-4 pb-3">
                  <h1 class="font-weight-bold mt-2">
                    <small class="text-lg align-top me-1">$</small>399<small class="text-lg">/mo</small>
                  </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="material-icons my-auto">done</i>
                    <span class="ps-3">Unlimited team members</span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">100GB Cloud storage </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">Integration help </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">Sketch Files </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">API Access </span>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="material-icons my-auto">done</i>
                    <span class="ps-3">Complete documentation </span>
                  </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>
Copy
<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 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">
              <i class="material-icons my-auto text-dark">done</i>
              <span class="text-sm ps-3">Complete documentation</span>
            </div>

            <div class="d-flex pb-3">
              <i class="material-icons my-auto text-dark">done</i>
              <span class="text-sm ps-3">Working materials in Sketch</span>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
        <div class="card 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">
              <i class="material-icons my-auto text-dark">done</i>
              <span class="text-sm ps-3">Complete documentation</span>
            </div>

            <div class="d-flex pb-3">
              <i class="material-icons my-auto text-dark">done</i>
              <span class="text-sm ps-3">Working materials in Sketch</span>
            </div>

            <div class="d-flex pb-3">
              <i class="material-icons my-auto text-dark">done</i>
              <span class="text-sm ps-3">2GB cloud storage</span>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
        <div class="card bg-gradient-dark h-100">
          <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-white 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">
              <i class="material-icons my-auto text-white">done</i>
              <span class="text-sm text-white ps-3">Complete documentation</span>
            </div>

            <div class="d-flex pb-3">
              <i class="material-icons my-auto text-white">done</i>
              <span class="text-sm text-white ps-3">Working materials in Sketch</span>
            </div>

            <div class="d-flex pb-3">
              <i class="material-icons my-auto text-white">done</i>
              <span class="text-sm text-white ps-3">20GB cloud storage</span>
            </div>

            <div class="d-flex pb-3">
              <i class="material-icons my-auto text-white">done</i>
              <span class="text-sm text-white ps-3">100 team members</span>
            </div>

          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
        <div class="card 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">
              <i class="material-icons my-auto text-dark">done</i>
              <span class="text-sm ps-3">Complete documentation</span>
            </div>

            <div class="d-flex pb-3">
              <i class="material-icons my-auto text-dark">done</i>
              <span class="text-sm ps-3">Working materials in Sketch</span>
            </div>

            <div class="d-flex pb-3">
              <i class="material-icons my-auto text-dark">done</i>
              <span class="text-sm ps-3">100GB cloud storage</span>
            </div>

            <div class="d-flex pb-3">
              <i class="material-icons my-auto text-dark">done</i>
              <span class="text-sm ps-3">500 team members</span>
            </div>

            <div class="d-flex pb-3">
              <i class="material-icons my-auto text-dark">done</i>
              <span class="text-sm ps-3">Premium support</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<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 are not satisfied, contact us within the first 30 days and we will 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-dark">Lifetime Membership</h3>
              <p class="font-weight-normal">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 is 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="material-icons text-dark font-weight-bold">done</i>
                    <span class="ps-2">Private code access</span>
                  </div>
                  <div class="d-flex align-items-center p-2">
                    <i class="material-icons text-dark font-weight-bold">done</i>
                    <span class="ps-2">Free entry to all repositories</span>
                  </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="material-icons text-dark font-weight-bold">done</i>
                    <span class="ps-2">Pro member accounts</span>
                  </div>
                  <div class="d-flex align-items-center p-2">
                    <i class="material-icons text-dark font-weight-bold">done</i>
                    <span class="ps-2">Support team full assist</span>
                  </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-danger btn-lg mt-2">Get Access</button>
              <p class="text-sm font-weight-normal">Get a free sample (20MB)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<section class="py-3">
  <div class="position-relative overflow-hidden">
    <img src="../../assets/img/bg8.jpg" alt="pattern-lines" class="position-absolute start-0 top-md-0 w-100 opacity-10">
    <span class="mask bg-gradient-dark opacity-6"></span>
    <div class="container pb-lg-9 pb-7 pt-7 position-relative z-index-1">
      <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-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-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-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-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-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-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-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-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-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-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-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-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-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>
Copy
<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="container py-5 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>
Copy
<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-5">
        <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="bg-gradient-dark text-center py-3 position-relative mx-3 mt-n4 border-radius-xl">
            <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="bg-gradient-dark text-center py-3 position-relative mx-3 mt-n4 border-radius-xl">
            <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-info 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="bg-gradient-dark text-center py-3 position-relative mx-3 mt-n4 border-radius-xl">
            <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>