Лендинг Гадание на картах Таро
лендинг, веб разработка, javascript, сайт под ключ, сайт-визитка, modx
Дизайн, верстка и интеграция с cms MODx сайта-визитки таролога (сайт под ключ, май 2021)
О проекте
Персональный сайт таролога daria-bloom. Предсказание-гадание на картах Таро: по фото и дате рождения вы получите подробное предсказание на старинных картах дистанционно по всему миру.
Задача проекта
- Разработать чистый дизайн сайта-визитки с белым фоном и простыми графическими элементами.
- Сверстать landing page.
- Интегрировать с движком MODx.
- Разместить сайт на хостинге и опубликовать в интернете.
Разработка дизайна лендинга
Референсы для дизайна: тематические изображения с картами таро.
Что было сделано
- Дизайн: создание в Photoshop, отрисовка графики, фонов и фавиконки.
- Верстка осуществлялась с использованием шаблонизаторов Pug и SASS. Сборка проекта выполнялась с помощью бандлера Webpack. Реализованы: прелоадер, мобильное меню, разные изображения для разных экранов (<picture>), слайдер, аккордеон, галерея, модальные окна.
- Интеграция с cms MODx. Использование MIGX для блоков FAQ, Отзывы и Фотогалерея.
Секции лендинга
- Интро: краткое описание услуги.
- Обо мне: текст и сертификат.
- Услуга: подробное описание услуги.
- Отзывы: карусель.
- FAQ: аккордеон с input type radio.
- Карта дня: вывод рандомной карты таро при нажатии на кнопку Выбрать карту с возможностью сделать это только 1 раз в день (localStorage).
- Галерея изображений.
- Контакты с формой обратной связи (PHP + JavaScript).
Выполненные работы по разработке лендинга
- Разработан макет страницы (Photoshop).
- Отрисованы: логотип в векторном формате (CorelDraw, SVG), gif-прелоадер, фоны и favicon (Photoshop).
- Отредактированы тексты (подзаголовки, абзацы, списки).
- Осуществлена адаптивная верстка посадочной страницы: Pug, Scss, pure JavaScript (Atom).
На сайте реализовано
- прелоадер;
- анимации (JavaScript + Css) элементов при скролле;
- слайдеры, аккордеон, фото галерея, поп-ап окна (согласие пользователя), php форма обратной связи;
- ховер-эффекты для логотипа и иконок;
- генератор карты дня;
- блок Поделиться в соцсетях;
- адаптивность.
Верстка сайта
Использованные JS библиотеки
- Слайдер Splide для отзывов.
- Lightgallery для фотогалереи.
Интересные блоки на сайте
JavaScript виджет Генератор карты дня (секция Карта дня - Ваше предсказание на сегодня):
После клика на кнопку Выбрать карту происходит анимация загрузки и появляется рандомная карта с флип-эффектом и описание этой карты. Если посетитель перезагрузит страницу и снова нажмет на эту кнопку, то появится надпись: Сегодня вы уже выбрали свою карту.
Посмотреть виджет в действии на сайте daria-bloom.
Виджет опроса (JavaScript, PHP, Json) Скрипт опроса на сайте. Такой блок с голосованием добавляет интерактивности на сайте.
Скриншоты и видео
Как вам понравился сайт таролога? Хотели бы такой лендинг для своего бизнеса? Просто сообщите о своем желании, я с радостью помогу осуществить это! Напишите мне на make.website.info@gmail.com:
Давайте общаться
Я хотел бы поговорить о вашем бизнесе, отправьте мне письмо на make.website.info@gmail.com.
Оставьте свой комментарий!
Комментарии (0)