
Подробное описание и демонстрация работы таблицы цен под номером №5 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 5
Стандарт
Lorem ipsum $10.9/month- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 50 Domains
- Unlimited Subdomains
Премиум
Lorem ipsum $30.9/month- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 50 Domains
- Unlimited Subdomains
Extra
Lorem ipsum $40.9/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>Lorem ipsum</span> </span> <span class="price-value">$<span>10.9</span><span class="mo">/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">order now</a> </div><!-- BUTTON BOX--> </div> </div> </div> </div>css разметка для реализации блока прайсов
.pricingTable{ text-align: center; background: #fff; } .pricingTable:hover > .pricingTable-header > .heading > h3{ color: #e67e22; transition: all 0.4s ease 0s; } .pricingTable > .pricingTable-header{ color:#333333; } .pricingTable-header > .heading{ display: block; padding-top: 10px; position: relative; } .heading > h3{ text-transform: uppercase; font-weight: 700; margin-bottom: 15px; } .heading > .sale-wrapper{ height: 88px; width: 85px; color:#fff; overflow: hidden; position: absolute; right: -4px; top: -3px; } .sale-wrapper > .sale{ box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); font-size: 12px; padding: 10px 0; position: absolute; left: 0px; top: 10px; text-align: center; text-transform: uppercase; transform: rotate(45deg); width: 120px; background: #e67e22; } .sale-wrapper > .sale:after{ content: ""; position: absolute; bottom: -3px; right:6px; border-left: 3px solid rgba(0, 0, 0, 0); border-right: 3px solid rgba(0, 0, 0, 0); border-top: 3px solid #6e8900; } .pricingTable-header > .price-value{ display: block; color:#e67e22; font-size: 36px; font-weight: 700; } .price-value > .mo{ display: block; color:#333333; font-size: 14px; font-weight: normal; } .pricingTable > .pricingContent{ margin-top: 20px; } .pricingTable > .pricingContent > ul{ list-style: none; padding: 0; margin-bottom: 0; } .pricingTable > .pricingContent > ul > li{ padding: 13px 35px; border-top: 1px solid #dcdcdc; text-transform: uppercase; } .pricingTable > .pricingContent > ul > li:nth-child(odd){ background: #F3F3F3; color:#9c9c9c; text-transform: capitalize; } .pricingTable-sign-up{ padding: 30px 15px; border-top: 1px solid #dcdcdc; background: #EBEBEB; } .pricingTable-sign-up .btn-default{ padding: 15px; background: #e67e22; color:#fff; text-transform: capitalize; border: 0px none; transition: all 0.4s ease 0s; } .pricingTable-sign-up .btn-default:hover{ background: #2F2F2F; color:#fff; } @media screen and (max-width: 990px){ .pricingTable{ margin-bottom: 20px; } }