Pricing Table — стиль 26

Подробное описание и демонстрация работы таблицы цен под номером №26 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.

html разметка для реализации блока прайсов

<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="pricingTable">
<div class="pricingTable-header">
<span class="heading">
<h3>Standard</h3>
</span>
<span class="price-value">$10<span class="month">Lorem ipsum</span></span>
</div>
<div class="pricingTable-sign-up">
<a href="#" class="btn btn-default" >purchase</a>
</div>
</div>
</div>
</div>
</div>

css разметка для реализации блока прайсов

.pricingTable{
text-align: center;
border-radius: 8px;
overflow: hidden;
}
.pricingTable .pricingTable-header{
background: #152a38;
}
.pricingTable .heading{
display: block;
padding: 15px 0;
}
.pricingTable .heading:after {
content: "";
width: 28%;
border-top: 1px solid #7c888f;
display: block;
margin: 15px auto 0;
}
.pricingTable .heading h3{
font-size: 24px;
color: #fff;
text-transform: uppercase;
margin:0;
letter-spacing: 2px;
}
.pricingTable .price-value{
font-size: 85px;
color:#fff;
padding: 10px 0 30px 0;
display: block;
}
.pricingTable .month{
display: block;
font-size: 16px;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 15px;
color: #7f909a;
}
.pricingTable .btn{
display: block;
font-size: 22px;
background: #eab01b;
border: none;
border-radius: 0;
padding: 20px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.pricingTable .btn:after{
content: "f00c";
font-family: "Font Awesome 5 Free"; font-weight: 900;
margin-left: 5px;
opacity: 0;
transition:all 0.5s ease 0s;
}
.pricingTable:hover .btn:after{
opacity: 1;
}
@media screen and (max-width: 990px){
.pricingTable{
margin-bottom: 20px;
}
}

Теги: