Подробное описание и демонстрация работы таблицы цен под номером №8 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 8
$10per month
Стандарт
- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 50 Domains
- Unlimited Subdomains
$20per month
Бизнес
- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 50 Domains
- Unlimited Subdomains
$30per 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="price-value"><span class="currency">$</span>10<span class="mo">per month</span></span> <span class="heading"> <h3>Standard</h3> </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; background: #fff; border: 1px solid #e1e1e1; } .pricingTable > .pricingTable-header{ color:#fff; padding:45px 0 0 0; position: relative; } .pricingTable-header > .price-value{ width: 160px; height: 160px; border-radius: 50%; margin: 0 auto; background: #727cb6; display: block; font-size: 50px; line-height: 30px; padding: 45px 0; border: 7px solid #fff; box-shadow: 0 0 0 2px #727cb6; } .price-value > .mo{ font-size: 15px; display: block; text-transform: capitalize; } .price-value > .currency{ font-size: 24px; position: relative; bottom: 20px; margin-right: 4px; } .pricingTable-header > .heading{ padding:30px 0 20px 0; display: block; } .heading > h3{ color:#727272; text-transform: uppercase; margin: 0; font-weight: 700; } .pricingTable > .pricingContent{ text-transform: capitalize; } .pricingTable > .pricingContent > ul{ list-style: none; padding: 0; margin-bottom: 0; } .pricingTable > .pricingContent > ul > li{ border-top: 1px solid #e1e1e1; padding: 15px 0; color:#818d9a; } .pricingTable > .pricingContent > ul > li:nth-child(odd){ background: #f8f8f8; } .pricingTable-sign-up{ padding: 40px 0; border-top: 1px solid #e1e1e1; } .pricingTable-sign-up > .btn-block{ width: 60%; margin: 0 auto; border-radius: 0px; padding: 10px 2px; border: 2px solid #727272; color:#727272; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; transition: all 0.2s ease-in-out 0s; } .pricingTable-sign-up > .btn-block:hover{ background: #727272; color:#fff; } .mid { box-shadow: 0 0 10px 2px #e1e1e1; } .mid .pricingTable-header:after{ content: "hot"; width: 55px; height:55px; border-radius: 50%; background: #727272; display: block; position: absolute; top:10px; right: 10px; text-transform: uppercase; line-height: 50px; font-weight: bold; } .mid .price-value{ background: #727272; box-shadow: 0 0 0 2px #727272; } @media screen and (max-width: 990px){ .pricingTable{ margin-bottom: 40px; } }