<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="container content">
<div class="row"><!-- Дополнительные услуги дизайнера -->
<div class="col-md-6">
<div class="pricing hover-effect">
<div class="pricing-head">
<h3>Цены на дополнительные услуги<span> дизайн интерьера </span></h3>
</div>
<div class="table-responsive">
<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>Авторский надзор</td>
<td>м.кв.</td>
<td>от 150 грн.</td>
</tr>
<tr class="warning">
<td>7</td>
<td>Технический надзор</td>
<td>м.кв.</td>
<td>от 200 грн.</td>
</tr>
</tbody>
</table>
</div>
<div class="pricing-footer">
<p>Закажите любую опцию, не вошедшую в тарифный план</p>
<a href="#" class="btn yellow-crusta">Заказать</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="pricing hover-effect">
<div class="pricing-head">
<h3>Стоимость архитектурного проектирования<span> архитектура </span></h3>
</div>
<div class="table-responsive">
<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>Эскизный проект</td>
<td>м.кв.</td>
<td>150</td>
</tr>
<tr>
<td>2</td>
<td>Архитектурные решения</td>
<td>м.кв.</td>
<td>250</td>
</tr>
<tr class="success">
<td>3</td>
<td>Конструктивные решения</td>
<td>м.кв.</td>
<td>450</td>
</tr>
<tr>
<td>4</td>
<td>Консультация архитектора на объекте</td>
<td>час</td>
<td>1000</td>
</tr>
<tr class="info">
<td>5</td>
<td>Консультация инженера-конструктора на объекте</td>
<td>час</td>
<td>1000</td>
</tr>
<tr>
<td>6</td>
<td>Авторский надзор</td>
<td>м.кв.</td>
<td>от 150 грн.</td>
</tr>
<tr class="warning">
<td>7</td>
<td>Технический надзор</td>
<td>м.кв.</td>
<td>от 200 грн.</td>
</tr>
</tbody>
</table>
</div>
<div class="pricing-footer">
<p>Подробнее о составе архитектурного проекта</p>
<a href="/uslugi/arkhitekturnyj-proekt" class="btn yellow-crusta">Подробнее</a>
</div>
</div>
</div>
<!--//End Pricing --></div>
/***
Content
***/
.content {
padding: 30px 0;
}
/***
Pricing table
***/
.pricing {
position: relative;
margin-bottom: 15px;
border: 3px solid #eee;
}
.pricing-active {
border: 3px solid #22B8F0;
margin-top: -10px;
box-shadow: 7px 7px rgba(54, 215, 172, 0.2);
}
.pricing:hover {
border: 3px solid #22B8F0;
}
.pricing:hover h4 {
color: #22B8F0;
}
.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: #22B8F0;
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: #22B8F0;
}
.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: #22B8F0;
}
.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: #22B8F0;
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:10px 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;
}
/*Table Footer*/
.table-footer {
color: #777;
font-size: 11px;
line-height: 17px;
text-align: center;
padding: 0 10px 0px;
}
