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

лендинг, веб разработка, 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, PHP, Json) Скрипт опроса на сайте. Такой блок с голосованием добавляет интерактивности на сайте.

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

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

Написать