Лендинг Гадание на картах Таро

лендинг, веб разработка, javascript, сайт под ключ, сайт-визитка, modx

Перейти на сайт

Дизайн, верстка и интеграция с cms MODx сайта-визитки таролога (сайт под ключ, май 2021)

 О проекте

Персональный сайт таролога daria-bloom. Предсказание-гадание на картах Таро: по фото и дате рождения вы получите подробное предсказание на старинных картах дистанционно по всему миру.

 Задача проекта

  1. Разработать чистый дизайн сайта-визитки с белым фоном и простыми графическими элементами.
  2. Сверстать landing page.
  3. Интегрировать с движком MODx.
  4. Разместить сайт на хостинге и опубликовать в интернете.

 Разработка дизайна лендинга

Референсы для дизайна: тематические изображения с картами таро.

Лендинг карты таро

 Что было сделано

  1. Дизайн: создание в Photoshop, отрисовка графики, фонов и фавиконки.
  2. Верстка осуществлялась с использованием шаблонизаторов Pug и SASS. Сборка проекта выполнялась с помощью бандлера Webpack. Реализованы: прелоадер, мобильное меню, разные изображения для разных экранов (<picture>), слайдер, аккордеон, галерея, модальные окна.
  3. Интеграция с cms MODx. Использование MIGX для блоков FAQ, Отзывы и Фотогалерея.

Секции лендинга

  • Интро: краткое описание услуги.
  • Обо мне: текст и сертификат.
  • Услуга: подробное описание услуги.
  • Отзывы: карусель.
  • FAQ: аккордеон с input type radio.
  • Карта дня: вывод рандомной карты таро при нажатии на кнопку Выбрать карту с возможностью сделать это только 1 раз в день (localStorage).
  • Галерея изображений.
  • Контакты с формой обратной связи (PHP + JavaScript).

Выполненные работы по разработке лендинга

  1. Разработан макет страницы (Photoshop).
  2. Отрисованы: логотип в векторном формате (CorelDraw, SVG), gif-прелоадер, фоны и favicon (Photoshop).
  3. Отредактированы тексты (подзаголовки, абзацы, списки).
  4. Осуществлена адаптивная верстка посадочной страницы: Pug, Scss, pure JavaScript (Atom).

 На сайте реализовано

  • прелоадер;
  • анимации (JavaScript + Css) элементов при скролле;
  • слайдеры, аккордеон, фото галерея, поп-ап окна (согласие пользователя), php форма обратной связи;
  • ховер-эффекты для логотипа и иконок;
  • генератор карты дня;
  • блок Поделиться в соцсетях;
  • адаптивность.

 Верстка сайта

Использованные JS библиотеки

  • Слайдер Splide для отзывов.
  • Lightgallery для фотогалереи.

Интересные блоки на сайте

JavaScript виджет Генератор карты дня (секция Карта дня - Ваше предсказание на сегодня):

После клика на кнопку Выбрать карту происходит анимация загрузки и появляется рандомная карта с флип-эффектом и описание этой карты. Если посетитель перезагрузит страницу и снова нажмет на эту кнопку, то появится надпись: Сегодня вы уже выбрали свою карту.

Посмотреть виджет в действии на сайте daria-bloom.

JavaScript виджет Генератор карты дня таро

Виджет опроса (JavaScript, PHP, Json) Скрипт опроса на сайте. Такой блок с голосованием добавляет интерактивности на сайте.

Скриншоты и видео

Разработка лендинга под ключ

Как вам понравился сайт таролога? Хотели бы такой лендинг для своего бизнеса? Просто сообщите о своем желании, я с радостью помогу осуществить это! Напишите мне на make.website.info@gmail.com:

Написать

Оставьте свой комментарий!


Разрешённые теги: <b><i><br>


Комментарии (0)

 

Давайте общаться

Я хотел бы поговорить о вашем бизнесе, отправьте мне письмо на make.website.info@gmail.com.