<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="banner-pricing text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="large-text">Prising</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="plan" style="height: 318px;">
<aside style="height: 182px;">
<h4>SMALL BUSINESS</h4>
<div class="price">
<sup>$</sup>179 / mont
</div>
<p>+50 employees</p>
<p>24/7 support</p>
</aside>
<p>
<a class="btn btn-lg reverse" href="#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="plan best" style="height: 318px;">
<div class="best-banner">Recommended</div>
<aside style="height: 182px;">
<h4>SMALL BUSINESS</h4>
<div class="price">
<sup>$</sup>489 / mont
</div>
<p>+350 employees</p>
<p>24/7 support</p>
</aside>
<p>
<a class="btn btn-lg reverse" href="#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="plan" style="height: 318px;">
<aside style="height: 182px;">
<h4>SMALL BUSINESS</h4>
<div class="price">
<sup>$</sup>983 / mont
</div>
<p>+1000 employees</p>
<p>24/7 support</p>
</aside>
<p>
<a class="btn btn-lg reverse" href="#">Get started</a>
</p>
</div>
</div>
</div>
</div>
</div>
h4 {
font-size: 22px;
color: #333;
}
.banner-pricing {
background: -webkit-linear-gradient(left, rgb(52, 207, 189) 0%, rgb(42, 181, 169) 100%);
background: -o-linear-gradient(left, rgb(52, 207, 189) 0%, rgb(42, 181, 169) 100%);
background: -ms-linear-gradient(left, rgb(52, 207, 189) 0%, rgb(42, 181, 169) 100%);
background: -moz-linear-gradient(left, rgb(52, 207, 189) 0%, rgb(42, 181, 169) 100%);
background: linear-gradient(to right, rgb(52, 207, 189) 0%, rgb(42, 181, 169) 100%);
}
.plan {
background: #fff;
border-radius: 5px;
margin-bottom: 1em;
padding: 20px;
position: relative;
}
.plan .price {
font-size: 40px;
font-weight: bold;
line-height: normal;
margin: 30px 0;
}
.plan p {
font-size: 16px;
}
.reverse {
border-radius: 10px;
border: 2px solid #ffd800;
color: #272727;
font-weight: 600;
padding: 10px 40px;
background: none;
-webkit-transition: background 0.5s ease;
}
.reverse:hover {
background: #ffd800;
}
.plan .btn {
width: 80%;
margin: 20px auto;
}
.plan.best {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.plan.best .best-banner {
color: #fff;
text-align: center;
width: 100%;
height: 33px;
line-height: 35px;
background: #FB6332;
position: absolute;
top: -33px;
left: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.large-text {
margin-bottom: 100px;
text-transform: uppercase;
font-weight: bold;
font-size: 42px;
color: #fff;
}
