Сверстать 1 страницу, заготовку ко второй и посадить на вордпресс

Нужно сверстать 2 простеньких страницы сайта, посадив их на вордпресс: главную и ещё одну шаблонную – под будущие статьи. Если хорошо справитесь, можете получить от меня ещё задания в скором времени.

Делаем аналог: https://sesuslugi.ru/

✔ Верхняя синяя полоса: убираем выбор города вообще, голубые пункты меню меню, в результате, смеющаются влево. В них убираем статьи и сертификаты, вместо этого ставим пункт "Гарантия".

Всё остальное в этом блоке оставляем, как есть, только вместо телефона забиваем рандомные любые цифры (оставив 812).

✔ Вторая полоса с логотипом и меню: вместо для лого вставляем такую же картинку, только пишем АНТИВРЕДИТЕЛЬ (анти красным, а не розовым). Текст чуть помельче, чтоб по ширине было максимум на 1 букву больше чем как на этом сайте. Скос для активных элементов и эффекта наведения не нужен, делаем обычный прямоугольник, и italic для текста ссылок тоже не нужен. Капс сохраняем. Пункты меню такие: Уничтожение насекомых, Уничтожение грызунов, Дезинфекция Дезодорация (это один пункт), Отзывы, Цены. У пунктов должна быть центровка по вертикали. Первые три пункта пишем с переносом (одно слово вверху, другое – внизу). И у каждого пункта, кроме цен и отзывов, должна слева быть иконка (берём однотонную контурную из интернета любую, синего цвета как на сайте, под насекомых - таракана, грызуны - крыса, дезинфекция - круглешки, типа вирус).

Вместо нижней синей полосы делаем ощутимую тень.

Подпункты следующие:

Уничтожение клопов

Уничтожение тараканов

Уничтожение блох

Уничтожение муравьёв

Уничтожение клещей

Уничтожение ос

Уничтожение мух

Уничтожение комаров

Уничтожение крыс

Уничтожение мышей

Дезинфекция помещений от вирусов и бактерий

Удаление плесени

Дезинфекция после покойника

Дезодорация помещений и авто

На все страницы в меню сразу вешаем пустые страницы в админке с соответствующим названием.

Анимацию выпадения такой красивой можно не делать, обычный SlideDown или FadeIn.

Шапка должна быть аналогично плавающей, перестраивающейся, у меня, если что, есть уже готовый скрипт для этого и, как минимум, часть стилей, могу предоставить.

✔ Слайдер: тот же функционал, только вместо полосок навигации внизу делаем обычные серые точки (у активное не серый, а синий цвет).

1 слайд: УНИЧТОЖЕНИЕ НАСЕКОМЫХ И ГРЫЗУНОВ С ГАРАНТИЕЙ

Гарантия – 2 года (2 года делаем жирным). Мы заключаем договор с печатью (делаем жирным). У более 50% наших клиентов все насекомые погибают сразу после первой обработки. Если часть насекомых остались, мы проводим повторную обработку по себестоимости (по себестоимости делаем жирным) – вы оплачиваете лишь химию и транспортные расходы мастера, т.е. лишь 20-30% от изначальной стоимости.

Кнопка "Подробнее о договоре и повторных обработках".

2 слайд: СКИДКА 10% ПЕНСИОНЕРАМ И СТУДЕНТАМ

Мы идём навстречу малоимущим гражданам и предоставляем гибкие тарифы. Чем крупнее заказ, тем больше скидка. Если вы – пенсионер или студент, предоставьте пенсионное или студенческое удостоверение при визите мастера.

Кнопка "Связаться"

3 слайд: РАБОТАЕМ В САНКТ-ПЕТЕРБУРГЕ 8 ЛЕТ

Регулярно обслуживаем 178 предприятий в Санкт-Петербурге и Ленинградской области: общепиты, склады, подвалы и пр. Заключаем договора с физическими и юридическими лицами. Имеем сертификаты и множественные благодарственные письма.

Кнопка "Связаться"

4 слайд: ИСПОЛЬЗУЕМ ПРОФЕССИОНАЛЬНОЕ ОБОРУДОВАНИЕ И СРЕДСТВА

Мы используем не водяные помпы и опрыскиватели, а генераторы холодного тумана западного образца. Перед обработкой запрашиваем у клиентов, какие средства для травли вредителей уже использовались, чтобы подобрать средство для их уничтожения с одной обработки. Используем синергисты для подавления иммунитета паразитов – к нашей химии защита у них выработаться не сможет.

Кнопка "Связаться"

5 слайд: ПРОФЕССИОНАЛЬНАЯ ДЕЗИНФЕКЦИЯ ЛЮБЫХ ОБЪЕКТОВ

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

Кнопка "Связаться"

Фоны для слайдера берём любой другой из интернета. Т.е. один и тот же фон на каждый слайд более-менее подходящий по смыслу с затенением.

✔ Блок с текстом на белом фоне и картинкой не делаем, вместо неё делаем блок Наши Услуги: белый фон, синий заголовок, весь текст синий. Дальше, абсолютно аналогично, делаем блооки с видами услуг. Нужны иконки в любом каком-то одном стиле. Пунктирное подчёркивание не нужно. Услуги следующие:

Уничтожение клопов

Уничтожение тараканов

Уничтожение крыс

Удаление плесени

Дезинфекция 

Уничтожение сорняков (ссылка на пустую страницу с названием "Уничтожение борщевика и сорняков".

Кнопка "ВСЕ ВИДЫ УСЛУГ": Лучше просто синий залитый прямоугольник без скруглений, текст жирным. Ссылка на пустую страницу в вордпрессе с названием "Все услуги СЭС", я её сам заполню.

✔ Узенький блок преимуществ. Делаем такой же, только находим другие иконки и фоновую картинку.

✔ Отзывы, только не на синем, а не белом фоне. Подбираем какую-нибудь аналогичную светло-серенькую текстурку с людьми или чем-то подобным (люди должны быть серыми, а фон белый), лишь бы смотрелось солидно. Как вариант, можно вообще согласовать со мной какую-нибудь нейтральную узорчатую текстуру вместо людей, если что.

Элементы абсолютно аналогичные, только слева от ФИО и названия организации добавить любую круглую фотку лица человека с синей рамочкой 2-3 пикселя. Вместо благодарственных писем вставьте любые другие благодарственные письма из интернета, но не по СЭС услугам, а любым другим. Текст забиваем любой, только не с этого сайта. ФИО делаем любые другие, названия организаций тоже придумайте любые другие. Стрелочки поменять на какие-нибудь другие и сделать их по бокам в круглешках.

Кнопка "все отзывы" синим заполненным прямоугольником капсом с жирностью. Ссылка на пустую страницу в админке с названием "Все отзывы"

✔ Блок нам доверяют делаем тот же, только заголовок "Наши Клиенты". Логотипы берём любых других компаний из Интернета и подписываем соответствующе.

✔ Заказать звонок делаем аналогично, но не параллелограммом, а овальчиком.  Но у овала должны быть скругления около 30-40 пикселей.

✔ Футер делаем с таким же фоном, но с лёгонькой текстуркой. Для поиска текстур, если что, можете пользоваться SubtlePattern или др. сервисом.

Вёрстка и наполнение абсолютно то же, со следующими корректировками:

2020 вместо 2019 года. Вместо СЭСУСЛУГИ - АНТИВРЕДИТЕЛЬ.

Адрес пишем другой: 191245, г. Санкт-Петербург, пр. Вернадского, д. 10, офис 102

Телефон пишем любой другой (как в шапке написали, такой и ставьте).

Имейл другой: info собака анти-вредитель.рф (собаку пишем спецсимволом)

Навигация: Главная, Услуги (подкрутка к блоку Услуг главной страницы), Отзывы (ссылка на страницу "Все отзывы"), Контакты.

Вместо "Социальные сети" – "Связь". Ставим телеграмм, вотсап (узнайте как они ставятся на сайт, это очень просто, телефон скину в личку). Расположение элементов вёрстки такое же. Если не получится сделать так же с телеграмом, уведомить меня, что-нибудь придумаем. Делаем также Viber и ВК. Вместо розового фона для ВК можно сделать белый, а саму иконку vk белым. Вместо надписи ваш ВК ставим "Страница ВК".

Текст нижней полосы футера: Услуги СЭС по дезинфекции, дезинсекции и дератизации по Санкт-Петербургу и Ленинградской области (первые два слова жирным).

Нужен функционал заказа звонка для всего сайта (сделать в том числе плавалку, как на этом сайте, только поместить её справа, и сделать чтоб анимация была чуть другая, на ваше усмотрение). Сам попап по функционалу тот же. Внешний вид сделайте отличающийся, на своё усмотрение. У галочки другая подпись: "Согласен(-на) на передачу и обработку персональных данных *" (звёздочку красным).

На какой имейл слать заявки скажу в личку.

НА ЭТОМ ОПИСАНИЕ ГЛАВНОЙ СТРАНИЦЫ И ЛЭЙАУТА ЗАКАНЧИВАЕТСЯ, ИДЁТ ОПИСАНИЕ ТЕКСТОВОЙ СТРАНИЦЫ ПОД УСЛУГУ:

СТРАНИЦА УСЛУГИ: 

Breadcrums аналогичный, категорию услуг меняет на, соответственно, дезинсекцию, дезинфекцию и дератизацию. Фон любой подобный сами подберите.

Для примера сделайте страницу по теме уничтожения тараканов с любым текстом-рыбом большой длины. Картинку меняем на любую другую с тараканов из интернета.

Навигация такая же, только буллеты делаем квадратными, акции не нужны, только скидка такая же к ценам.

Кнопку "О мошенниках" переносим под навигацию и пишем "Остерегайтесь мошенников". Иконку похожую, но чуть другую подберите. Ссылка на пустую страницу с названием "Остерегайтесь мошенников".

Рамочку светло-серую у текста делать не нужно, отступ убираем.

Таблицы цен:

То же самое, только не нужна вторая обводка с отступом. Не нужны переключалки. Вместо этого делаем под первой таблицей ещё одну таблицу для юр лиц. В заголовки H2 добавляем соответственно в конце "для физ. лиц" и "юр. лиц" соответственно.

Красную подпись делаем только перед первой таблицей, добавляем туда инфу также и про студентов, не деля на 2 предложения (как в слайдере сделайте текст примерно).

Точное наполнение таблиц предоставлю в процессе работы.

Вставить в текст аналогичный красненький блочок "Совет!". Функционал поделиться и добавиться отзыв не нужны.

Плавающий блок "Заказать звонок" делаем абсолютно таким же, только фон делаем синим. Сделать возможной вставку других виджетов в правый блок.

Делаем мобильную версию всему сайту, аналогичную сайту-примеру.

ВАЖНО: сделайте везде синий цвет на сайте чуть отличающимся от оригинала, на своё усмотрение. В начале работы лучше сразу его согласуйте со мной, посмотрим вместе.

Технические моменты:

Вордпресс берём последней версии.

Под главную и под основную страницу делаем, соответственно, разный шаблон в папке темы  в вордпрессе.

Не используем бутстрап. Скрипты все минифицированные перед закрывающим боди.

Вместо float и inline-block используем flex или grid.

Приветствуется использование БЭМ-подхода к вёрстке.

Для иконок используем svg-спрайты любого вида.

Всегда на связи и всегда иду навстречу. Помогу, подскажу, не привередливый, постарался максимально подробно и точно изложить всё в ТЗ, чтобы вы не тратили лишнее время. Срок на главную – 7 дней. Общий срок проекта до 2 недель. Сильно можете не спешить.