"Pricing tables, membership plans"
Bootstrap 3.3.0 Snippet by sadhna02

<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 ----------> <div class="table-responsive"> <div class="membership-pricing-table"> <table> <tbody><tr> <th></th> <th class="plan-header plan-header-free"> <div class="pricing-plan-name">Proteins</div> <!--<div class="pricing-plan-price"> <sup>$</sup>0<span>.00</span> </div>--> <div class="pricing-plan-period">(gms)</div> </th> <th class="plan-header plan-header-blue"> <div class="pricing-plan-name">Carbohydrates</div> <!--<div class="pricing-plan-price"> <sup>$</sup>4<span>.99</span> </div>--> <div class="pricing-plan-period">(gms)</div> </th> <th class="plan-header plan-header-free"> <div class="pricing-plan-name">Fat</div> <!-- <div class="pricing-plan-price"> <sup>$</sup>12<span>.95</span> </div>--> <div class="pricing-plan-period">(gms)</div> </th> <th class="plan-header plan-header-blue"> <div class="pricing-plan-name">Minerals</div> <!-- <div class="pricing-plan-price"> <sup>$</sup>12<span>.95</span> </div>--> <div class="pricing-plan-period">(gms)</div> </th> <th class="plan-header plan-header-free"> <div class="pricing-plan-name">Fiber</div> <!-- <div class="pricing-plan-price"> <sup>$</sup>12<span>.95</span> </div>--> <div class="pricing-plan-period">(gms)</div> </th> <th class="plan-header plan-header-blue"> <div class="pricing-plan-name">Calcium</div> <!-- <div class="pricing-plan-price"> <sup>$</sup>12<span>.95</span> </div>--> <div class="pricing-plan-period">(gms)</div> </th> <th class="plan-header plan-header-free"> <div class="pricing-plan-name">Phosphorous</div> <!-- <div class="pricing-plan-price"> <sup>$</sup>12<span>.95</span> </div>--> <div class="pricing-plan-period">(gms)</div> </th> <th class="plan-header plan-header-blue"> <div class="pricing-plan-name">Iron</div> <!-- <div class="pricing-plan-price"> <sup>$</sup>12<span>.95</span> </div>--> <div class="pricing-plan-period">(gms)</div> </th> <th class="plan-header plan-header-free"> <div class="pricing-plan-name">Energy</div> <!-- <div class="pricing-plan-price"> <sup>$</sup>12<span>.95</span> </div>--> <div class="pricing-plan-period">(gms)</div> </th> <th class="plan-header plan-header-blue"> <div class="pricing-plan-name">Thaimin</div> <!-- <div class="pricing-plan-price"> <sup>$</sup>12<span>.95</span> </div>--> <div class="pricing-plan-period">(gms)</div> </th> <th class="plan-header plan-header-free"> <div class="pricing-plan-name">Niacin</div> <!-- <div class="pricing-plan-price"> <sup>$</sup>12<span>.95</span> </div>--> <div class="pricing-plan-period">(gms)</div> </th> <!--<th class="plan-header plan-header-blue"> <div class="pricing-plan-name">PREMIUM</div> <div class="pricing-plan-price"> <sup>$</sup>99<span>.99</span> </div> <div class="pricing-plan-period">month</div> </th>--> </tr> <!-- <tr> <td></td> <td class="action-header"> <a class="btn btn-info"> Downgrade </a> </td> <td class="action-header"> <a class="btn btn-info"> Downgrade </a> </td> <td class="action-header"> <div class="current-plan"> <div class="with-date">Current Plan</div> <div><em class="smaller block">renews Feb 19, 2015</em></div> </div> </td> <td class="action-header"> <a class="btn btn-success"> Upgrade </a> </td> <td class="action-header"> <a class="btn btn-info"> Upgrade </a> </td> </tr>--> <tr> <td>Foxtail</td> <td>12.3</td> <td>60.2</td> <td>4.3</td> <td>4</td> <td>6.7</td> <td>31</td> <td>290</td> <td>2.8</td> <td>351</td> <td>0.6</td> <td>3.2</td> </tr> <tr> <td>Little</td> <td>7.7</td> <td>67</td> <td>4.7</td> <td>1.7</td> <td>7.6</td> <td>17</td> <td>220</td> <td>9.3</td> <td>329</td> <td>0.3</td> <td>3.2</td> </tr> <tr> <td>Kodo</td> <td>8.3</td> <td>65.9</td> <td>1.4</td> <td>2.6</td> <td>5.2</td> <td>35</td> <td>188</td> <td>1.7</td> <td>353</td> <td>0.2</td> <td>2</td> </tr> <tr> <td>Barnyard</td> <td>6.2</td> <td>65.5</td> <td>4.8</td> <td>3.7</td> <td>13.6</td> <td>22</td> <td>280</td> <td>18.6</td> <td>300</td> <td>0.3</td> <td>4.2</td> </tr> </tbody></table> </div> </div>
.membership-pricing-table { width: 1200px } .membership-pricing-table table .icon-no,.membership-pricing-table table .icon-yes { font-size: 22px } .membership-pricing-table table .icon-no { color: #a93717 } .membership-pricing-table table .icon-yes { color: #209e61 } .membership-pricing-table table .plan-header { text-align: center; font-size: 48px; border: 1px solid #e2e2e2; padding: 25px 0 } .membership-pricing-table table .plan-header-free { background-color: #eee; color: #555 } .membership-pricing-table table .plan-header-blue { color: #fff; background-color: #61a1d1; border-color: #3989c6 } .membership-pricing-table table .plan-header-standard { color: #fff; background-color: #ff9317; border-color: #e37900 } .membership-pricing-table table td { text-align: center; width: 15%; padding: 7px 10px; background-color: #fafafa; font-size: 14px; -webkit-box-shadow: 0 1px 0 #fff inset; box-shadow: 0 1px 0 #fff inset } .membership-pricing-table table,.membership-pricing-table table td { border: 1px solid #ebebeb } .membership-pricing-table table tr td:first-child { background-color: transparent; text-align: right; width: 24% } .membership-pricing-table table tr td:nth-child(5) { background-color: #FFF } .membership-pricing-table table tr:first-child td,.membership-pricing-table table tr:nth-child(2) td { -webkit-box-shadow: none; box-shadow: none } .membership-pricing-table table tr:first-child th:first-child { border-top-color: transparent; border-left-color: transparent; border-right-color: #e2e2e2 } .membership-pricing-table table tr:first-child th .pricing-plan-name { font-size: 22px } .membership-pricing-table table tr:first-child th .pricing-plan-price { line-height: 35px } .membership-pricing-table table tr:first-child th .pricing-plan-price>sup { font-size: 45% } .membership-pricing-table table tr:first-child th .pricing-plan-price>span { font-size: 30% } .membership-pricing-table table tr:first-child th .pricing-plan-period { margin-top: -7px; font-size: 25% } .membership-pricing-table table .header-plan-inner { position: relative } .membership-pricing-table table .recommended-plan-ribbon { box-sizing: content-box; background-color: #dc3b5d; color: #FFF; position: absolute; padding: 3px 6px; font-size: 11px!important; font-weight: 500; left: -6px; top: -22px; z-index: 99; width: 100%; -webkit-box-shadow: 0 -1px #c2284c inset; box-shadow: 0 -1px #c2284c inset; text-shadow: 0 -1px #c2284c } .membership-pricing-table table .recommended-plan-ribbon:before { border: solid; border-color: #c2284c transparent; border-width: 6px 0 0 6px; bottom: -5px; content: ""; left: 0; position: absolute; z-index: 90 } .membership-pricing-table table .recommended-plan-ribbon:after { border: solid; border-color: #c2284c transparent; border-width: 6px 6px 0 0; bottom: -5px; content: ""; right: 0; position: absolute; z-index: 90 } .membership-pricing-table table .plan-head { box-sizing: content-box; background-color: #ff9c00; border: 1px solid #cf7300; position: absolute; top: -33px; left: -1px; height: 30px; width: 100%; border-bottom: none }

Related: See More


Questions / Comments: