Pricing - All Examples

Discover 13 Pricing examples available in Loopple

Requires JavaScript
Pricing 1

Component from Soft UI Design System Builder
<section class="py-4 bg-gray-100 draggable">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-8 mx-auto mb-4 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">
        <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><span>199</span></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('https://demos.creative-tim.com/soft-ui-design-system-pro/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><span>349</span></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><span>779</span></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>

<script>
var total = document.querySelectorAll('.nav-pills');

total.forEach(function(item, i){
  var moving_div = document.createElement('div');
  var first_li = item.querySelector('li .nav-link.active');
  var tab = first_li.cloneNode();
  tab.innerHTML = "-";

  moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link');
  moving_div.appendChild(tab);
  item.appendChild(moving_div);

  var list_length = item.getElementsByTagName("li").length;
  let nodes = Array.from( first_li.closest('ul').children )
  let index = nodes.indexOf( first_li.closest('li') )+1;
  let sum = 0;

  moving_div.style.padding = '0px';
  moving_div.style.width = item.querySelector('li .nav-link.active').offsetWidth+'px';

  if(item.classList.contains('flex-column')){
    for(var j = 1; j<index; j++){
      sum +=  item.querySelector('li:nth-child('+j+')').offsetHeight;
    }
    moving_div.style.transform = 'translate3d(0px,'+sum+'px, 0px)';
  } else {
    for(var j = 1; j<index; j++){
      sum +=  item.querySelector('li:nth-child('+j+')').offsetWidth;
    }
    moving_div.style.transform = 'translate3d('+sum+'px, 0px, 0px)';
  }

  moving_div.style.transition = '.5s ease';

  item.onmouseover = function(event) {
    let target = getEventTarget(event);
    let li = target.closest('li'); // get reference
    if(li){
      let nodes = Array.from( li.closest('ul').children ); // get array
      let index = nodes.indexOf( li )+1;
      item.querySelector('li:nth-child('+index+') .nav-link').onclick = function(){
        moving_div = item.querySelector('.moving-tab');
        let sum = 0;
        if(item.classList.contains('flex-column')){
          for(var j = 1; j<=nodes.indexOf( li ); j++){
            sum +=  item.querySelector('li:nth-child('+j+')').offsetHeight;
          }
          moving_div.style.transform = 'translate3d(0px,'+sum+'px, 0px)';
          moving_div.style.height = item.querySelector('li:nth-child('+j+')').offsetHeight;
        } else {
          for(var j = 1; j<=nodes.indexOf( li ); j++){
            sum +=  item.querySelector('li:nth-child('+j+')').offsetWidth;
          }
          moving_div.style.transform = 'translate3d('+sum+'px, 0px, 0px)';
          moving_div.style.width = item.querySelector('li:nth-child('+index+')').offsetWidth+'px';
        }
      }
    }
  }
});
</script>