Подробное описание и демонстрация работы таблицы цен под номером №41 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 41
$10.00
Стандарт
- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 10 Subdomains
- 15 Domains
$20.00
Бизнес
- 60GB Disk Space
- 60 Email Accounts
- 60GB Monthly Bandwidth
- 15 Subdomains
- 20 Domains
$30.00
Премиум
- 70GB Disk Space
- 70 Email Accounts
- 70GB Monthly Bandwidth
- 20 Subdomains
- 25 Domains
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="price-Value"> <span class="currency">$</span>10.00 </div> <div class="pricing-content"> <h3 class="title">Standard</h3> <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> </div> <div class="pricingTable-signup"> <a href="#">SIGN IN</a> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable table2"> <div class="price-Value"> <span class="currency">$</span>20.00 </div> <div class="pricing-content"> <h3 class="title">Business</h3> <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> </div> <div class="pricingTable-signup"> <a href="#">SIGN IN</a> </div> </div> </div> </div> </div>css разметка для реализации блока прайсов
.pricingTable{ padding: 30px 0; text-align: center; background: #3ab7b1; color: #fdfffd; border-radius: 50%; position: relative; z-index: 1; transition: all 0.3s ease 0s; } .pricingTable:before{ content: ""; width: 100%; height: 100%; border-radius: 50%; position: absolute; top: -7px; left: -7px; box-sizing: content-box; opacity: 0; padding: 7px; z-index: -1; transform: translateY(7px) scale(0.8); box-shadow: 0 0 0 2px #3ab7b1; transition: all 0.2s ease 0s; } .pricingTable:hover:before{ opacity: 1; transform: scale(1); } .pricingTable .price-Value{ font-size: 50px; font-weight: 900; } .pricingTable .currency{ display: inline-block; font-size: 20px; font-weight: normal; margin-right: 5px; } .pricingTable .title{ font-size: 24px; font-weight: 700; margin: 7px 0; } .pricingTable .pricing-content ul{ list-style: none; padding: 0; margin: 0; margin-bottom: 15px; } .pricingTable .pricing-content ul li{ font-size: 15px; line-height: 25px; } .pricingTable .pricingTable-signup a{ display: inline-block; font-size: 20px; color: #fdfffd; padding-bottom: 7px; z-index: 1; border-bottom: 1px solid #fdfffd; text-transform: uppercase; } .pricingTable.table2{ background: #ff3847; } .pricingTable.table2:before{ box-shadow: 0 0 0 2px #ff3847; } .pricingTable.table3{ background: #ffb036; } .pricingTable.table3:before{ box-shadow: 0 0 0 2px #ffb036; } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 30px; } .pricingTable, .pricingTable:before{ border-radius: 0; } }