<div class="pricing2 py-5" style="background-image:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/pricing/img.jpg);background-repeat: no-repeat;">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="text-white display-5">PRICING PLANS</h2>
<h5 class="text-white font-weight-normal">Select a plan to continue</h5>
</div>
</div>
<div class="row pricing-box">
<div class="col-lg-5 col-md-5">
<div class="card card-shadow border-0 mb-4">
<div class="p-4">
<div class="d-flex align-items-center">
<div class="plan-text">
<h4 class="mb-0">REGULAR</h4>
<h6 class="subtitle">PLAN</h6>
</div>
<div class="pricing-text ml-auto"><sup>$</sup><span>0</span></div>
</div>
<ul class="list-inline mb-3">
<li class="list-inline-item py-2">2 Proto types</li>
<li class="list-inline-item py-2">6 Total Images</li>
</ul>
<a class="btn btn-outline-success btn-md rounded-pill" href="#f1"><span>START FOR FREE</span></a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-7 above-card">
<div class="card card-shadow border-0 mb-4">
<div class="p-4">
<div class="d-flex align-items-center">
<div class="plan-text">
<h4 class="mb-0">AWESOME</h4>
<h6 class="subtitle">PLAN</h6>
</div>
<div class="pricing-text ml-auto"><sup>$</sup><span>15</span></div>
</div>
<ul class="list-inline mb-3">
<li class="list-inline-item py-2">Unlimited Proto types</li>
<li class="list-inline-item py-2">Unlimited Images</li>
<li class="list-inline-item py-2">5 Users</li>
<li class="list-inline-item py-2">Quick editer</li>
</ul>
<a class="btn btn-success-gradiant btn-md rounded-pill border-0 text-white" href="#f1"><span>BUY THE PLAN</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.pricing2 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
background-size: cover;
max-height: 530px;
margin-bottom: 250px;
}
.pricing2 h1,
.pricing2 h2,
.pricing2 h3,
.pricing2 h4,
.pricing2 h5,
.pricing2 h6 {
color: #3e4555;
}
.pricing2 .font-weight-medium {
font-weight: 500;
}
.pricing2 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.pricing2 h5 {
line-height: 22px;
font-size: 18px;
}
.pricing2 .pricing-box {
margin-top: 200px;
}
.pricing2 .above-card {
margin: -70px -32px -32px;
}
.pricing2 .pricing-text sup {
top: -50px;
font-size: 24px;
}
.pricing2 .pricing-text span {
font-size: 100px;
font-weight: 400;
line-height: 100px;
color: #263238;
}
.princing2 .p-4 {
padding: 40px !important;
}
.pricing2 .card.card-shadow {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.pricing2 .btn-success-gradiant {
background: #2cdd9b;
background: -webkit-linear-gradient(legacy-direction(to right), #2cdd9b 0%, #1dc8cc 100%);
background: -webkit-gradient(linear, left top, right top, from(#2cdd9b), to(#1dc8cc));
background: -webkit-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
background: -o-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
background: linear-gradient(to right, #2cdd9b 0%, #1dc8cc 100%);
}
.pricing2 .btn-success-gradiant:hover {
background: #1dc8cc;
background: -webkit-linear-gradient(legacy-direction(to right), #1dc8cc 0%, #2cdd9b 100%);
background: -webkit-gradient(linear, left top, right top, from(#1dc8cc), to(#2cdd9b));
background: -webkit-linear-gradient(left, #1dc8cc 0%, #2cdd9b 100%);
background: -o-linear-gradient(left, #1dc8cc 0%, #2cdd9b 100%);
background: linear-gradient(to right, #1dc8cc 0%, #2cdd9b 100%);
}
.pricing2 .btn-outline-success {
color: #2cdd9b;
background-color: transparent;
border-color: #2cdd9b;
}
.pricing2 .btn-outline-success:hover {
background: #2cdd9b;
border-color: #2cdd9b;
color: #ffffff;
}
.pricing2 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
@media (max-width: 767px) {
.pricing2 {
max-height: 100%;
margin-bottom: 0px;
}
.pricing2 .pricing-box {
margin-top: 20px;
}
.pricing2 .display-5 {
font-size: 36px;
}
.pricing2 .above-card {
margin: 0;
}
.pricing2 .above-card .card {
padding: 0px;
}
}