CSS прайсы - 1618076190683 / Прайсы / Сниппеты Bootstrap

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Прайсы

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify

Язык: Английский

Вес файла: 1.5 Kb

Уникальный ID: 4493

Количество символов:

Посмотрели: 1010 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-4493-20

Скачали бесплатно: 37 раз

Прокомментировали: 0 раз

Рейтинг: 4.4 / 5 - 5 голосов

Тип лицензии: CC BY 4.0

Авторство: https://bestjquery.com/tutorial/pricing-table/demo87/

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, Bootstrap, Pricing, сниппет, прайсы, Price

Поделился: BootstrapТема

Добавлено: 2021-04-10 в 20:41

Метка: 1618076471

⇄ ⇅

.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 a{ text-decoration: 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; }
}
</style>

<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 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">PREMIUM</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">30</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>70GB Disk Space</li>
 <li>70 Email Accounts</li>
 <li>70GB Bandwidth</li>
 <li>20 Subdomains</li>
 <li>25 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>

BootstrapTema

CSS прайсы - 1618076190683

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0