Вариант ценовых пакетов на основе третьего варианта из раздела «Услуги» в предварительно подготовленных шаблонах!
Почасовой заказ
Даже всемогущая пунктуация не имеет власти
- даже всемогущая пунктуация не имеет власти
- над рыбными текстами, ведущими безорфографичный образ жизни.
- однажды одна маленькая строчка рыбного текста по имени Lorem ipsum
- решила выйти в большой мир грамматики
100$
Пакет
Даже всемогущая пунктуация не имеет власти
- даже всемогущая пунктуация не имеет власти
- над рыбными текстами, ведущими безорфографичный образ жизни.
- однажды одна маленькая строчка рыбного текста по имени Lorem ipsum
- решила выйти в большой мир грамматики
- великий Оксмокс предупреждал ее о злых запятых
300$
Целый день
Даже всемогущая пунктуация не имеет власти
- даже всемогущая пунктуация не имеет власти
- над рыбными текстами, ведущими безорфографичный образ жизни.
- однажды одна маленькая строчка рыбного текста по имени Lorem ipsum
- решила выйти в большой мир грамматики
- великий Оксмокс предупреждал ее о злых запятых
- диких знаках вопроса и коварных точках с запятой
500$
Как это сделано?
Добавляем HTML-блок на страницу. В него добавляем стили и немного JS:
<style>
#section-1447547 .row > div {
margin: 24px;
padding: 10px;
border: 1px solid #e7e6e6; /* цвет окантовки блока услуги */
border-radius:10px; /* радиус скругления углов */
background-color: #f4f4f4; /* цвет фона */
}
/*выделяем "важный", "модный" или "хитовый" вариант пакета (черным).
nth-child(2) - цифра 2 - это порядковый номер этого пакета. В данном примере второй (по центру) */
#section-1447547 .row > div:nth-child(2),
#section-1447547 .row > div:nth-child(2) h1,
#section-1447547 .row > div:nth-child(2) h2,
#section-1447547 .row > div:nth-child(2) h3 {
color: white; /* цвет текста в выделенном блоке */
}
#section-1447547 .row > div:nth-child(2) { /* тоже относится к выделенному черным пакету */
margin: 24px;
padding: 10px;
border: 1px solid #383838; /* цвет окантовки выделенного блока услуги */
border-radius:10px; /* радиус скругления углов выделенного блока */
background-color: #272727; /* цвет фона выделенного блока */
}
</style>
<script>
/* скрип по выравниванию высоты блоков с пакетом. Выравнивает только на десктопной версии и версии для планшетов, на мобильной - убираются лишние порбелы */
if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) === false ) {
var section = $("#section-1447547 .row > div");
var h=0;
$.each(section, function(){
if ($(this)[0].offsetHeight > h) { h = $(this)[0].offsetHeight; }
});
section.css('height',h);
}
</script>
Везде, где вы видите в примере #section-1447547 — это ID блока с пакетами. Выяснить свой номер можно кликнув по шестеренке в углу блока (см. скриншот).
Вариант 1
Выделение цветом только одного блока. Этот вариант рассмотрен выше.
Вариант 2а
Выделение цветом четных блоков: в стилях заменяем nth-child(2) на nth-child(even)
Вариант 2б
Выделение цветом НЕ четных блоков: в стилях заменяем nth-child(2) на nth-child(odd)
