<div class="container my-5">

​

​

  <!--Section: Content-->

  <section class="text-center">

​

    <!-- Section heading -->

    <h3 class="font-weight-bold dark-grey-text pb-2 mb-4">Our pricing plans</h3>

    <!-- Section description -->

    <p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam

      eum porro a pariatur veniam.</p>

​

    <!-- Grid row -->

    <div class="row">

​

      <!-- Grid column -->

      <div class="col-lg-4 col-md-12 mb-4">

​

        <!-- Pricing card -->

        <div class="card pricing-card white-text">

​

          <!-- Price -->

          <div class="aqua-gradient rounded-top">

            <h4 class="option">BASIC</h4>

          </div>

​

          <!-- Features -->

          <div class="card-body striped green-striped card-background px-5">

​

            <h2 class="my-4 pb-3 h1">20$</h2>

            <ul>

              <li>

                <p><strong>1</strong> project</p>

              </li>

              <li>

                <p><strong>100</strong> components</p>

              </li>

              <li>

                <p><strong>150</strong> features</p>

              </li>

              <li>

                <p><strong>200</strong> members</p>

              </li>

            </ul>

            <button class="mb-3 mt-3 btn aqua-gradient btn-rounded">Buy now</button>

​

          </div>

          <!-- Features -->

​

        </div>

​

        <!-- Pricing card -->

​

      </div>

      <!-- Grid column -->

​

      <!-- Grid column -->

      <div class="col-lg-4 col-md-6 mb-4">

​

        <!-- Pricing card -->

        <div class="card pricing-card white-text">

​

          <!-- Price -->

          <div class="peach-gradient rounded-top">

            <h4 class="option">PRO</h4>

          </div>

​

          <!-- Features -->

          <div class="card-body striped orange-striped card-background px-5">

​

            <h2 class="my-4 pb-3 h1">80$</h2>

            <ul>

              <li>

                <p><strong>1</strong> project</p>

              </li>

              <li>

                <p><strong>100</strong> components</p>

              </li>

              <li>

                <p><strong>150</strong> features</p>

              </li>

              <li>

                <p><strong>200</strong> members</p>

              </li>

            </ul>

            <button class="mb-3 mt-3 btn peach-gradient btn-rounded">Buy now</button>

​

          </div>

          <!-- Features -->

​

        </div>

        <!-- Pricing card -->

​

      </div>

      <!-- Grid column -->

​

      <!-- Grid column -->

      <div class="col-lg-4 col-md-6 mb-4">

​

        <!-- Pricing card -->

        <div class="card pricing-card white-text">

​

          <!-- Price -->

          <div class="purple-gradient rounded-top">

            <h4 class="option">ENTERPRISE</h4>

          </div>

​

          <!-- Features -->

          <div class="card-body striped purple-striped card-background px-5">

​

            <h2 class="my-4 pb-3 h1">100$</h2>

            <ul>

              <li>

                <p><strong>1</strong> project</p>

              </li>

              <li>

                <p><strong>100</strong> components</p>

              </li>

              <li>

                <p><strong>150</strong> features</p>

              </li>

              <li>

                <p><strong>200</strong> members</p>

              </li>

            </ul>

            <button class="mb-3 mt-3 btn purple-gradient btn-rounded">Buy now</button>

​

          </div>

          <!-- Features -->

​

        </div>

        <!-- Pricing card -->

​

      </div>

      <!-- Grid column -->

​

    </div>

    <!-- Grid row -->

​

  </section>

  <!--Section: Content-->

​

​

</div>