Нужно сверстать 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 недель. Сильно можете не спешить.
