https://evkarn.ru
вёрстка лендинга, интеграция в CMS MODX

Производство бань-бочек под ключ

Баня-бочка-тут.рф
Помещение бани с печкой и паром.

Заснята отработка всех элементов сайта - лендинга по продаже бань-бочек под ключ.

Дата загрузки: 2019-05-21 00:00:00 +0500

Постер для видео - изображена баня с печкой, пар вокруг, лавочка.

О клиенте:

Семён Кощеев — владелец нескольких бизнесов, в том числе и производства бань-бочек.

Задача:

Заказчиком поставлена задача — сверстать лендинг по готовому дизайн-макету в Adobe Xd и интегрировать вёрстку в CMS MODX. Также выполнить несложные анимации на интерактивных элементах, настроить отправку почты с форм и залить проект на его хостинг.

Инструменты:

  • ХТМЛ
  • ЦСС
  • Бутстрап
  • Джаваскрипт
  • Джейкуери
  • Гулп
  • Сасс
  • Модэкс

Процесс

Первая секция лендинга — изображение бани на заднем фоне, меню, логотип и торговое предложение для посетителей

Вёрстка по макету

Макет свёрстан с применением сетки bootstrap, из фреймворка подключалась только сетка, чтобы избежать избыточности кода. Вёрстка адекватно работает во всех браузерах, полностью адаптивная и валидная, с применением семантических тегов.

На лендинге не использовался формат изображений webp — это повлияло на производительность, но упростило работу по администрированию сайта. Решено было добавить современные форматы для картинок позже, если это понадобится.

Одна из секций лендинга - расположены карточки товара с разными типами бань-бочек, их стоимостью и кнопкой заказа

Интерактив

В процессе работы реализованы простые интерактивные элементы: формы заказа; постраничная навигация; кнопка возврата к верху страницы; кнопки; псевдо-калькулятор в виде формы для отправки данных, настроена отправка сообщений на почту клиента.

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

Анимация

На сайте сделаны лёгкие, приятные анимации — в основном срабатывающие по наведению на элементы — ссылки и кнопки.

Размытое изображение CMS MODX на сайте клиента

Интеграция в CMS MODX

Для интеграции в систему управления сайтом была выбрана CMS MODX — простая, удобная, не слишком требовательная к хостингу. Проведены все основные настройки, сделана базовая поисковая оптимизация.

Изображения панели управления хостингом клиента

Выгрузка на хостинг

После того как всё было настроено и протестировано на локальном сервере — произвёл выгрузку проекта на хостинг клиента.

Изображение размытых текстовых файлов с написанной инструкцией по управления сайтом

Разработка инструкции

Написал подробную поэтапную инструкцию по пользованию админ-панелью сайта, чтобы всегда была шпаргалка перед глазами и администратору было проще работать.

После чего полностью сдал проект заказчику.

Результат

Затрачено времени:

25 дней

Бюджет проекта:

Конфиденциально

Отзыв

Фотография клиента
Семен Кощеев, владелец компании

Отличная работа, сделана в полном объеме, по всем канонам и к обозначенному времени. Спасибо за сотрудничество!

Посмотреть отзыв на freelance.ru