Дата и время публикации : 11 Ноября 17 в 08:33 | Раздел : Скрипты и украшения
| Параметр | Значение |
|---|---|
| Дата публик. | 11 Ноября 17, Суббота, 08:33 |
| Адапт. дизайн | |
| Обновления | Не производились |
| Просмотрен | 537 |
Простенькая но красивая таблица цен для страницы с вашим прайс-листом. Вкладки являются адаптивными и выравниваются с помощью Boostrap, поэтому этот плагин должен присутствовать на вашем сайта, без него таблички будут отображаться не правильно.
Больше тут сказать нечего. Ставим, радуемся.
Установка :
1. Вставляем в CSS своего сайта :
2. В место где нужно отображать вкладки :
<div class="col-xs-12 col-sm-6 col-md-3"><!-- 1 ТАБЛИЦА -->
<ul class="pricing p-green">
<li>
<big>Start</big>
</li>
<li>Responsive Design</li>
<li>Color Customization</li>
<li>HTML5 & CSS3</li>
<li>Styled elements</li>
<li>
<h3>$199</h3>
<span>per month</span>
</li>
<li>
<button>Join Now</button>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3"><!-- 2 ТАБЛИЦА -->
<ul class="pricing p-yel">
<li>
<big>Good</big>
</li>
<li>Responsive Design</li>
<li>Color Customization</li>
<li>HTML5 & CSS3</li>
<li>Styled elements</li>
<li>
<h3>$299</h3>
<span>per month</span>
</li>
<li>
<button>Join Now</button>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3"><!-- 3 ТАБЛИЦА -->
<ul class="pricing p-red">
<li>
<big>Ultima</big>
</li>
<li>Responsive Design</li>
<li>Color Customization</li>
<li>HTML5 & CSS3</li>
<li>Styled elements</li>
<li>
<h3>$399</h3>
<span>per month</span>
</li>
<li>
<button>Join Now</button>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3"><!-- 4 ТАБЛИЦА -->
<ul class="pricing p-blue">
<li>
<big>Vip</big>
</li>
<li>Responsive Design</li>
<li>Color Customization</li>
<li>HTML5 & CSS3</li>
<li>Styled elements</li>
<li>
<h3>$799</h3>
<span>per month</span>
</li>
<li>
<button>Join Now</button>
</li>
</ul>
</div>
Подходит для любого сайта вне зависимости от движка и конструктора.
На этом все.
Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.
Вход РегистрацияНовые свойства CSS3 позволяют делать очень много всего интересного. Сегодня мы рассмотрим пример, в котором создадим 7 разных эффектов при наведени...
