Подробное описание и демонстрация работы таблицы цен под номером №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;
}
}