Подробное описание и демонстрация работы таблицы цен под номером №21 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 21
Стандарт
10
Lorem ipsum dolor
- 50GB Disk Space
- 50Email Accounts
- 50GB Monthly Bandwidth
- 10 subdomains
- 15 Domains
Бизнес
20
Lorem ipsum dolor
- 70GB Disk Space
- 70Email Accounts
- 70GB Monthly Bandwidth
- 15 subdomains
- 20 Domains
Премиум
30
Lorem ipsum dolor
- 80GB Disk Space
- 80Email Accounts
- 80GB 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"> <span class="heading"> Standard </span> </div> <div class="pricing-plans"> <span class="price-value"><i class="fa fa-usd"></i><span>10</span></span> <span class="subtitle">Lorem ipsum dolor</span> </div> <div class="pricingContent"> <ul> <li><b>50GB</b> Disk Space</li> <li><b>50</b>Email Accounts</li> <li><b>50GB</b> Monthly Bandwidth</li> <li><b>10</b> subdomains</li> <li><b>15</b> Domains</li> </ul> </div><!-- / CONTENT BOX--> <div class="pricingTable-sign-up"><!-- BUTTON BOX--> <a href="#" class="btn btn-block btn-default">buy now</a> </div><!-- BUTTON BOX--> </div> </div> </div> </div>css разметка для реализации блока прайсов
.pricingTable { border: 1px solid #dbdbdb; box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); margin: 0 -15px; text-align: center; transition: all 0.4s ease-in-out 0s; } .pricingTable:hover{ border: 2px solid #e46367; margin-top: -30px; } .pricingTable .pricingTable-header{ padding: 30px 10px; } .pricingTable .heading{ display: block; color: #000; font-weight: 900; text-transform: uppercase; font-size:21px; } .pricingTable .pricing-plans { padding-bottom: 25px; border-bottom: 1px solid #d0d0d0; color: #000; font-weight: 900; } .pricingTable .price-value{ color: #474747; display: block; font-size: 25px; font-weight: 800; line-height: 35px; padding: 0 10px; } .pricingTable .price-value span{ font-size: 50px; } .pricingTable .subtitle{ color: #82919f; display: block; font-size: 15px; margin-top: 15px; font-weight: 100; } .pricingTable .pricingContent ul{ padding: 0; list-style: none; margin-bottom: 0; } .pricingTable .pricingContent ul li{ padding: 20px 0; } .pricingTable .pricingContent ul li:nth-child(odd) { background-color: #fff; } .pricingTable .pricingContent ul li:last-child{ border-bottom: 1px solid #dbdbdb; } .pricingTable .pricingTable-sign-up{ padding: 25px 0; } .pricingTable .btn-block{ width: 50%; margin: 0 auto; background: #e46367; border:1px solid transparent; padding: 10px 5px; color:#fff; text-transform: capitalize; border-radius: 5px; transition:0.3s ease; } .pricingTable .btn-block:after{ content: "f090"; font-family: "Font Awesome 5 Free"; font-weight: 900; padding-left: 10px; font-size: 15px; } .pricingTable:hover .btn-block{ background:#fff; color: #e46367; border:1px solid #e46367; } @media screen and (max-width:990px){ .pricingTable{ margin-bottom: 30px; } } @media screen and (max-width:767px){ .pricingTable{ margin: 0 0 30px 0; } }