Skip to content

Instantly share code, notes, and snippets.

@bMinaise
Created November 6, 2013 05:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bMinaise/7331622 to your computer and use it in GitHub Desktop.
Save bMinaise/7331622 to your computer and use it in GitHub Desktop.
<div class="container">
<div class="row-fluid pricing-table pricing-three-column">
<div class="span4 plan">
<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 class="span4 plan">
<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="span4 plan">
<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{padding-top:20px}
.pricing-table .plan {
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;
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;
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment