Created
November 6, 2013 05:59
-
-
Save bMinaise/7331622 to your computer and use it in GitHub Desktop.
Pricing Table - Equal Height' From:http://bootsnipp.com/snippets/featured/pricing-table-equal-height
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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