
Подробное описание и демонстрация работы таблицы цен под номером №61 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 61
Стандарт
$10
/month
- 50 GB Disk Space
- 50 Email Accounts
- 50 GB Monthly Bandwidth
- 10 Subdomains
- 15 Domains
Бизнес
$20
/month
- 60 GB Disk Space
- 60 Email Accounts
- 60 GB Monthly Bandwidth
- 15 Subdomains
- 20 Domains
Премиум
$30
/month
- 70 GB Disk Space
- 70 Email Accounts
- 70 GB Monthly Bandwidth
- 20 Subdomains
- 25 Domains
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <h3 class="title">Standard</h3> <div class="price-value"> <span class="amount">$10 <span class="month">/month</span> </span> </div> <ul class="pricing-content"> <li>50 GB Disk Space</li> <li>50 Email Accounts</li> <li>50 GB Monthly Bandwidth</li> <li>10 Subdomains</li> <li>15 Domains</li> </ul> <a href="#" class="pricingTable-signup">sign up</a> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <h3 class="title">Business</h3> <div class="price-value"> <span class="amount">$20 <span class="month">/month</span> </span> </div> <ul class="pricing-content"> <li>60 GB Disk Space</li> <li>60 Email Accounts</li> <li>60 GB Monthly Bandwidth</li> <li>15 Subdomains</li> <li>20 Domains</li> </ul> <a href="#" class="pricingTable-signup">sign up</a> </div> </div> </div> </div>css разметка для реализации блока прайсов
.pricingTable{ padding: 30px 0; background: #f8f8f8; text-align: center; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1); transition: all 0.4s ease 0s; } .pricingTable:hover{ box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.18); } .pricingTable .title{ font-size: 26px; color: #474646; text-transform: uppercase; margin: 0 0 40px 0; } .pricingTable .price-value{ display: block; background: #474646; margin-bottom: 35px; position: relative; } .pricingTable .price-value:before{ content: ""; width: 150px; height: 110px; border-radius: 50%; background: #f8f8f8; margin: 0 auto; position: absolute; top: -7px; left: 0; right: 0; } .pricingTable .amount{ display: block; padding: 10px 0; font-size: 45px; font-weight: 700; color: #3bb4e5; position: relative; } .pricingTable .month{ display: block; font-size: 16px; margin-top: -10px; } .pricingTable .pricing-content{ padding: 0; margin: 0 0 25px 0; list-style: none; } .pricingTable .pricing-content li{ padding: 10px 5px; font-size: 18px; color: #777; } .pricingTable .pricingTable-signup{ display: inline-block; padding: 11px 35px; font-size: 14px; color: #fff; text-transform: uppercase; box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.08); border: 2px solid #3bb4e5; perspective: 300px; z-index: 1; position: relative; transition: all 0.3s ease 0s; } .pricingTable .pricingTable-signup:hover{ color: #3bb4e5; } .pricingTable .pricingTable-signup:before{ content: ""; width: 100%; height: 100%; background: #3bb4e5; position: absolute; top: 0; left: 0; z-index: -1; transform-origin: left center 0; transition: all 0.3s ease 0s; } .pricingTable .pricingTable-signup:hover:before{ transform: rotateY(90deg); } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 30px; } }