<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 ---------->
<section id="bs-pricing-five" class="bs-pricing-five p-top-100 bg-white">
<div class="container">
<div class="row">
<div class="bs-five-area bs-radius">
<div class="col-md-3 no-padding">
<div class="bs-five">
<h6 class="text-uppercase">Free Trial</h6>
<h1 class="bs-caption"><sup>$</sup>00</h1>
<p>No Credit Cart Needed</p>
<ul>
<li><b>25 Free Images</b></li>
<li>Custom Domain</li>
<li>24/7 Customer Support</li>
<li> </li>
</ul>
<a href="https://bootstrapthemes.co" class="btn btn-success btn-round m-top-40">Buy Now</a>
</div>
</div>
<div class="col-md-3 no-padding">
<div class="bs-five active">
<h6 class="text-uppercase">Planet</h6>
<h1 class="bs-caption"><sup>$</sup>49</h1>
<p>No Credit Cart Needed</p>
<ul>
<li><b>60 Free Images</b></li>
<li>Monthly Backups</li>
<li>Custom Domain</li>
<li>24/7 Customer Support</li>
</ul>
<a href="https://bootstrapthemes.co" class="btn btn-success btn-round m-top-40">Buy Now</a>
</div>
</div>
<div class="col-md-3 no-padding">
<div class="bs-five">
<h6 class="text-uppercase">Standard</h6>
<h1 class="bs-caption"><sup>$</sup>69</h1>
<p>No Credit Cart Needed</p>
<ul>
<li><b>60 Free Images</b></li>
<li>Monthly Backups</li>
<li>Custom Domain</li>
<li>24/7 Customer Support</li>
</ul>
<a href="https://bootstrapthemes.co" class="btn btn-success btn-round m-top-40">Buy Now</a>
</div>
</div>
<div class="col-md-3 no-padding">
<div class="bs-five">
<h6 class="text-uppercase">Business</h6>
<h1 class="bs-caption"><sup>$</sup>89</h1>
<p>No Credit Cart Needed</p>
<ul>
<li><b>60 Free Images</b></li>
<li>Monthly Backups</li>
<li>Custom Domain</li>
<li>24/7 Customer Support</li>
</ul>
<a href="https://bootstrapthemes.co" class="btn btn-success btn-round m-top-40">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div style="text-align: center;margin-top: 150px; margin-bottom:100px"> | <a href="http://bootstrapthemes.co/"target="_blank"> Snippet By Bootstrapthemes.co </a> |</div>
/*
Author: Bootstrapthemes
Author URI: http://bootstrapthemes.co
*/
/* ==========================================================================
Author's custom styles
========================================================================== */
.p-top-100{
padding:100px 0;
}
.m-top-40{
margin-top: 40px;
}
/*=================================================
Pricint fiv
===================================================*/
.bs-five-area{
width:100%;
display: inline-block;
box-shadow: 0px 0px 6px 0px #ddd;
overflow: hidden;
position: relative;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.bs-five-area.bs-radius{
border-radius: 30px;
}
.bs-five-area > div{
padding:0;
}
.bs-five-area .bs-five{
position: relative;
width: 100%;
margin: auto;
transition: all 0.4s;
padding:20px 0px;
}
.bs-five-area .bs-five h6{
font-weight: 700;
letter-spacing: 2px;
}
.bs-five-area .bs-five h1{
font-size:64px;
font-weight: 100;
line-height: 72px;
}
.bs-five-area .bs-five h1 sup{
font-size:30px;
top:-30px;
}
.bs-five-area .bs-five ul {
margin:0;
padding:0;
list-style: none;
}
.bs-five-area .bs-five ul li{
line-height: 45px;
border-bottom:0px;
}
.bs-five-area .bs-five:hover{
background: #179880;
transition: all 0.4s;
}
.bs-five-area .bs-five.active {
background: #179880;
background: -webkit-linear-gradient(left, #179880 , #21A476);
background: -o-linear-gradient(right, #179880, #21A476);
background: -moz-linear-gradient(right, #179880, #21A476);
background: linear-gradient(to right, #179880 , #21A476);
}
.bs-five-area .bs-five .btn-success{
padding: 10px 50px;
display: inline-block;
border-radius: 30px;
background-color: #179880;
border-color: #21A476;
}
.bs-five-area .bs-five.active .btn.btn-success,
.bs-five-area .bs-five:hover.bs-five .btn.btn-success{
background: #E0FFF6 ;
color:#444 ;
}
.bs-five-area .bs-five.active,
.bs-five-area .bs-five.active ul li,
.bs-five-area .bs-five:hover.bs-five,
.bs-five-area .bs-five:hover.bs-five ul li
{
color:#fff;
}
/*copyright
==================*/
.footer{
background-color: #333;
}
.copyright{
padding: 20px 10px;
}
.copyright p {
font-size:12px;
color:#fff;
}
.copyright p i {
padding: 0px 5px;
color: red;
}
.copyright p a {
padding: 0px 5px;
color: yellow;
}