<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!doctype html>
<html><head></head><body><div class="container">
<div class="pricing-table pricing-three-column row">
<div class="plan col-sm-4 col-lg-4">
<div class="plan-name-bronze">
<h2>Bronze</h2>
<span>$8.99 / Month</span>
</div>
<ul>
<li class="plan-feature">10 Users</li>
<li class="plan-feature">5TB Disk Space</li>
<li class="plan-feature"><a href="#" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li>
</ul>
</div>
<div style="z-index:55;" class="plan col-sm-4 col-lg-4">
<div class="plan-name-silver">
<h2>Silver <span class="badge badge-warning">Popular</span></h2>
<span><strike>$10.99</strike> <font color="red">$9.99 - <span class="label label-warning">Sale</span></font></span>
</div>
<ul>
<li class="plan-feature">50 Users</li>
<li class="plan-feature">10TB Disk Space</li>
<li class="plan-feature"><a href="#" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li>
</ul>
</div>
<div class="plan col-sm-4 col-lg-4">
<div class="plan-name-gold">
<h2>Gold</h2>
<span>$15.99 / Month</span>
</div>
<ul>
<li class="plan-feature">Unlimited Users</li>
<li class="plan-feature">Unlimited Space</li>
<li class="plan-feature"><a href="#" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li>
</ul>
</div>
</div>
</div></body></html>
body{padding-top:20px}
.pricing-table .plan {
margin-left:0px;
border-radius: 5px;
text-align: center;
background-color: #f3f3f3;
-moz-box-shadow: 0 0 6px 2px #b0b2ab;
-webkit-box-shadow: 0 0 6px 2px #b0b2ab;
box-shadow: 0 0 6px 2px #b0b2ab;
}
.plan:hover {
background-color: #fff;
-moz-box-shadow: 0 0 12px 3px #b0b2ab;
-webkit-box-shadow: 0 0 12px 3px #b0b2ab;
box-shadow: 0 0 12px 3px #b0b2ab;
}
.plan {
padding: 20px;
margin-left:0px;
color: #ff;
background-color: #5e5f59;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.plan-name-bronze {
padding: 20px;
color: #fff;
background-color: #665D1E;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.plan-name-silver {
padding: 20px;
color: #fff;
background-color: #C0C0C0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.plan-name-gold {
padding: 20px;
color: #fff;
background-color: #FFD700;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.pricing-table-bronze {
padding: 20px;
color: #fff;
background-color: #f89406;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.pricing-table .plan .plan-name span {
font-size: 20px;
}
.pricing-table .plan ul {
list-style: none;
margin: 0;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.pricing-table .plan ul li.plan-feature {
padding: 15px 10px;
border-top: 1px solid #c5c8c0;
margin-right: 35px;
}
.pricing-three-column {
margin: 0 auto;
width: 80%;
}
.pricing-variable-height .plan {
float: none;
margin-left: 2%;
vertical-align: bottom;
display: inline-block;
zoom:1;
*display:inline;
}
.plan-mouseover .plan-name {
background-color: #4e9a06 !important;
}
.btn-plan-select {
padding: 8px 25px;
font-size: 18px;
}