"Responsive pricing table"
Bootstrap 3.1.0 Snippet by krzysztof

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> </br> <div class="container"> <a href="cennik" >></a> <table> <tr class="row" > <th class="col-md-6 my_important">&nbsp</th> <th class="col-md-3 my_planFeature"><buttion class="btn btn-xlarge btn-default pakietyP">PAKIET FREE</buttion></th> <th class="col-md-3 my_planFeature"><buttion class="btn btn-xlarge btn-primary pakiety">PAKIET PREMIUM</buttion></th> </tr> </table> <table> <tr class="row my_naglowki"> <th class="col-md-6 my_important">Portal ihouse.pl</th> <th class="col-md-3 my_planFeature my_pusty"></th> <th class="col-md-3 my_planFeature my_pusty"></th> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature"> Bezpłatna publikacja dowolnej liczby ogłoszeń </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-check my_check"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature"> Promowanie ofert (za dodatkową opłatą: 1 zł = 1 dzień promowania) </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-check my_check"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature"> 30 zł do wykorzystania na promowanie ofert w cenie Pakietu <i class="fa fa-info-circle my_uncheck required-icon"></i> </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature"> Profesjonalny profil agenta </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-check my_check"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature"> Obecność w wyszukiwarce agentów </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-check my_check"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature"> Pozycjonowanie w wyszukiwarce jako Agent Premium </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> </table> <p></p> <table> <tr class="row my_naglowki"> <th class="col-md-6 my_important">System agenta</th> <th class="col-md-3 my_planFeature my_pusty"></th> <th class="col-md-3 my_planFeature my_pusty"></th> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature2"> Bezpieczne przechowywanie i zarządzanie Kontaktami, Ogłoszeniami, Wiadomościami i kalendarzem bezpośrednio przez www i aplikację - <br>bez konieczności instalacji osobnego oprogramowaniań </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature2"> Szybki i niezawodny eksport ogłoszeń na inne serwisy <br> (otodom.pl, dom.gratka.pl, domy.pl) </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature"> Stale aktualizowana baza nowych bezpośrednich Ogłoszeniach w lokalizacji Agenta </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature"> Bezpieczna i pojemna skrzynka mailowa Imie.Nazwisko@agent.ihouse.pl </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature2"> Wygodne umawianie spotkań dzięki połączeniu Kalendarza Agenta z <br>Kontaktami Agenta, Ogłoszeniami Agenta i Aplikacją Mobilną </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature2"> Baza zapytań przychodzących z portalu iHouse - <br>jedno miejsce w którym gromadzisz wszystkie Kontakty i Wiadomości </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature2"> Obserwowanie ogłoszeń i możliwość przypisywania ogłoszeń <br>(lub wyników wyszukiwania) do Klientów </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> </table> <p></p> <table> <tr class="row my_naglowki"> <th class="col-md-6 my_important">Aplikacja agenta</th> <th class="col-md-3 my_planFeature my_pusty"></th> <th class="col-md-3 my_planFeature my_pusty"></th> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature2"> Stały dostęp do Kalendarza, Kontaktów, Wiadomości i Ogłoszeń <br>- tych samych, co w Systemie Agenta </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature2"> Możliwość dodania Ogłoszenia wraz ze zdjęciami z telefonu i tabletu </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <tr class="row my_featureRow" > <td class="col-md-6 my_feature"> Możliwość zapisania i eksportu Ogłoszenia bezpośrednio z telefonu <br>i tabletu </td> <td class="col-md-3 my_planFeature my_szary"> <i class="fa fa-minus my_uncheck"></i> </td> <td class="col-md-3 my_planFeature my_niebieski"> <i class="fa fa-check my_check"></i> </td> </tr> <table> <p></p> <table> <tr class="row my_naglowki"> <th class="col-md-6 my_important">Bezpłatne wsparcie techniczne</th> <th class="col-md-3 my_planFeature my_pusty"> <i class="fa fa-check my_check"></i> </th> <th class="col-md-3 my_planFeature my_pusty"> <i class="fa fa-check my_check"></i> </th> </tr> <a name="cennik"></a> <tr class="row my_featureRow" > <td class="col-md-6 my_planFeature my_feature3"> Abonament miesięczny </td> <td class="col-md-3 my_planFeature my_szary"> <p class="my_feature31">0zł* </p> <p class="my_feature32">&nbsp</p> <p><buttion class="btn btn-xlarge btn-success">Załóż konto</buttion></p> </td> <td class="col-md-3 my_planFeature my_niebieski"> <p class="my_feature31">149,00zł*</p> <p class="my_feature32">Bezpłatnie przez 30 dni</p> <p><buttion class="btn btn-xlarge btn-success">Załóż konto</buttion></p> </td> </tr> <table> </br><p class="gwiazdka">*) Ceny podane na tej stronie są cenami netto.</p> </div>
/* -@media(min-width:768px)and(max-width:992px){.container{width: initial;padding-left: 2em;padding-right: 2em}}--- */ /* -@media(max-width:768px){.my_planTitle{font-size:small;}}--- */ /* --- Features ------------------------- */ .my_feature {line-height:2.8em} .my_feature2{line-height:1.8em; padding-top: 6px; padding-bottom: 6px;} .my_feature3,.my_feature31,.my_feature32 {text-align:center;} .my_feature3{font-size:1.6em} .my_feature31{font-size: 1.8em;font-weight:bold} .my_feature32{font-size: 0.6em;line-height:0.2em; padding-bottom:0.8em} .my_important {line-height:2.8em;font-weight:bold} /* -@media(max-width:768px){.my_feature {text-align:center}}--- */ .pakiety, .pakietyP { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; border-top-left-radius: 1.5em !important; width: 106%} .pakietyP {height:110%;margin-top:1em;margin-bottom 0.2em;border:1px solid #F3F3F3} .pakiety {height:130%;line-height:3em} .my_featureRow {margin-top:0.2em;margin-bottom:0.2em;border:1px solid #F3F3F3} .my_naglowki{margin-top: 0.2em;margin-bottom: 0.2em;background:#E9F4F8;border:1px solid #D5E5EC;font-size:18px} .my_niebieski{background:#E0EAF2;border:1px solid #F3F3F3} .my_szary{background:#F8F8F8;border:1px solid #F3F3F3} .my_pusty{border-left: 1px solid #D5E5EC;border-bottom: 1px solid #D5E5EC} /* --- lewa--------------------------- */ .my_plan2{background: rgb(230,235,218);border:0.1em solid #F3F3F3;margin-top:15px} .my_planHeader.my_plan2 a {background:rgb(108, 131, 62);color:#102849} .my_planHeader.my_plan2 {background:#F8F8F8;color:#102849;border:1px solid #F3F3F3;} /* --- prawa --------------------------- */ .my_plan3{background:rgb(254,235,212);font-size:1.3em;height:80px} .my_planHeader.my_plan3 a{background: rgb(199, 127, 40);color:#fff} .my_planHeader.my_plan3{background: #102849;border:1px solid #F3F3F3} .my_planFeature{text-align:center;font-size: 2em;} .my_planFeature i.my_check{color:#3399CC} .my_planFeature i.my_uncheck{color:#E8E8E8} .my_feature i.fa-info-circle{color:#3399CC;margin-left:15px} .gwiazdka{font-size:0.8em;} .btn-xlarge { padding: 18px 28px; font-size: 22px; //change this to your desired size line-height: normal; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
$(function() { $('.required-icon').tooltip ({ placement: 'top', title: ' Niewykorzystane środki nie przechodzą na kolejny okres rozliczeniowy.' }); });

Related: See More


Questions / Comments: