Модификация пакетов услуг

20 ноября 2020

Модификация блока с ценами на пакеты услуг с помощью CSS/JS:
— выравнивание высоты блоков с пакетами услуг в версии для десктопа и планшета;
— блок с пакетом выделен фоном и имеет окантовку с закруглёнными углами (чтобы не сливались в мобильной версии)
— есть возможность выделения цветом «хитового/рекомендованного» пакета услуг (вариант 1);
— Есть возможность выделени чётных/не чётных пакетов цветом (вариант 2)

Вариант ценовых пакетов на основе третьего варианта из раздела «Услуги» в предварительно подготовленных шаблонах!

Почасовой заказ

Даже всемогущая пунктуация не имеет власти

даже всемогущая пунктуация не имеет власти
над рыбными текстами, ведущими безорфографичный образ жизни.
однажды одна маленькая строчка рыбного текста по имени Lorem ipsum
решила выйти в большой мир грамматики

100$

Пакет

Даже всемогущая пунктуация не имеет власти

даже всемогущая пунктуация не имеет власти
над рыбными текстами, ведущими безорфографичный образ жизни.
однажды одна маленькая строчка рыбного текста по имени Lorem ipsum
решила выйти в большой мир грамматики
великий Оксмокс предупреждал ее о злых запятых

300$

Целый день

Даже всемогущая пунктуация не имеет власти

даже всемогущая пунктуация не имеет власти
над рыбными текстами, ведущими безорфографичный образ жизни.
однажды одна маленькая строчка рыбного текста по имени Lorem ipsum
решила выйти в большой мир грамматики
великий Оксмокс предупреждал ее о злых запятых
диких знаках вопроса и коварных точках с запятой

500$

Как это сделано?

Добавляем HTML-блок на страницу. В него добавляем стили и немного JS:

<style>
#section-1447547 .row > div { /* заменить section на свою! */
   margin: 1%;
   padding: 10px;
   border: 1px solid #e7e6e6; /* цвет окантовки блока услуги */
   border-radius:10px;        /* радиус скругления углов */
   background-color: #f4f4f4; /* цвет фона */
}

/*выделяем "важный", "модный" или "хитовый" вариант пакета (черным).
  nth-child(2) - цифра 2 - это порядковый номер этого пакета. В данном примере второй (по центру) */
/* заменить section на свою! */
#section-1447547 .row > div:nth-child(2) section,
#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) { /* тоже относится к выделенному черным пакету, заменить section на свою! */
   margin: 1%;
   padding: 10px;
   border: 1px solid #383838; /* цвет окантовки выделенного блока услуги */
   border-radius:10px;        /* радиус скругления углов выделенного блока */
   background-color: #272727; /* цвет фона выделенного блока */
}
@media (min-width: 769px) {
  #section-1447547 .row .col-md-4 { /* заменить section на свою! */
    width: 31.3333333333% !important;
  }
}
</style>

<script>

/* скрип по выравниванию высоты блоков с пакетом. Выравнивает только на десктопной версии и версии для планшетов, на мобильной - убираются лишние пробелы */

if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) === false ) {
   var section = $("#section-1447547 .row > div"); /* заменить section на свою! */
   var h=0;
   $.each(section, function(){
      if ($(this)[0].offsetHeight > h) { h = $(this)[0].offsetHeight; }
   });
   section.css('min-height',h);
}
</script>