Подробное описание и демонстрация работы таблицы цен под номером №46 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 46
Стандарт
30
Days
10
$
- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 10 Subdomains
- 15 Domains
Премиум
30
Days
30
$
- 70GB Disk Space
- 70 Email Accounts
- 70GB Monthly Bandwidth
- 20 Subdomains
- 25 Domains
extra
30
Days
40
$
- 80GB Disk Space
- 80 Email Accounts
- 80GB Monthly Bandwidth
- 25 Subdomains
- 30 Domains
<div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <h3 class="title">standard</h3> <div class="month">30 <span>Days</span> </div> <div class="price-value"> <span class="amount">10 <span class="currency">$</span> </span> </div> <ul class="pricing-content"> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>10 Subdomains</li> <li>15 Domains</li> </ul> <a href="#" class="pricingTable-signup">Buy Now</a> </div> </div> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <h3 class="title">Business</h3> <div class="month">30 <span>Days</span> </div> <div class="price-value"> <span class="amount">20 <span class="currency">$</span> </span> </div> <ul class="pricing-content"> <li>60GB Disk Space</li> <li>60 Email Accounts</li> <li>60GB Monthly Bandwidth</li> <li>15 Subdomains</li> <li>20 Domains</li> </ul> <a href="#" class="pricingTable-signup">Buy Now</a> </div> </div> </div> </div>css разметка для реализации блока прайсов
.pricingTable{ border: 2px solid #4a4450; border-radius: 10px; text-align: center; padding: 25px 0 35px; position: relative; } .pricingTable .title{ font-size: 24px; font-weight: 600; color: #4a4450; text-transform: capitalize; margin: 0 0 20px 0; } .pricingTable .title:before, .pricingTable .title:after{ content: ""; display: block; width: 23%; height: 2px; background: #4a4450; position: absolute; top: 40px; } .pricingTable .title:before{ left: 0; } .pricingTable .title:after{ right: 0; } .pricingTable .month{ font-size: 40px; color: #4a4450; margin-bottom: 20px; } .pricingTable .month span{ display: block; font-size: 15px; color: #4a4450; } .pricingTable .price-value{ background: #727cb6; margin: 0 -2px 20px; font-weight: 700; color: #fff; } .pricingTable .amount{ display: inline-block; font-size: 50px; position: relative; } .pricingTable .currency{ font-size: 25px; position: absolute; top: 15px; right: -22px; } .pricingTable .pricing-content{ padding: 0; margin: 0; list-style: none; } .pricingTable .pricing-content li{ font-size: 15px; color: #4a4450; line-height: 30px; } .pricingTable .pricingTable-signup{ display: inline-block; width: 125px; padding: 7px 10px; background: #727cb6; border: 1px solid #727cb6; border-radius: 20px; font-size: 16px; font-weight: bold; color: #fff; text-transform: capitalize; margin: 0 auto; position: absolute; bottom: -18px; left: 0; right: 0; transition: all 0.4s ease 0s; } .pricingTable:hover .pricingTable-signup{ text-decoration: none; background: #fff; color: #727cb6; } @media only screen and (max-width:990px){ .pricingTable{ margin-bottom: 35px; } }