
Подробное описание и демонстрация работы таблицы цен под номером №42 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 42
Стандарт
$ 10 /monthly- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 10 Subdomains
- 15 Domains
Бизнес
$ 20 /monthly- 60GB Disk Space
- 60 Email Accounts
- 60GB Monthly Bandwidth
- 15 Subdomains
- 20 Domains
Премиум
$ 30 /monthly- 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"> <div class="pricingTable-header"> <h3 class="heading">STANDARD</h3> <span class="currency">$</span> <span class="price-value">10</span> <span class="month">/monthly</span> </div> <div class="pricing-content"> <ul> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>10 Subdomains</li> <li>15 Domains</li> </ul> </div> <a href="#" class="pricingTable-signup">SIGN IN</a> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <h3 class="heading">Business</h3> <span class="currency">$</span> <span class="price-value">20</span> <span class="month">/monthly</span> </div> <div class="pricing-content"> <ul> <li>60GB Disk Space</li> <li>60 Email Accounts</li> <li>60GB Monthly Bandwidth</li> <li>15 Subdomains</li> <li>20 Domains</li> </ul> </div> <a href="#" class="pricingTable-signup">SIGN IN</a> </div> </div> </div> </div>css разметка для реализации блока прайсов
.pricingTable{ border: 1px solid #e7e7e7; text-align: center; padding: 0 30px 30px; transition: all 0.5s ease 0s; } .pricingTable:hover{ border: 1px solid #1ed193; } .pricingTable .pricingTable-header{ width: 210px; background: #1ed193; color: #fff; margin: -15px auto 95px; padding-top: 35px; position: relative; } .pricingTable .pricingTable-header:before{ content: ""; border-width: 0 0 15px 10px; border-style: solid; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #1cb580; position: absolute; top: 0; left: -10px; } .pricingTable .pricingTable-header:after{ content: ""; border-width: 15px 0 0 10px; border-style: solid; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #1cb580; position: absolute; top: 0; right: -10px; } .pricingTable .heading{ font-size: 22px; font-weight: 800; margin: 5px 0; text-transform: uppercase; position: relative; } .pricingTable .heading:after{ content: ""; border-width: 60px 105px 0; border-style: solid; border-color: #1ed193 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); position: absolute; bottom: -108px; left: 0; } .pricingTable .currency, .pricingTable .month{ font-size: 20px; } .pricingTable .price-value{ font-size: 30px; } .pricingTable .pricing-content ul{ list-style: none; padding: 0; margin: 0 0 25px 0; } .pricingTable .pricing-content ul li{ font-size: 14px; color: #334a6b; line-height: 40px; } .pricingTable .pricingTable-signup{ display: inline-block; font-size: 14px; font-weight: 600; color: #334a6b; text-transform: capitalize; border: 2px solid #e7e7e7; padding: 10px 40px; transition: all 0.5s ease 0s; } .pricingTable .pricingTable-signup:hover{ border: 2px solid #1ed193; } @media only screen and (max-width:990px){ .pricingTable{ margin-bottom: 50px; } }