Вариант ценовых пакетов на основе третьего варианта из раздела «Услуги» в предварительно подготовленных шаблонах!
Почасовой заказ
Даже всемогущая пунктуация не имеет власти
- даже всемогущая пунктуация не имеет власти
- над рыбными текстами, ведущими безорфографичный образ жизни.
- однажды одна маленькая строчка рыбного текста по имени 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>
Везде, где вы видите в примере #section-1447547 — это ID блока с пакетами. Выяснить свой номер можно кликнув по шестеренке в углу блока (см. скриншот).
Вариант 1
Выделение цветом только одного блока. Этот вариант рассмотрен выше.
Вариант 2а
Выделение цветом четных блоков: в стилях заменяем nth-child(2) на nth-child(even)
Вариант 2б
Выделение цветом НЕ четных блоков: в стилях заменяем nth-child(2) на nth-child(odd)