Подробное описание и демонстрация работы таблицы цен под номером №60 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 60
Стандарт
$
10
month
Lorem ipsum dolor sit amet.
- 50 GB Disk Space
- 50 Email Accounts
- 50 GB Monthly Bandwidth
- 10 Subdomains
- 15 Domains
Бизнес
$
20
month
Lorem ipsum dolor sit amet.
- 60 GB Disk Space
- 60 Email Accounts
- 60 GB Monthly Bandwidth
- 15 Subdomains
- 20 Domains
Премиум
$
30
month
Lorem ipsum dolor sit amet.
- 70 GB Disk Space
- 70 Email Accounts
- 70 GB Monthly Bandwidth
- 20 Subdomains
- 25 Domains
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <h3 class="title">Standard</h3> <div class="price-value"> <span class="amount"> <span class="currency">$</span> 10 <span class="month">month</span> </span> </div> <p class="description"> Lorem ipsum dolor sit amet. </p> </div> <ul class="pricing-content"> <li>50 GB Disk Space</li> <li>50 Email Accounts</li> <li>50 GB Monthly Bandwidth</li> <li>10 Subdomains</li> <li>15 Domains</li> </ul> <a href="#" class="pricingTable-signup"><span>Sign Up</span></a> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <h3 class="title">Business</h3> <div class="price-value"> <span class="amount"> <span class="currency">$</span> 20 <span class="month">month</span> </span> </div> <p class="description"> Lorem ipsum dolor sit amet. </p> </div> <ul class="pricing-content"> <li>60 GB Disk Space</li> <li>60 Email Accounts</li> <li>60 GB Monthly Bandwidth</li> <li>15 Subdomains</li> <li>20 Domains</li> </ul> <a href="#" class="pricingTable-signup"><span>Sign Up</span></a> </div> </div> </div> </div>css разметка для реализации блока прайсов
.pricingTable{ padding-bottom: 20px; border: 1px solid #f78524; text-align: center; } .pricingTable .pricingTable-header{ padding: 120px 0 10px 0; background: #ffe8d5; overflow: hidden; position: relative; } .pricingTable .title{ width: 130%; padding: 80px 0 5px 35px; margin: 0; background: linear-gradient(to right, #f78524, #ffb677); font-size: 22px; color: #444; text-transform: uppercase; letter-spacing: 1px; text-align: left; position: absolute; top: -43px; left: -20px; transform: rotate(-11deg); } .pricingTable .price-value{ padding: 40px 48px; position: absolute; right: -20px; top: -15px; } .pricingTable .price-value:before{ content: ""; width: 100%; height: 100%; background: linear-gradient(to right, #f78524, #ffb677); position: absolute; right: -3px; top: 0; transform: rotate(18deg); } .pricingTable .price-value:after{ content: ""; border-top: 14px solid #fb9b49; border-left: 69px solid rgba(0, 0, 0, 0); border-right: 69px solid rgba(0, 0, 0, 0); position: absolute; bottom: -10px; left: -20px; transform: rotate(18deg); } .pricingTable .amount{ font-size: 38px; color: #444; font-weight: bold; position: relative; left: -5px; } .pricingTable .currency{ font-size: 20px; font-weight: bold; position: absolute; top: 0; left: -13px; } .pricingTable .month{ font-size: 14px; font-weight: normal; text-transform: uppercase; letter-spacing: 0; position: absolute; bottom: -18px; right: 5px; } .pricingTable .description{ font-size: 14px; color: #444; padding-left: 20px; text-align: left; } .pricingTable .pricing-content{ padding: 0; margin: 0; list-style: none; } .pricingTable .pricing-content li{ display: block; padding: 15px 0; font-size: 16px; color: #444; text-align: center; border-bottom: 1px solid #ced2d3; } .pricingTable .pricing-content li:last-child{ border-bottom: none; } .pricingTable .pricing-content li:nth-child(even){ background: #ffe8d5; } .pricingTable .pricingTable-signup{ display: inline-block; margin-top: 15px; z-index: 1; position: relative; } .pricingTable .pricingTable-signup:before, .pricingTable .pricingTable-signup:after{ content: ""; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 6px solid #ddd; position: absolute; top: 0; transform: rotate(45deg); z-index: -1; transition: all 0.3s ease 0s; } .pricingTable .pricingTable-signup:before{ left: -28px; border-top-color: #e67e22; border-right-color: #e67e22; } .pricingTable .pricingTable-signup:after{ right: -28px; border-bottom-color: #e67e22; border-left-color: #e67e22; } .pricingTable:hover .pricingTable-signup:before, .pricingTable:hover .pricingTable-signup:after{ transform: rotate(225deg); } .pricingTable .pricingTable-signup span{ display: inline-block; padding: 12px 16px; background: #fff; font-size: 14px; font-weight: bold; color: #444; text-transform: uppercase; border-bottom: 6px solid #e67e22; border-top: 6px solid #e67e22; } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 30px; } .pricingTable .price-value:after{ border-left: 71px solid rgba(0, 0, 0, 0); border-right: 71px solid rgba(0, 0, 0, 0); } } @media only screen and (max-width: 767px) and (min-width: 500px){ .pricingTable .title{ top: -93px; } } @media only screen and (max-width: 480px){ .pricingTable .title{ top: -50px; } }