<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"><br /> <table><tbody><tr><th></th> <th class="plan-header plan-header-blue"><div class="pricing-plan-name">Primary Program</div><div class="pricing-plan-price">^$245</div><div class="pricing-plan-period">month</div></th> <th class="plan-header plan-header-standard"><div class="header-plan-inner"><!--<span class="plan-head"> </span>--> <span class="recommended-plan-ribbon">RECOMMENDED</span> <div class="pricing-plan-name">Preferred Program</div><div class="pricing-plan-price">^$350</div><div class="pricing-plan-period">month</div></div></th> <th class="plan-header plan-header-blue"><div class="pricing-plan-name">Premium Program</div><div class="pricing-plan-price">^$550</div><div class="pricing-plan-period">month</div></th> </tr> <tr><td></td> <td class="action-header"><a class="btn btn-success">Sign up </a> </td> <td class="action-header"><a class="btn btn-success">Sign up </a> </td> <td class="action-header"><a class="btn btn-success">Sign up </a> </td> </tr> <tr><td>Initial Consultation:</td> <td>-</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr><td>Totally Customized Program:</td> <td>-</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr><td>Email Support:</td> <td>Weekly</td> <td>Unlimited</td> <td>Unlimited</td> </tr> <tr><td>Skype/Phone Sessions:</td> <td>-</td> <td>Twice/Month</td> <td>Unlimited</td> </tr> <tr><td>One on One Private Coaching Session:</td> <td>-</td> <td>50% Off</td> <td>2 per Month</td> </tr> <tr><td>Video Analysis:</td> <td>1 Initial Session</td> <td>Monthly</td> <td>unlimited</td> </tr> <tr><td>Training Progress Reviews:</td> <td>Weekly</td> <td>Daily</td> <td>unlimited</td> </tr> <tr><td>Modifications and Updates:</td> <td>unlimited</td> <td>unlimited</td> <td>unlimited</td> </tr> <tr><td>Heart Rate and Power Analysis:</td> <td>-</td> <td>-</td> <td>unlimited</td> </tr> <tr><td>SBX Training Membership ($19.95 value):</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr><td>SBX Discounts:</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr><td>Sponsor Discounts:</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr><td>SBX App for Smartphones:</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr><td>Custom Bike Fitting ($200 Value):</td> <td>-</td> <td>-</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> </tbody></table> </div></div>

.membership-pricing-table { width: 100% } .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-blue { color: #fff; background-color: #000000; } .membership-pricing-table table td { text-align: center; width: 20%; 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: 20% } .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 { 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: #000000; color: #ffff00; 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 #ffff00 inset; box-shadow: 0 -1px #ffff00 inset; text-shadow: 0 -1px #ffff00 } .membership-pricing-table table .recommended-plan-ribbon:before { border: solid; border-color: #ffff00 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: #ffff00 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 }