
Подробное описание и демонстрация работы таблицы цен под номером №87 для библиотеки Bootstrap. Html и CSS код для реализации блока table price на сайте как на изображении.
Демо Таблицы цен — стиль 87
- 50GB Disk Space
- 50 Email Accounts
- 50GB Bandwidth
- 10 Subdomains
- 15 Domains
- 60GB Disk Space
- 60 Email Accounts
- 60GB Bandwidth
- 15 Subdomains
- 20 Domains
- 70GB Disk Space
- 70 Email Accounts
- 70GB Bandwidth
- 20 Subdomains
- 25 Domains
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <svg x="0px" y="0px" viewBox="0 0 260 180"> <path fill="#34454d" stroke-dasharray="5,5" stroke=#fff d="M0,180.928c0,0,0-108.489,0-143.333C1.637,23.582,8.907,0,42.088,0C75.271,0,260,0,260,0v72.841 c0,0-2.667,37.424-43.877,45.563C177.693,125.992,6.26,130.42,0,180.928z"/> <text transform="matrix(1.0078 0 0 1 75.9497 33.8887)" fill="#fff" font-size="23.726">STANDARD</text> <g> <text transform="matrix(1.0078 0 0 1 98.5996 65.9434)" fill="#fff" font-size="23.726">$</text> <text transform="matrix(1.076 0 0 1 112.0176 88.458)" fill="#fff" font-size="58.1472" font-weight="600">10</text> <text transform="matrix(1.0078 0 0 1 107.9326 106.832)" fill="#fff" font-size="16.2415">/month</text> </g> </svg> </div> <ul class="pricing-content"> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Bandwidth</li> <li class="disable">10 Subdomains</li> <li class="disable">15 Domains</li> </ul> <div class="pricingTable-signup"> <svg x="0" y="0" viewBox="-35 0 160 30" > <a href="#"> <path fill="#fff" d="M13.12,5.867c17.786-0.834,68.654-5.473,68.654-5.473s8.203-1.945,7.445,5.473 c-0.757,7.417-4.037,16.782-4.037,16.782s-1.667,5.881-9.719,6.932c-8.961,0.852-50.858-0.983-67.771,0 c-2.718,0.158-9.935,0.256-7.446-7.66c2.736-9.18,3.408-10.459,3.408-10.459S5.647,5.86,13.12,5.867z"/> <text transform="matrix(1 0 0 1 15.5055 21.0098)" fill="#34454D" font-size="10" font-weight="600">SUBSCRIBE</text> </a> </svg> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <svg x="0px" y="0px" viewBox="0 0 260 180"> <path fill="#34454d" stroke-dasharray="5,5" stroke=#fff d="M0,180.928c0,0,0-108.489,0-143.333C1.637,23.582,8.907,0,42.088,0C75.271,0,260,0,260,0v72.841 c0,0-2.667,37.424-43.877,45.563C177.693,125.992,6.26,130.42,0,180.928z"/> <text transform="matrix(1.0078 0 0 1 75.9497 33.8887)" fill="#fff" font-size="23.726">BUSINESS</text> <g> <text transform="matrix(1.0078 0 0 1 98.5996 65.9434)" fill="#fff" font-size="23.726">$</text> <text transform="matrix(1.076 0 0 1 112.0176 88.458)" fill="#fff" font-size="58.1472" font-weight="600">20</text> <text transform="matrix(1.0078 0 0 1 107.9326 106.832)" fill="#fff" font-size="16.2415">/month</text> </g> </svg> </div> <ul class="pricing-content"> <li>60GB Disk Space</li> <li>60 Email Accounts</li> <li>60GB Bandwidth</li> <li>15 Subdomains</li> <li class="disable">20 Domains</li> </ul> <div class="pricingTable-signup"> <svg x="0" y="0" viewBox="-35 0 160 30" > <a href="#"> <path fill="#fff" d="M13.12,5.867c17.786-0.834,68.654-5.473,68.654-5.473s8.203-1.945,7.445,5.473 c-0.757,7.417-4.037,16.782-4.037,16.782s-1.667,5.881-9.719,6.932c-8.961,0.852-50.858-0.983-67.771,0 c-2.718,0.158-9.935,0.256-7.446-7.66c2.736-9.18,3.408-10.459,3.408-10.459S5.647,5.86,13.12,5.867z"/> <text transform="matrix(1 0 0 1 15.5055 21.0098)" fill="#34454D" font-size="10" font-weight="600">SUBSCRIBE</text> </a> </svg> </div> </div> </div> </div> </div> </div>css разметка для реализации блока прайсов
.demo{ background: #e5e5e3; } .pricingTable{ text-align: center; background: #28b6f6; border-radius: 102px 0 102px 0; overflow: hidden; transition: all 0.3s ease 0s; } .pricingTable:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.5); } .pricingTable .pricingTable-header{ margin: -2px -5px 0; position: relative; } .pricingTable .pricing-content{ padding: 0; margin: -25px 0 0 0; list-style: none; } .pricingTable .pricing-content li{ font-size: 20px; color: #fff; line-height: 50px; letter-spacing: 1px; border-bottom: 1px solid #fff; } .pricingTable .pricing-content li.disable{ color: rgba(255,255,255,0.5); } .pricingTable .pricing-content li:last-child{ border-bottom: none; } .pricingTable .pricingTable-signup{ padding: 25px 0; } .pricingTable .pricingTable-signup a path, .pricingTable .pricingTable-signup a text{ transition: all 0.3s ease 0s; } .pricingTable .pricingTable-signup a:hover path{ fill: #34454d; stroke: #fff; stroke-dasharray: 5,3; } .pricingTable .pricingTable-signup a:hover text{ fill: #fff; } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 30px; } }