Подробное описание и демонстрация работы таблицы цен под номером №55 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 55
Стандарт
$10- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 10 Subdomains
- 15 Domains
Бизнес
$20- 60GB Disk Space
- 60 Email Accounts
- 60GB Monthly Bandwidth
- 15 Subdomains
- 20 Domains
Премиум
$30- 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"> <span class="icon"><i class="fa fa-globe"></i></span> <div class="pricingTable-header"> <h3 class="title">Standard</h3> <span class="price-value">$10</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">Sign Up</a> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <span class="icon"><i class="fa fa-briefcase"></i></span> <div class="pricingTable-header"> <h3 class="title">Business</h3> <span class="price-value">$20</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">Sign Up</a> </div> </div> </div> </div>css разметка для реализации блока прайсов
.pricingTable{ box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); padding: 50px 15px; text-align: center; margin-top: 30px; color: #292929; perspective: 700px; z-index: 1; position: relative; transition: all 0.3s ease-in-out 0s; } .pricingTable:hover{ color: #fff; } .pricingTable:after{ content: ""; width: 100%; height: 100%; background: #3485ef; position: absolute; top: 0; left: 0; opacity: 0; z-index: -1; transform: rotateY(70deg); transition: all 0.3s ease-in-out 0s; } .pricingTable:hover:after{ opacity: 1; transform: rotateY(0deg); } .pricingTable .icon{ width: 69px; height: 69px; line-height: 69px; border-radius: 50%; background: #fff; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); margin: 0 auto; font-size: 25px; color: #3485ef; position: absolute; top: -34px; left: 0; right: 0; } .pricingTable .pricingTable-header{ margin-bottom: 30px; } .pricingTable .title{ display: block; font-size: 18px; font-weight: 600; text-transform: uppercase; margin: 0 0 10px 0; } .pricingTable .price-value{ display: inline-block; border-bottom: 5px solid #3485ef; font-size: 30px; font-weight: 700; transition: all 0.3s ease-in-out 0s; } .pricingTable:hover .price-value{ border-bottom-color: #fff; } .pricingTable .pricing-content{ list-style: none; padding: 0; margin: 0 0 20px 0; } .pricingTable .pricing-content li{ font-size: 14px; line-height: 40px; } .pricingTable .pricingTable-signup{ display: inline-block; padding: 9px 23px; background: #3485ef; font-size: 14px; font-weight: 600; color: #fff; text-transform: uppercase; position: relative; transition: all 0.25s ease-in-out 0s; } .pricingTable:hover .pricingTable-signup{ background: #fff; color: #3485ef; } .pricingTable .pricingTable-signup:before, .pricingTable .pricingTable-signup:after{ content: ""; height: 100%; position: absolute; top: 0; border-top: 18px solid transparent; border-bottom: 18px solid transparent; transition: all 0.25s ease-in-out 0s; } .pricingTable .pricingTable-signup:before{ left: -12px; border-right: 12px solid #3485ef; } .pricingTable .pricingTable-signup:after{ right: -12px; border-left: 12px solid #3485ef; } .pricingTable:hover .pricingTable-signup:before{ border-right-color: #fff; } .pricingTable:hover .pricingTable-signup:after{ border-left-color: #fff; } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 30px; } } @media only screen and (max-width: 767px){ .pricingTable{ margin-bottom: 50px; } }