<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 ----------> <!-- Прайс Дизайн интерьера Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme --> <div class="container content"> <div class="row"> <!-- Pricing --> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="pricing hover-effect"> <div class="pricing-head"> <h3>Бюджет <span> дизайн интерьера </span> </h3> <h4>50<i> грн.</i> <span> м.кв. </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> Обмерный план </li> <li> Планировочные решения (2 варианта) </li> <li> План расстановки мебели </li> <li> - </li> <li> - </li> <li> - </li> </ul> <div class="pricing-footer"> <p> Недорогой тариф, подойдёт для перепланировки квартиры в новостройке. </p> <a href="javascript:;" class="btn yellow-crusta"> Заказать </a> </div> </div> </div> <div class="col-md-3"> <div class="pricing hover-effect"> <div class="pricing-head"> <h3>Базовый <span> дизайн интерьера </span> </h3> <h4>100<i> грн.</i> <span> м.кв. </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> Обмерный план </li> <li> Планировочные решения (3 варианта) </li> <li> План расстановки мебели </li> <li> План размещения светильников </li> <li> План расстановки сантехники </li> <li> План размещения электрофурнитуры </li> </ul> <div class="pricing-footer"> <p> Для перепланировки квартир в новострое и капитального ремонта. </p> <a href="javascript:;" class="btn yellow-crusta"> Заказать </a> </div> </div> </div> <div class="col-md-3"> <div class="pricing pricing-active hover-effect"> <div class="pricing-head pricing-head-active"> <h3>Стандарт <span> дизайн интерьера </span> </h3> <h4>200<i> грн.</i> <span> м.кв. </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> Обмеры </li> <li> Альбом чертежей СТАНДАРТ </li> <li> Коллажи </li> <li> Рекомендации по мебели </li> <li> Рекомендации по светильникам </li> <li> Рекомендации по материалами </li> </ul> <div class="pricing-footer"> <p> Сбалансированный тарифный план, подойдёт большинству заказчиков </p> <a href="javascript:;" class="btn yellow-crusta"> Заказать </a> </div> </div> </div> <div class="col-md-3"> <div class="pricing hover-effect"> <div class="pricing-head"> <h3>Стандарт+ <span> дизайн интерьера </span> </h3> <h4>400<i> грн.</i> <span> м.кв. </span> </h4> </div> <ul class="pricing-content list-unstyled"> <li> Обмеры </li> <li> Альбом чертежей СТАНДАРТ+ </li> <li> Цветные развёртки стен </li> <li> Ведомость отделки </li> <li> Подбор мебели </li> <li> Подбор светильников </li> <li> Подбор материалов </li> </ul> <div class="pricing-footer"> <p> Требовательный закзазчик найдёт решения всех вопросов в тарифе Стандарт+ </p> <a href="javascript:;" class="btn yellow-crusta"> Заказать </a> </div> </div> </div> <!--//End Pricing --> </div> </div> <div class="container content"> <div class="row"> <!-- Pricing --> <div class="col-md-12"> <div class="pricing hover-effect"> <div class="pricing-head"> <h3>Цены на дополнительные услуги<span> дизайн интерьера </span> </h3> </div> <div class="table-responsive"> <ul class="pricing-content list-unstyled"> <table class="table table-bordered table-hover"> <thead> <tr> <th>#</th> <th>Наименование</th> <th>Ед. изм.</th> <th>Цена, грн.</th> </tr> </thead> <tbody> <tr class="active"> <td>1</td> <td>3D-визуализация помещений</td> <td>м.кв.</td> <td>400</td> </tr> <tr> <td>2</td> <td>Ведомость отделки помещений</td> <td>м.кв.</td> <td>100</td> </tr> <tr class="success"> <td>3</td> <td>Выезд дизайнера с заказчиком в магазины</td> <td>день</td> <td>1600</td> </tr> <tr> <td>4</td> <td>Консультация дизайнера на объекте</td> <td>час</td> <td>600</td> </tr> <tr class="info"> <td>5</td> <td>Консультация инженера-конструктора на объекте</td> <td>час</td> <td>1000</td> </tr> <tr> <td>6</td> <td>Авторский надзор (один объект площадью до 150 м.кв.)</td> <td>месяц</td> <td>5000</td> </tr> <tr class="warning"> <td>7</td> <td>Технический надзор (один объект площадью до 150 м.кв.)</td> <td>месяц</td> <td>8000</td> </tr> </tbody> </table> </div> </ul> <div class="pricing-footer"> <p> Вы можете дозаказать любую опцию, не вошедшую в выбранный тарифный план </p> </div> </div> </div> <!--//End Pricing --> </div> </div>

/*** Content ***/ .content { padding: 30px 0; } /*** Pricing table ***/ .pricing { position: relative; margin-bottom: 15px; border: 3px solid #eee; } .pricing-active { border: 3px solid #36d7ac; margin-top: -10px; box-shadow: 7px 7px rgba(54, 215, 172, 0.2); } .pricing:hover { border: 3px solid #36d7ac; } .pricing:hover h4 { color: #36d7ac; } .pricing-head { text-align: center; } .pricing-head h3, .pricing-head h4 { margin: 0; line-height: normal; } .pricing-head h3 span, .pricing-head h4 span { display: block; margin-top: 5px; font-size: 14px; font-style: italic; } .pricing-head h3 { font-weight: 300; color: #fafafa; padding: 12px 0; font-size: 27px; background: #36d7ac; border-bottom: solid 1px #41b91c; } .pricing-head h4 { color: #bac39f; padding: 5px 0; font-size: 54px; font-weight: 300; background: #fbfef2; border-bottom: solid 1px #f5f9e7; } .pricing-head-active h4 { color: #36d7ac; } .pricing-head h4 i { top: -8px; font-size: 28px; font-style: normal; position: relative; } .pricing-head h4 span { top: -10px; font-size: 14px; font-style: normal; position: relative; } /*Pricing Content*/ .pricing-content li { color: #888; font-size: 12px; padding: 7px 15px; border-bottom: solid 1px #f5f9e7; } /*Pricing Footer*/ .pricing-footer { color: #777; font-size: 11px; line-height: 17px; text-align: center; padding: 0 20px 19px; } /*Priceing Active*/ .price-active, .pricing:hover { z-index: 9; } .price-active h4 { color: #36d7ac; } .no-space-pricing .pricing:hover { transition: box-shadow 0.2s ease-in-out; } .no-space-pricing .price-active .pricing-head h4, .no-space-pricing .pricing:hover .pricing-head h4 { color: #36d7ac; padding: 15px 0; font-size: 80px; transition: color 0.5s ease-in-out; } .yellow-crusta.btn { color: #FFFFFF; background-color: #f3c200; } .yellow-crusta.btn:hover, .yellow-crusta.btn:focus, .yellow-crusta.btn:active, .yellow-crusta.btn.active { color: #FFFFFF; background-color: #cfa500; } body{ background-color:#fcfcfc !important; } .table{ margin:50px 0px; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); transition: all 0.2s ease-in-out; padding:20px; }