<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">FREE</div> </th> <th class="plan-header plan-header-pro"> <div class="header-plan-inner"> <span class="recommended-plan-ribbon">EMPFOHLEN</span> <div class="pricing-plan-name">PRO</div> </th> <th class="plan-header plan-header-basic"> <!--<span class="plan-head"> </span>--> <div class="pricing-plan-name">BASIC</div> </div> </th> </tr> <tr> <td>Einmalige Zahlung:</td> <td class="action-header"> <div class="pricing-plan-price"> ^€0<span>.00</span> </div> </td> <td class="action-header recommended"> <div class="pricing-plan-price"> ^€87<span>.00</span> </div> </td> <td class="action-header basic"> <div class="pricing-plan-price"> ^€67<span>.00</span> </div> </td> </tr> <tr> <td class="ueberschrift" colspan="4" style="background:#307FA5"><center>Provisionen</center></td> </tr> <tr> <td>Affiliate Provision 1. Ebene:</td> <td>5%</td> <td class="recommended">15%</td> <td class="basic">10%</td> </tr> <tr> <td>Werbeportal Provision:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> </tr> <tr> <td class="ueberschrift" colspan="4" style="background:#307FA5"><center>Landingpagesystem</center></td> </tr> <tr> <td>Anzahl Projekte:</td> <td>MMH</td> <td class="recommended">MMH <br>+ 1 weiteres</td> <td class="basic">MMH <br>+ 1 weiteres</td> </tr> <tr> <td>Landingpage:</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Versand Autoresponder:</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Versand Newsletter:</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Banner:</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Werbemail Vorlagen:</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Tracking Standard:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Tracking Erweitert (Analytics):</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> </tr> <tr> <td class="ueberschrift" colspan="4" style="background:#307FA5"><center>Kontakte</center></td> </tr> <tr> <td>Kontakt-Begrenzung:</td> <td>50</td> <td class="recommended">500</td> <td class="basic">250</td> </tr> <tr> <td>Aktivitäten-Historie:</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Kontakt-Verwaltung:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Kontakt-Erfassung:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Kontakt-Filterung:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> </tr> <tr> <td>Tagging-System:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> </tr> <tr> <td>Kontakt-Import/Export:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> </tr> <tr> <td class="ueberschrift" colspan="4" style="background:#307FA5"><center>Teambuilding Tools</center></td> </tr> <tr> <td>Strukturbaum</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Team-Leads erhalten:</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td class="recommended"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td class="basic"><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> </tr> <tr> <td class="ueberschrift" colspan="4" style="background:#307FA5"><center>Add-ons</center></td> </tr> <tr> <th></th> <th class="plan-header plan-header-master" colspan="4"> <div class="pricing-plan-name">LEADER</div> </th> </tr> <tr> <td>Team-Kampagnen:</td> <td colspan="3" class="leader"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Team-Leads verteilen:</td> <td colspan="3" class="leader"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Eigene Followup E-Mails:</td> <td colspan="3" class="leader"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Eigene Newsletter:</td> <td colspan="3" class="leader"><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> </tbody></table> </div> </div>

.ueberschrift { text-align: center; font-size: 20px!important; color: white; background-color: #B51E1E -webkit-box-shadow: 0 1px 0 #307FA5 !important; box-shadow: 0 1px 0 #307FA5 !important; border: 1px solid #307FA5 !important; } .membership-pricing-table { width: 700px } .membership-pricing-table table .icon-no,.membership-pricing-table table .icon-yes { font-size: 30px } .membership-pricing-table table .icon-no { color: #a93717 } .membership-pricing-table table .icon-yes { color: #ACC144 } .membership-pricing-table table .plan-header { text-align: center; font-size: 30px; border: 1px solid #e2e2e2; padding: 20px 0 } .membership-pricing-table table .plan-header-free { background-color: #eee; color: # border-color: #eee; } .membership-pricing-table table .plan-header-basic { color: #fff; background-color: #8CA2A5; border-color: #8CA2A5 } .membership-pricing-table table .plan-header-master { color: #fff; background-color: #FF6500; border-color: #FF6500 } .membership-pricing-table table .plan-header-pro { color: #fff; background-color: #1E6D8F; border-color: #1E6D8F } .membership-pricing-table table .plan-header-yourbusiness { color: #fff; background-color: #3700FF; border-color: #3700FF } .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 } .recommended{ background-color: #1E6D8F !important; -webkit-box-shadow: 0 1px 0 #1E6D8F !important; box-shadow: 0 1px 0 #1E6D8F !important; border: 1px solid #1E6D8F !important; color: white; } .leader{ background-color: #FF6500 !important; -webkit-box-shadow: 0 1px 0 #FF6500 !important; box-shadow: 0 1px 0 #FF6500 !important; border: 1px solid #FF6500 !important; color: white; } .basic{ background-color: #8CA2A5 !important; -webkit-box-shadow: 0 1px 0 #8CA2A5 !important; box-shadow: 0 1px 0 #8CA2A5 !important; border: 1px solid #8CA2A5 !important; color: white; } .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 }