<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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="panel text-center price-panel panel-grey">
<div class="panel-heading">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body">
<p class="lead big-lead"><strong>$0 / month</strong></p>
</div>
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-check text-success"></i> Personal use only</li>
<li class="list-group-item"><i class="fa fa-times text-danger"></i> Unlimited projects</li>
<li class="list-group-item"><i class="fa fa-times text-danger"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a href="#" class="btn btn-lg btn-block btn-default">BUY NOW!</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="panel text-center price-panel panel-blue">
<div class="panel-heading">
<h3>STARTER PLAN</h3>
</div>
<div class="panel-body">
<p class="lead big-lead"><strong>$10 / month</strong></p>
</div>
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-check text-success"></i> Commercial use</li>
<li class="list-group-item"><i class="fa fa-times text-danger"></i> Unlimited projects</li>
<li class="list-group-item"><i class="fa fa-times text-danger"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a href="#" class="btn btn-lg btn-block btn-primary">BUY NOW!</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="panel text-center price-panel panel-green">
<div class="panel-heading">
<h3>DEV PLAN</h3>
</div>
<div class="panel-body">
<p class="lead big-lead"><strong>$50 / month</strong></p>
</div>
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-check text-success"></i> Commercial use</li>
<li class="list-group-item"><i class="fa fa-check text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="fa fa-times text-danger"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a href="#" class="btn btn-lg btn-block btn-success">BUY NOW!</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="panel text-center price-panel panel-red">
<div class="panel-heading">
<h3>PRO PLAN</h3>
</div>
<div class="panel-body">
<p class="lead big-lead"><strong>$99 / month</strong></p>
</div>
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-check text-success"></i> Commercial use</li>
<li class="list-group-item"><i class="fa fa-check text-success"></i> Unlimited projects</li>
<li class="list-group-item"><i class="fa fa-check text-success"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a href="#" class="btn btn-lg btn-block btn-danger">BUY NOW!</a>
</div>
</div>
</div>
</div>
</div>
body {
padding-top: 50px;
padding-bottom: 50px;
}
.big-lead {
font-size: 40px;
}
.price-panel,
.price-panel > .panel-heading {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.price-panel:hover {
box-shadow: 0 0 30px rgba(0,0,0, .2);
}
.price-panel:hover > .panel-heading {
box-shadow: 0 0 30px rgba(0,0,0, .2) inset;
}
.price-panel > .panel-heading {
color: white;
text-shadow: 0 3px 0 rgba(50,50,50, .6);
border-radius: 0;
box-shadow: 0 5px 0 rgba(50,50,50, .2) inset;
}
.price-panel > .panel-body {
color: white;
text-shadow: 0 3px 0 rgba(50,50,50, .3);
}
.price-panel > .list-group {
font-weight: 600;
}
.price-panel > .panel-footer {
box-shadow: 0 3px 0 rgba(0,0,0, .3);
}
.panel-grey > .panel-heading {
background-color: #6d6d6d;
border-color: #b7b7b7;
}
.panel-grey > .panel-body {
background-color: #808080;
}
.panel-blue > .panel-heading {
background-color: #608bb4;
border-color: #78aee1;
}
.panel-blue > .panel-body {
background-color: #73a3d4;
}
.panel-green > .panel-heading {
background-color: #57ac57;
border-color: #71df71;
}
.panel-green > .panel-body {
background-color: #65c965;
}
.panel-red > .panel-heading {
background-color: #d04e50;
border-color: #ff6062;
}
.panel-red > .panel-body {
background-color: #ef5a5c;
}