Pricing Table — стиль 88

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

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

<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="pricingTable">
<h3 class="title">STANDARD</h3>
<div class="price-value">
<span class="currency">$</span>
<span class="amount">10.00</span>
<span class="month">/month</span>
</div>
<ul class="pricing-content">
<li><b>50GB</b> Disk Space</li>
<li><b>50</b> Email Accounts</li>
<li><b>50GB</b> Bandwidth</li>
<li><b>10</b> Subdomains</li>
<li><b>15</b> Domains</li>
</ul>
<a href="#" class="pricingTable-signup">Order Now</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="pricingTable pink">
<h3 class="title">BUSINESS</h3>
<div class="price-value">
<span class="currency">$</span>
<span class="amount">20.00</span>
<span class="month">/month</span>
</div>
<ul class="pricing-content">
<li><b>60GB</b> Disk Space</li>
<li><b>60</b> Email Accounts</li>
<li><b>60GB</b> Bandwidth</li>
<li><b>15</b> Subdomains</li>
<li><b>20</b> Domains</li>
</ul>
<a href="#" class="pricingTable-signup">Order Now</a>
</div>
</div>
</div>
</div>
</div>

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

.demo{ background: #fad2c8; }
.pricingTable{
padding: 25px 10px 70px;
margin: 0 15px;
text-align: center;
z-index: 1;
position: relative;
}
.pricingTable:before{
content: "";
width: 100%;
height: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0% 85%, 0 0);
clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0% 85%, 0 0);
}
.pricingTable:after{
content: "";
width: 70px;
height: 30px;
background: #1daa72;
margin: 0 auto;
position: absolute;
top: 70px;
left: 0;
right: 0;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.pricingTable .title{
padding: 15px 0;
margin: 0 -25px 30px;
background: #1daa72;
font-size: 25px;
font-weight: 600;
color: #fff;
text-transform: uppercase;
position: relative;
}
.pricingTable .title:before{
content: "";
border-top: 15px solid #51836d;
border-left: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
bottom: -30px;
left: 0;
}
.pricingTable .title:after{
content: "";
border-top: 15px solid #51836d;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
bottom: -30px;
right: 0;
}
.pricingTable .price-value{
margin-bottom: 25px;
color: #1daa72;
}
.pricingTable .currency{
display: inline-block;
font-size: 30px;
vertical-align: top;
margin-top: 8px;
}
.price-value .amount{
display: inline-block;
font-size: 50px;
font-weight: 700;
}
.price-value .month{
display: block;
font-size: 20px;
font-weight: 500;
line-height: 10px;
text-transform: uppercase;
}
.pricingTable .pricing-content{
padding: 0;
margin: 0;
list-style: none;
border-top: 1px solid #8f8f8f;
border-bottom: 1px solid #8f8f8f;
margin-bottom: 25px;
}
.pricingTable .pricing-content li{
font-size: 17px;
color: #8f8f8f;
line-height: 55px;
}
.pricingTable .pricingTable-signup{
display: inline-block;
padding: 10px 30px;
background: #1daa72;
font-size: 18px;
font-weight: 600;
color: #fff;
overflow: hidden;
position: relative;
transition: all 0.7s ease 0s;
}
.pricingTable .pricingTable-signup:before{
content: "";
display: inline-block;
width: 100%;
height: 100%;
background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
position: absolute;
top: 0;
left: 0;
opacity: 0;
transform: translate(0,100%);
transition: all 0.6s ease-in-out 0s;
}
.pricingTable .pricingTable-signup:hover:before {
opacity: 1;
transform: translate( 0,-100%);
}
.pricingTable.blue:after,
.pricingTable.blue .title,
.pricingTable.blue .pricingTable-signup{ background: #49b0ca; }
.pricingTable.blue .title:after,
.pricingTable.blue .title:before{ border-top: 15px solid #407a88; }
.pricingTable.blue .price-value{ color: #49b0ca; }
.pricingTable.pink:after,
.pricingTable.pink .title,
.pricingTable.pink .pricingTable-signup{ background: #f06ace; }
.pricingTable.pink .price-value{ color: #f06ace; }
.pricingTable.pink .title:after,
.pricingTable.pink .title:before{ border-top: 15px solid #773667; }
@media only screen and (max-width: 990px){
.pricingTable{ margin-bottom: 30px; }
}

Теги: