
Подробное описание и демонстрация работы таблицы цен под номером №3 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
html разметка для реализации блока прайсов<div class="container"> <div class="row"> <div class="col-sm-4"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="price-value"><span class="currency">$</span>20<span class="mo">per month</span></span> <span class="heading"> <h3>Standard</h3> </span> </div> <div class="pricingContent"> <ul> <li><a href="#"><b>50GB</b> Disk Space</a></li> <li><a href="#"><b>50</b> Email Accounts</a></li> <li><a href="#"><b>50GB</b> Monthly Bandwidth</a></li> <li><a href="#"><b>50</b> Domains</a></li> <li><a href="#"><b>Unlimited</b> Subdomains</a></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{ background: #fff; text-align: center; } .pricingTable-header > .price-value{ padding: 30px 0; display: block; color:#494949; font-size: 50px; line-height: 30px; transition: all 0.3s ease-in-out 0s; } .price-value > .mo{ display: block; font-size: 18px; font-weight: 100; } .price-value > .currency{ font-size: 24px; position: relative; bottom: 17px; margin-right: 5px; } .pricingTable:hover .pricingTable-header > .price-value{ background: #e67e22; color:#fff; } .pricingTable > .pricingTable-header{ color:#fff; } .pricingTable-header > .heading{ padding: 12px; background: #e67e22; display: block; width: 65%; transition: all 0.3s ease-in-out 0s; } .pricingTable-header > .heading > h3{ margin: 0; text-transform: uppercase; font-size: 22px; } .pricingTable:hover .pricingTable-header > .heading{ width: 100%; background: #d3721d; } .pricingTable > .pricingContent{ margin-top: 20px; } .pricingContent > ul{ list-style: none; padding: 0; } .pricingContent > ul > li{ margin: 10px 0; padding: 8px 0; } .pricingContent > ul > li:hover{ background: #F7F7F7 ; } .pricingContent > ul > li > a{ display: block; text-transform: capitalize; font-size: 18px; color:#494949; } .pricingContent > ul > li > a:hover{ text-decoration: none; } .pricingTable-sign-up{ padding: 10px 0 30px; } .pricingTable-sign-up > .btn-block{ width: 40%; margin: 0 auto; padding: 8px 0; border-radius: 0px; text-transform: uppercase; background: #e67e22; color:#fff; font-size: 16px; border: 0px none; transition: all 0.3s ease-in-out 0s; } .pricingTable-sign-up > .btn-block:hover{ width: 50%; background: #d3721d; } .mid .price-value{ background: #e67e22; color:#fff; position: relative; } .mid .heading{ width: 100%; background: #d3721d; } .mid .btn-block{ width: 50%; background: #e67e22; } .mid .icon{ width: 50px; height: 65px; display: inline-block; position: absolute; background: #d3721d; top:0; right: 10px; font-size: 18px; line-height: 50px; } .mid .icon:after{ content: ""; border-bottom: 15px solid #e67e22; border-left: 25px solid rgba(0, 0, 0, 0); border-right: 25px solid rgba(0, 0, 0, 0); z-index: 999; position: absolute; bottom: 0; right: 0; } @media screen and (max-width: 768px){ .pricingTable{ margin-bottom: 20px; } }