Подробное описание и демонстрация работы таблицы цен под номером №27 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 27
Стандарт
Lorem ipsum dolor
10.00
/month
- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 10 subdomains
- 15 Domains
Бизнес
Lorem ipsum dolor
20.00
/month
- 60GB Disk Space
- 60 Email Accounts
- 60GB Monthly Bandwidth
- 15 subdomains
- 20 Domains
Премиум
Lorem ipsum dolor
30.00
/month
- 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 purple"> <div class="pricingTable-header"> <h3>Standard</h3> <span>Lorem ipsum dolor</span> </div> <div class="pricing-plans"> <span class="price-value"><i class="fa fa-usd"></i><span>10.00</span></span> <span class="month">/month</span> </div> <div class="pricingContent"> <ul> <li><b>50GB</b> Disk Space</li> <li><b>50</b> Email Accounts</li> <li><b>50GB</b> Monthly Bandwidth</li> <li><b>10</b> subdomains</li> <li><b>15</b> Domains</li> </ul> </div><!-- CONTENT BOX--> <div class="pricingTable-sign-up"> <a href="#" class="btn btn-block">sign up</a> </div><!-- BUTTON BOX--> </div> </div> </div> </div>css разметка для реализации блока прайсов
.pricingTable{ border: 1px solid #dbdbdb; box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); text-align: center; transition: all 0.4s ease-in-out 0s; } .pricingTable-header{ padding: 25px 10px; background-color: #fff; } .pricingTable .pricingTable-header h3{ font-size:21px; letter-spacing: 2px; color: #000; text-transform: uppercase; margin-top: 10px; } .pricingTable-header span{ display: block; font-size:12px; } .pricing-plans{ padding: 25px 0; } .price-value{ font-size: 25px; line-height: 35px; color: #fff; display: inline-block; position: relative; } .price-value i{ position: absolute; top: 3px; font-size: 22px; } .price-value span{ font-size: 40px; color: #fff; margin-left: 17px; } .pricing-plans .month{ color: #fff; display: inline-block; font-size: 15px; margin-top: 15px; font-weight: 100; } .pricingContent ul{ padding: 0 15px; margin-bottom: 0; list-style: none; } .pricingContent ul li{ padding: 15px 0; text-transform: capitalize; } .pricingContent ul li:nth-child(even){ background-color: #f7f8f4; } .pricingTable .pricingTable-sign-up{ padding: 25px 0; border-top: 1px solid #dbdbdb; } .btn-block{ width: 50%; margin: 0 auto; background: #6c6c6c; border:1px solid #6c6c6c; padding: 10px 0; color:#fff; text-transform: uppercase; border-radius: 50px; transition:0.3s ease; } .pricingTable .btn-block:hover{ background: #fff; color: #008b8b; border: 1px solid #008b8b; } .pricingTable.purple .pricing-plans{ background-color: #b696e9; } .pricingTable.yellow .pricing-plans{ background-color: #e8ae42; } .pricingTable.green .pricing-plans{ background-color: #008b8b; } @media screen and (max-width:990px){ .pricingTable{ margin-bottom: 30px; } }