vvveb-cms/static/Vvvebjs/demo/landing/sections/pricing-table/pricing-table-7.html

<section class="pricing-table-7 my-3" aria-label="pricing-table-7">
  <div class="container py-5 overflow-hidden">
    <div class="row mb-5 pb-2">
      <div class="col-md-12 text-center">
        <div class="mb-4">
          <span class="small mt-4 d-block">LOREM IPSUM</span>
          <h2 class="display-2 mb-0">Pricing</h2>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
            <br> ligula malesuada placerat sit amet quis enim.
          </p>
        </div>
      </div>
    </div>
    <div class="row justify-content-center pt-2 pb-4">
      <div class="col-12 col-lg-4">
        <div class="text-center rounded border shadow-sm py-5 mb-5">
          <div class="text-center">
            <img src="demo/img/team-1.jpg" alt="Team 1" style="" loading="lazy" class="w-50 mb-2 rounded-4">
          </div>
          <div class="text-center">
            <div editable="rich">
              <h2>Personal</h2>
            </div>
          </div>
          <div class="text-center small">
            <div editable="rich">
              <p>Perfect for
                <strong>designers</strong>
              </p>
            </div>
          </div>
          <div class="text-center text-primary display-4">
            <p>
              <span>
                <b>$79</b>
              </span>
              <span class="lead">/ per year</span>
            </p>
          </div>
          <div class="">
            <ul class="list-unstyled mt-3 mb-4">
              <li class="py-2">
                <svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
                  <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
                </svg>
                <span>Build Unlimited Websites</span>
              </li>
              <li class="py-2">
                <svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
                  <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
                </svg>
                <span>Updates for 1 Year</span>
              </li>
              <li class="py-2">
                <svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
                  <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
                </svg>
                <span>Support for 1 Year</span>
              </li>
            </ul>
          </div>
          <div class="" style="z-index:4">
            <a class="btn btn-outline-primary" href="#" role="button">Sign Up</a>
          </div>
        </div>
      </div>
      <!-- Single Price Plan Area -->
      <div class="col-12 col-lg-4" style="z-index: 5;">
        <div class="text-center mb-5 py-5 shadow bg-white shadow-lg text-dark" style="border-radius: 12px;z-index: 2;transform: scale(1.2);">
          <div class="text-center">
            <img src="demo/img/team-2.jpg" alt="Team 2" style="" loading="lazy" class="w-50 mb-2 rounded-4">
          </div>
          <div class="text-center">
            <div editable="rich">
              <h2>Business</h2>
            </div>
          </div>
          <div class="text-center small">
            <div editable="rich">
              <p>Perfect for
                <strong>agency</strong>
              </p>
            </div>
          </div>
          <div class="text-center text-primary display-4">
            <p>
              <span>
                <b>$199</b>
              </span>
              <span class="lead">/ per year</span>
            </p>
          </div>
          <div class="">
            <ul class="list-unstyled mt-3 mb-4">
              <li class="py-2">
                <svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
                  <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
                </svg>
                <span>Build Unlimited Websites</span>
              </li>
              <li class="py-2">
                <svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
                  <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
                </svg>
                <span>Updates for 1 Year</span>
              </li>
              <li class="py-2">
                <svg viewBox="0 0 16 16" class="text-success" fill="currentColor" xmlns="http://www.w3.org/2000/svg" lc-helper="svg-icon" width="2em" height="2em">
                  <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"></path>
                </svg>
                <span>Support for 1 Year</span>
              </li>
            </ul>
          </div>
          <div class="" style="z-index:4">
            <a class="btn btn-outline-primary" href="#" role="button">Sign Up</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>