
Подробное описание и демонстрация работы таблицы цен под номером №38 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 38
Стандарт
Lorem ipsum dolor sit amet10
$
/mo
- 50GB Disk Space
- 50 Email Accounts
- 50GB Monthly Bandwidth
- 10 Subdomains
- 15 Domains
Бизнес
Lorem ipsum dolor sit amet20
$
/mo
- 60GB Disk Space
- 60 Email Accounts
- 60GB Monthly Bandwidth
- 15 Subdomains
- 20 Domains
Премиум
Lorem ipsum dolor sit amet30
$
/mo
- 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="subtitle">Lorem ipsum dolor sit amet</span> <div class="price-value">10 <span class="currency">$</span> <span class="month">/mo</span> </div> </div> <ul class="pricing-content"> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>10 Subdomains</li> <li>15 Domains</li> </ul> <a href="#" class="read">sign up<i class="fa fa-angle-right"></i></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="subtitle">Lorem ipsum dolor sit amet</span> <div class="price-value">20 <span class="currency">$</span> <span class="month">/mo</span> </div> </div> <ul class="pricing-content"> <li>60GB Disk Space</li> <li>60 Email Accounts</li> <li>60GB Monthly Bandwidth</li> <li>15 Subdomains</li> <li>20 Domains</li> </ul> <a href="#" class="read">sign up<i class="fa fa-angle-right"></i></a> </div> </div> </div> </div>css разметка для реализации блока прайсов
.pricingTable{ border: 2px solid #e3e3e3; text-align: center; position: relative; padding-bottom: 40px; transform: translateZ(0px); } .pricingTable:before, .pricingTable:after{ content: ""; position: absolute; top: -2px; left: -2px; bottom: -2px; right: -2px; z-index: -1; transition: all 0.5s ease 0s; } .pricingTable:before{ border-right: 2px solid #08c6aa; border-left: 2px solid #08c6aa; transform: scaleY(0); transform-origin: 100% 0 0; } .pricingTable:after{ border-bottom: 2px solid #08c6aa; border-top: 2px solid #08c6aa; transform: scaleX(0); transform-origin: 0 100% 0; } .pricingTable:hover:before{ transform: scaleY(1); } .pricingTable:hover:after{ transform: scaleX(1); } .pricingTable .pricingTable-header{ background: #08c6aa; color: #fff; margin: -2px -2px 35px; padding: 40px 0; } .pricingTable .heading{ font-size: 30px; font-weight: 600; margin: 0 0 5px 0; } .pricingTable .subtitle{ font-size: 14px; display: block; } .pricingTable .price-value{ font-size: 72px; font-weight: 600; margin-top: 10px; position: relative; display: inline-block; } .pricingTable .currency{ font-size: 45px; font-weight: normal; position: absolute; top: 2px; left: -30px; } .pricingTable .month{ font-size: 20px; position: absolute; bottom: 17px; right: -40px; } .pricingTable .pricing-content{ list-style: none; padding: 0; margin-bottom: 30px; } .pricingTable .pricing-content li{ font-size: 16px; color: #7a7e82; line-height: 40px; } .pricingTable .read{ display: inline-block; border: 2px solid #7a7e82; border-right: none; font-size: 14px; font-weight: 700; color: #7a7e82; padding: 9px 30px; position: relative; text-transform: uppercase; transition: all 0.3s ease 0s; } .pricingTable .read:hover{ border-color: #08c6aa; color: #08c6aa; } .pricingTable .read i{ font-size: 19px; margin-top: -10px; position: absolute; top: 50%; right: 15px; transition: all 0.3s ease 0s; } .pricingTable .read:hover i{ right: 5px; } .pricingTable .read:before, .pricingTable .read:after{ content: ""; display: block; height: 30px; border-left: 2px solid #7a7e82; position: absolute; right: -11px; transition: all 0.3s ease 0s; } .pricingTable .read:before{ bottom: -6px; transform: rotate(45deg); } .pricingTable .read:after{ top: -6px; transform: rotate(-45deg); } .pricingTable .read:hover:before, .pricingTable .read:hover:after{ border-left-color: #08c6aa; } @media screen and (max-width: 990px){ .pricingTable{ margin-bottom: 25px; } }