Новые прайсы цен / Прайсы / Сниппеты Bootstrap

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

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

Bootstrap: 3, 4

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

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

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

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

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

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

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

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

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

Авторство: Посмотреть

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

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

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

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

Добавлено: 2017-04-28 в 13:53

Метка: 1493376784

⇄ ⇅

/* style timeline */
.detailed-top h4 {
 font-size: 2.5em;
 text-transform: capitalize;
 color: #fff;
}
.detailed-top {
 padding: 1.5em 0;
 background: #7277d5;
 border-bottom: 5px solid #E7663F;
}
.detailed-top:hover {
 background: #e7663f;
 border-bottom: 5px solid #7277d5;
}
.detailed-grid {
 transition: 0.5s all;
 -webkit-transition: 0.5s all;
 -moz-transition: 0.5s all;
 -o-transition: 0.5s all;
 -ms-transition: 0.5s all;
}
.detailed-grid:hover {
 transform: scale(1.05);
 -webkit-transform: scale(1.05);
 -moz-transform: scale(1.05);
 -o-transform: scale(1.05);
 -ms-transform: scale(1.05);
}
.detailed-bottom h5 {
 font-size: 2.5em;
 background: #fff;
 padding: .5em 0;
 font-weight: 600;
}
.detailed-bottom {
 background: #eee;
}
 .detailed-bottom ul{
 padding-left:0px;
 } 
.detailed-bottom ul li {
 color: #777;
 padding-top: .8em;
 font-size: .96em;
 line-height: 2em;
 padding: .5em 0;
 list-style: none;
 border-bottom: 1px solid #ddd;
}
.detailed-grids {
 margin-top: 3em;
}
.detailed-bottom span {
 font-size: .4em;
}
a.button1 {
 font-size: 1em;
 text-transform: uppercase;
 text-decoration: none;
 color: #fff;
 background: #e7663f;
 padding: 1em 2em;
 display: block;
 width: 100%;
}
a.button1:hover {
 background: #585CA7;
}
@media(max-width:1080px){
a.button {
 width: 33%;
}
.detailed-bottom h5 
 {
 font-size: 2em;
}
 }
@media(max-width:991px){
 a.button {
 width: 42%;
 font-size: .95em;
}
.detailed-bottom h5 {
 font-size: 1.8em;
}
 }
 @media(max-width:640px){
 .detailed-top h4{
 font-size: 2em;
}
.detailed-bottom h5{
 font-size: 1.8em;
}
 }
@media (max-width: 320px){
.detailed-top h4 {
 font-size: 1.6em;
}
.detailed-bottom h5 {
 font-size: 1.2em;
}
 }
 
 
</style>

<div class="detailed-grids text-center">
 <div class="col-md-3 detailed-grid">
 <div class="detailed-top">
 <h4>bronze</h4>
 </div>
 <div class="detailed-bottom">
 <h5>$ 15.99 <span>P/M</span></h5>
 <ul>
 <li>40 GB Space</li>
 <li>120 GB Traffic</li>
 <li>100 Mailboxes</li>
 <li>1 Year Free Hosting</li>
 <li>PHP, Perl/CGI, MySQ</li>
 </ul>
 <a href="#" class="button1">shop now</a>
 </div>
 </div>
 <div class="col-md-3 detailed-grid">
 <div class="detailed-top">
 <h4>Silver</h4>
 </div>
 <div class="detailed-bottom">
 <h5>$ 25.99 <span>P/M</span></h5>
 <ul>
 <li>40 GB Space</li>
 <li>120 GB Traffic</li>
 <li>100 Mailboxes</li>
 <li>1 Year Free Hosting</li>
 <li>PHP, Perl/CGI, MySQ</li>
 </ul>
 <a href="#" class="button1">shop now</a>
 </div>
 </div>
 <div class="col-md-3 detailed-grid">
 <div class="detailed-top">
 <h4>Gold</h4>
 </div>
 <div class="detailed-bottom">
 <h5>$ 35.99 <span>P/M</span></h5>
 <ul>
 <li>40 GB Space</li>
 <li>120 GB Traffic</li>
 <li>100 Mailboxes</li>
 <li>1 Year Free Hosting</li>
 <li>PHP, Perl/CGI, MySQ</li>
 </ul>
 <a href="#" class="button1">shop now</a>
 </div>
 </div>
 <div class="col-md-3 detailed-grid">
 <div class="detailed-top">
 <h4>Platinum</h4>
 </div>
 <div class="detailed-bottom">
 <h5>$ 45.99 <span>P/M</span></h5>
 <ul>
 <li>40 GB Space</li>
 <li>120 GB Traffic</li>
 <li>100 Mailboxes</li>
 <li>1 Year Free Hosting</li>
 <li>PHP, Perl/CGI, MySQ</li>
 </ul>
 <a href="#" class="button1">shop now</a>
 </div>
 </div>
 <div class="clearfix"></div>
 </div>

</div>
</div>

BootstrapTema

Новые прайсы цен

Скриншот

Подробнее

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

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

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