
Подробное описание и демонстрация работы таблицы цен под номером №54 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 54
Стандарт
$10
/month
- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 10 Subdomains
- 15 Domains
Бизнес
$20
/month
- 60GB Disk Space
- 60 Email Accounts
- 60GB Monthly Bandwidth
- 15 Subdomains
- 20 Domains
Премиум
$30
/month
- 70GB Disk Space
- 70 Email Accounts
- 70GB Monthly Bandwidth
- 20 Subdomains
- 25 Domains
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="icon"><i class="fa fa-globe"></i></span> <h3 class="title">Standard</h3> <div class="price-value"> <span class="currency">$</span>10 <span class="month">/month</span> </div> </div> <div class="pricing-content"> <ul> <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">Sign Up</a> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="icon"><i class="fa fa-briefcase"></i></span> <h3 class="title">Business</h3> <div class="price-value"> <span class="currency">$</span>20 <span class="month">/month</span> </div> </div> <div class="pricing-content"> <ul> <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">Sign Up</a> </div> </div> </div> </div> </div> </div>css разметка для реализации блока прайсов
.demo{ background: #333; } .pricingTable{ text-align: center; background: #595555; transition: all 0.3s ease 0s; } .pricingTable:hover{ background: #f95b34; } .pricingTable .pricingTable-header{ padding: 25px 0; color: #fff; transition: all 0.3s ease 0s; } .pricingTable:hover .pricingTable-header{ color: #222; } .pricingTable .icon{ display: block; font-size: 50px; margin-bottom: 10px; } .pricingTable .title{ display: block; font-size: 22px; font-weight: 600; margin: 0 0 10px 0; } .pricingTable .price-value{ display: inline-block; font-size: 50px; position: relative; } .pricingTable .currency{ font-size: 25px; position: absolute; top: 13px; left: -19px; } .pricingTable .month{ font-size: 20px; position: absolute; top: 32px; right: -65px; } .pricingTable .pricing-content{ padding: 35px 0; background: #222; border-radius: 30px 30px 0 0; color: #fff; } .pricingTable .pricing-content ul{ list-style: none; padding: 0; margin: 0 0 40px 0; } .pricingTable .pricing-content ul li{ font-size: 14px; line-height: 40px; } .pricingTable .pricingTable-signup{ display: inline-block; padding: 8px 40px; border-radius: 30px; border: 1px solid #595555; font-size: 15px; font-weight: 600; color: #fff; transition: all 0.5s ease 0s; } .pricingTable .pricingTable-signup:hover{ background: #f95b34; border-color: #f95b34; color: #222; } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 30px; } }