<div class="container-fluid bg-gradient p-5">
<div class="row m-auto text-center w-75">
<div class="col-4 princing-item red">
<div class="pricing-divider ">
<h3 class="text-light">BASIC</h3>
<h4 class="my-0 display-2 text-light font-weight-normal mb-3"><span class="h3">Rs</span> 500 <span class="h5">/mo</span></h4> <svg class='pricing-divider-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' y='0px'>
<path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path>
</svg>
</div>
<div class="card-body bg-white mt-0 shadow">
<ul class="list-unstyled mb-5 position-relative">
<li>1 screen you can watch at same time</li>
<li>HD not available</li>
<li>cancel at any time</li>
<li>First month free</li>
</ul> <button type="button" class="btn btn-lg btn-block btn-custom ">Sign up </button>
</div>
</div>
<div class="col-4 princing-item red">
<div class="pricing-divider ">
<h3 class="text-light">STANDARD</h3>
<h4 class="my-0 display-2 text-light font-weight-normal mb-3"><span class="h3">Rs</span> 650 <span class="h5">/mo</span></h4> <svg class='pricing-divider-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' y='0px'>
<path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path>
</svg>
</div>
<div class="card-body bg-white mt-0 shadow">
<ul class="list-unstyled mb-5 position-relative">
<li>2 Screens you can watch at same time</b></li>
<li>HD available</li>
<li>cancel at any time</li>
<li>First month free</li>
</ul> <button type="button" class="btn btn-lg btn-block btn-custom ">Sign up </button>
</div>
</div>
<div class="col-4 princing-item red">
<div class="pricing-divider ">
<h3 class="text-light">PREMIUM</h3>
<h4 class="my-0 display-2 text-light font-weight-normal mb-3"><span class="h3">Rs</span> 800 <span class="h5">/mo</span></h4> <svg class='pricing-divider-img' enable-background='new 0 0 300 100' height='100px' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' y='0px'>
<path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path>
</svg>
</div>
<div class="card-body bg-white mt-0 shadow">
<ul class="list-unstyled mb-5 position-relative">
<li>4 Screens you can watch at same time</li>
<li>Ultra HD available </li>
<li>cancel at any time</li>
<li>First month free</li>
</ul> <button type="button" class="btn btn-lg btn-block btn-custom ">Sign up </button>
</div>
</div>
</div>
</div>
.bg-gradient {
background: #C9D6FF;
background: -webkit-linear-gradient(to right, #E2E2E2, #C9D6FF);
background: linear-gradient(to right, #E2E2E2, #C9D6FF)
}
ul li {
margin-bottom: 1.4rem
}
.pricing-divider {
border-radius: 20px;
background: #C64545;
padding: 1em 0 4em;
position: relative
}
.pricing-divider-img {
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 80px
}
.deco-layer {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s
}
.btn-custom {
background: #C64545;
color: #fff;
border-radius: 20px
}
.img-float {
width: 50px;
position: absolute;
top: -3.5rem;
right: 1rem
}
.princing-item {
transition: all 150ms ease-out
}
.princing-item:hover {
transform: scale(1.05)
}
.princing-item:hover .deco-layer--1 {
-webkit-transform: translate3d(15px, 0, 0);
transform: translate3d(15px, 0, 0)
}
.princing-item:hover .deco-layer--2 {
-webkit-transform: translate3d(-15px, 0, 0);
transform: translate3d(-15px, 0, 0)
}