Pricing Table #1

  • Unlimited Viewers
  • Editors
  • Multiplayer
  • Developer handoff
  • Support

Small

$49

Our basic version for teams that are just getting started

Buy Now
  • Unlimited Viewers
  • Editors
  • Multiplayer
  • Developer handoff
  • Support

Medium

$149

Our basic version for teams that are just getting started

Buy Now
  • Unlimited Viewers
  • Editors
  • Multiplayer
  • Developer handoff
  • Support

Large

$449

Our basic version for teams that are just getting started

Buy Now
  • Unlimited Viewers
  • Editors
  • Multiplayer
  • Developer handoff
  • Support
<section class="bg-black text-white">
  <div class="container">
    <div class="row align-items-end gutter-4 gutter-lg-0">
      <div class="col-xl-3 d-none d-xl-block">
        <div class="card">
          <ul class="list-group list-group-flush list-group-lg">
            <li class="list-group-item pl-0">Unlimited Viewers</li>
            <li class="list-group-item pl-0">Editors</li>
            <li class="list-group-item pl-0">Multiplayer</li>
            <li class="list-group-item pl-0">Developer handoff</li>
            <li class="list-group-item pl-0">Support</li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-xl-3">
        <div class="card bg-primary">
          <div class="card-body">
              <h3 class="lead mb-2">Small</h3>
              <span class="h2 font-weight-bold">$49</span>
              <p class="mt-2 mb-4 text-secondary">Our basic version for teams that are just getting started</p>
              <a href="" class="btn btn-sm btn-white btn-rounded btn-with-icon">Buy Now <i class="icon-arrow-up-right"></i></a>
          </div>
          <ul class="list-group list-group-flush list-group-lg">
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Unlimited Viewers</span></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Editors</span></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Multiplayer</span></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Developer handoff</span></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Support</span></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-xl-3">
        <div class="card bg-pricing">
          <div class="card-body">
            <h3 class="lead mb-2">Medium</h3>
            <span class="h2 font-weight-bold">$149</span>
            <p class="mt-2 mb-4 text-secondary">Our basic version for teams that are just getting started</p>
            <a href="" class="btn btn-sm btn-outline-white btn-rounded btn-with-icon">Buy Now <i class="icon-arrow-up-right"></i></a>
          </div>
          <ul class="list-group list-group-flush list-group-lg">
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Unlimited Viewers</span></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Editors</span></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Multiplayer</span></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-x text-muted mr-2 fs-24 d-none d-xl-inline-block"></i> <s class="d-xl-none text-muted">Developer handoff</s></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-x text-muted mr-2 fs-24 d-none d-xl-inline-block"></i> <s class="d-xl-none text-muted">Support</s></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-xl-3">
        <div class="card bg-pricing">
          <div class="card-body">
            <h3 class="lead mb-2">Large</h3>
            <span class="h2 font-weight-bold">$449</span>
            <p class="mt-2 mb-4 text-secondary">Our basic version for teams that are just getting started</p>
            <a href="" class="btn btn-sm btn-outline-white btn-rounded btn-with-icon">Buy Now <i class="icon-arrow-up-right"></i></a>
          </div>
          <ul class="list-group list-group-flush list-group-lg">
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Unlimited Viewers</span></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Editors</span></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Multiplayer</span></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-check mr-2 fs-24 d-none d-xl-inline-block"></i> <span class="d-xl-none">Developer handoff</span></li>
            <li class="list-group-item d-flex align-items-center"><i class="icon-x text-muted mr-2 fs-24 d-none d-xl-inline-block"></i> <s class="d-xl-none text-muted">Support</s></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing Table #2

Get started with CUBE now!

$49

Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Aperiam, dolorem maiores quis

  • 6 Premium accounts
  • Ad-free usic listening
  • Listen to music ad-free
Buy Now 30 days free trial

$149

Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Aperiam, dolorem maiores quis

  • 6 Premium accounts
  • Ad-free usic listening
  • Listen to music ad-free
Buy Now 30 days free trial

$449

Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Aperiam, dolorem maiores quis

  • 6 Premium accounts
  • Ad-free usic listening
  • Listen to music ad-free
Buy Now 30 days free trial

Lorem ipsum dolor sit amet consectetur adipisicing elit. GET25OFF Vero voluptatem magni tenetur aspernatur necessitatibus mollitia

<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6 text-center">
        <h2 class="font-weight-bold">Get started with CUBE now!</h2>
      </div>
    </div>
    <div class="row gutter-4 gutter-lg-6 align-items-end">
      <div class="col-lg-4">
        <div class="card bordered text-white"
        data-bottom-top="background-color: rgba(235,60,39,1)"
        data-center-top="background-color: rgba(52,68,162,1)"
        data-center-bottom="background-color: rgba(52,68,162,1)"
        data-top-bottom="background-color: rgba(235,60,39,1)">
          <div class="card-body">
            <h2 class="h1 mb-4 font-weight-bold">$49</h2>
            <p class="mb-4 text-secondary">Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Aperiam, dolorem maiores quis</p>
            <ul class="list-unstyled mb-4">
              <li class="py-1">6 Premium accounts</li>
              <li class="py-1">Ad-free usic listening</li>
              <li class="py-1">Listen to music ad-free</li>
            </ul>
            <div>
              <a href="" class="btn btn-white btn-rounded btn-block btn-with-icon">Buy Now <i class="icon-arrow-up-right"></i></a>
              <small class="d-block text-muted text-center mt-1">30 days free trial</small>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-8">
         <div class="row gutter-0 separated">
           <div class="col bg-white">
             <div class="card">
               <div class="card-body">
                 <h2 class="h1 mb-4 font-weight-bold">$149</h2>
                 <p class="mb-4 text-secondary">Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Aperiam, dolorem maiores quis</p>
                 <ul class="list-unstyled mb-4">
                   <li class="py-1">6 Premium accounts</li>
                   <li class="py-1">Ad-free usic listening</li>
                   <li class="py-1">Listen to music ad-free</li>
                 </ul>
                 <div>
                   <a href="" class="btn btn-outline-primary btn-rounded btn-block btn-with-icon">Buy Now <i class="icon-arrow-up-right"></i></a>
                   <small class="d-block text-muted text-center mt-1">30 days free trial</small>
                 </div>
               </div>
             </div>
           </div>
           <div class="col bg-white">
             <div class="card">
               <div class="card-body">
                 <h2 class="h1 mb-4 font-weight-bold">$449</h2>
                 <p class="mb-4 text-secondary">Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Aperiam, dolorem maiores quis</p>
                 <ul class="list-unstyled mb-4">
                   <li class="py-1">6 Premium accounts</li>
                   <li class="py-1">Ad-free usic listening</li>
                   <li class="py-1">Listen to music ad-free</li>
                 </ul>
                 <div>
                   <a href="" class="btn btn-outline-primary btn-rounded btn-block btn-with-icon">Buy Now <i class="icon-arrow-up-right"></i></a>
                   <small class="d-block text-muted text-center mt-1">30 days free trial</small>
                 </div>
               </div>
             </div>
           </div>
         </div>
      </div>
    </div>
    <div class="row align-items-center justify-content-center">
      <div class="col-lg-6 text-center">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <kbd>GET25OFF</kbd> Vero voluptatem magni tenetur aspernatur necessitatibus mollitia</p>
      </div>
    </div>
  </div>
</section>

Pricing Table #3

$9.99

per month

One year access to all designs listed on this page and all our templates.

  • Variable and OpenType fonts
  • Multi-team management
  • Pixel-level precision
  • Reusable components
Buy Now 
<section class="overflow-hidden bg-black text-white">
  <div class="container foreground">
    <div class="row justify-content-between">
      <div class="col-lg-3 mb-4 mb-lg-0">
        <h1 class="font-weight-bold lh-1 mb-1">$9.99</h1>
        <span class="text-secondary">per month</span>
      </div>
      <div class="col-lg-8">
        <h2 class="font-weight-bold">One year access to all designs listed on this page and all our templates.</h2>
        <div class="row mt-5 mb-2">
          <div class="col-md-6">
            <ul class="list-group list-group-minimal list-group-sm">
              <li class="list-group-item d-flex align-items-center"><i class="icon-check fs-24 mr-2 text-primary"></i> Variable and OpenType fonts</li>
              <li class="list-group-item d-flex align-items-center"><i class="icon-check fs-24 mr-2 text-primary"></i> Multi-team management</li>
            </ul>
          </div>
          <div class="col-md-6">
            <ul class="list-group list-group-minimal list-group-sm">
              <li class="list-group-item d-flex align-items-center"><i class="icon-check fs-24 mr-2 text-primary"></i> Pixel-level precision</li>
              <li class="list-group-item d-flex align-items-center"><i class="icon-check fs-24 mr-2 text-primary"></i> Reusable components</li>
            </ul>
          </div>
        </div>
        <a href="" class="btn btn-primary btn-rounded btn-with-icon mt-4">Buy Now <i class="icon-arrow-up-right"></i></a>
      </div>
    </div>
  </div>
  <figure class="canvas">
    <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="125%" cy="0" r="50%" stroke="white" stroke-opacity=".2" 
      data-center-top="@r: 50%;" 
      data-top-bottom="@r: 70%;"/>
      <circle cx="85%" cy="125%" r="75%" stroke="white" stroke-opacity=".2" 
      data-center-top="@r: 75%;" 
      data-top-bottom="@r: 95%;"/>
      <circle cx="-25%" cy="125%" r="50%" stroke="white" stroke-opacity=".2" 
      data-center-top="@cx: -25%;" 
      data-top-bottom="@cx: 45%;"/>
    </svg>
  </figure>
</section>