Подробное описание и демонстрация работы таблицы цен под номером №4 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 4
Стандарт
$ 10.9 per month- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 50 Domains
- Unlimited Subdomains
Бизнес
popular $ 20.9 per month- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 50 Domains
- Unlimited Subdomains
Extra
$ 40.9 per month- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 50 Domains
- Unlimited Subdomains
<div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="heading"> <h3>Standard</h3> </span> <span class="price-value">$<span> 10.9</span><span class="mo"> per month</span></span> </div> <div class="pricingContent"> <ul> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>50 Domains</li> <li>Unlimited Subdomains</li> </ul> </div><!-- / CONTENT BOX--> <div class="pricingTable-sign-up"> <a href="#" class="btn btn-block btn-default">sign up</a> </div><!-- BUTTON BOX--> </div> </div> </div> </div>css разметка для реализации блока прайсов
.pricingTable{ text-align: center; transition:all 0.3s ease 0s; } .pricingTable > .pricingTable-header{ color:#fff; position: relative; } .pricingTable-header > .heading{ background: #727cb6; display: block; padding: 30px 0; border-radius: 10px 10px 0 0; } .heading > h3{ text-transform: capitalize; margin: 0; } .pricingTable-header > .price-value{ background: #5f6795; display: block; padding: 20px 0; font-size: 30px; line-height: 27px; } .price-value > .mo{ display: block; font-size: 13px; } .pricingTable > .pricingContent{ text-align: center; text-transform: capitalize; } .pricingContent > ul{ list-style: none; padding: 0; margin-bottom: 0; } .pricingContent > ul > li{ padding: 10px 0; border: 1px solid #DBDBDB; border-top: 0px none; background: #F5F5F5; } .pricingTable-sign-up{ padding: 15px 0; border: 1px solid #DBDBDB; border-top: 0px none; } .btn-block{ width: 40%; margin: 0 auto; border-radius: 4px; text-transform: capitalize; background: linear-gradient(#8991be 40%,#727cb6 60%); border: 1px solid #727cb6; color:#fff; padding: 8px 0; } .btn-block:hover{ color:#fff; border: 1px solid #727cb6; } .pink .heading{ background: #ed687c; } .pink .heading > .popular{ display: inline-block; transform:rotate(-90deg); position: absolute; top:23px; right: -10px; background: #bb5163; padding: 10px 30px 10px 8px } .pink .heading > .popular:before{ content: ""; width:40px; height:40px; background: #9d4352; display: inline-block; position: absolute; top: 0px; right:100%; } .pink .heading > .popular:after{ content: ""; border-bottom: 15px solid #bb5163; border-left: 20px solid rgba(0, 0, 0, 0); border-right: 20px solid rgba(0, 0, 0, 0); position: absolute; top: 30%; left:-60%; transform:rotate(90deg); } .pink .price-value{ background: #bb5163; } .pink .btn-block{ background: linear-gradient(#f499a8 40%,#ed687c 60%); border: 1px solid #ed687c; } .green .heading{ background: #1abc9c; } .green .price-value{ background: #25917d; } .green .btn-block{ background: linear-gradient(#4ed7be 40%,#1abc9c 60%); border: 1px solid #1abc9c; } .blue .heading{ background: #3498db; } .blue .price-value{ background: #3480b7; } .blue .btn-block{ background: linear-gradient(#5ba7dd 40%,#3498db 60%); border: 1px solid #3498db; } .pricingTable:hover{ margin-top: -20px; } @media screen and (max-width: 990px){ .pricingTable{ margin-bottom: 20px; } }