<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>Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Aperiam, dolorem maiores quis
Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Aperiam, dolorem maiores quis
Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Aperiam, dolorem maiores quis
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><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>