NADVooDoo / lifetour

Single-page html css js website project

Личный проект «LIFETOUR»

Проект выполнен во время прохождения этапа акселерации в HTML Academy на «Профессии фронтенд-разработчик» в команде с менеджером и тестировщиками.

• Студент: Николай Дидур.

---

Общие технические требования

1. Стандарты вёрстки: HTML5, CSS3, прогрессивное улучшение.

2. Адаптивность сетки: мобильная, планшетная и десктопная версии. Desktop First. На всех промежуточных разрешениях используется резиновая вёрстка.

3. Используемая методология: БЭМ.

4. Используемые фреймворки: нет.

5. Используемый препроцессор: Sass (SCSS).

6. Используемый инструмент автоматизации: Gulp.

   Для корректной работы сборки необходимо использовать версию Node.js 16.

7. Кроссбраузерность: Chrome, Firefox, Safari.

8. Графика не предоставляется и её необходимо вырезать самостоятельно.

9. Нестандартные шрифты подключены локально. Скачать можно с Google Fonts.

10. JavaScript: минимальная реализация, модальные окна, переключения и так далее.

11. Папка build должна попадать в репозиторий и находится в основной ветке проекта — это необходимо для проведения оперативного тестирования. При тестировании происходит автоматическая подгрузка репозитория из главной ветки.

Верстка должна соответствовать Критериям качества:

Акселератор: Критерии Фронтенд-разработчик

Верстка проекта выполняется согласно базовому техническому заданию:

Базовое Техническое задание к проектам Акселератора

Перед сдачей проекта обязательно проверить проект на соответствие критериям и провести самостоятельное тестирование.

Требования заказчика

1. Брейкопойнты :

   • мобильная версия — 320px - 767px
   • планшетная версия — 768px - 1199px
   • десктопная версия — от 1200 px и выше

2. Шапка

   • Элементы меню являются якорными ссылками.
   • Телефон — это кликабельная ссылка. При клике на номер телефона появляется возможность совершить звонок.
   • Клик на логотип ведёт на Главную страницу.

3. Hero Section

   • Это слайдер. Не прокручивается самостоятельно. Управление только через кнопки управления и по свайпу на мобильных устройствах. Зацикленный, но не листается автоматически, только кликами по кнопкам. При прокручивании активная точка пагинации смещается вправо. Листается со скоростью 300ms.
   • Основные требования к слайдеру прописаны в базовом техническом задании.
   • Кнопка Смотреть тур ведёт на несуществующую страницу. В адресе ссылки кнопки можно поставить #.
   • Видео по умолчанию не проигрывается. Для старта нужно кликнуть на кнопку play.
   • Обложку видео и кнопку play необходимо стилизовать в соответствии с макетом.
   • При клике на play запускается видео.
   • Аудио по умолчанию не проигрывается. Для старта нужно кликнуть на кнопку play.
   • Для плеера достаточно реализовать идентичный по размеру фрейма блок.
   • При клике на play запускается первый выпуск подкаста.

4. Блок Ближайшие туры

   • Слайдер. Не прокручивается самостоятельно. Управление слайдера только через кнопки управления и по свайпу на мобильных устройствах. Основные требования к слайдеру прописаны в базовом техническом задании.
   • Слайдер прокручивается до последнего слайда.
   • Клик по ссылке показать все туры ведёт на несуществующую страницу. В адресе ссылки кнопки можно поставить #.
   • Карточки можно переиспользовать для реализации десктопной версии для хотя бы одного пролистывания слайдера.

5. Блок Обучение

   • Слайдер. Не прокручивается самостоятельно. Управление только через кнопки управления и по свайпу на мобильных устройствах. Основные требования к слайдеру прописаны в Базовом техническом задании.
   • Слайдер прокручивается до последнего слайда.
   • Иконка соцсети инструктора кликабельна. Ведёт на несуществующую страницу. В адресе ссылки кнопки можно поставить #.
   • Карточки можно переиспользовать для реализации десктопной версии для хотя бы одного пролистывания слайдера.

6. Блок Отзывы и Фотогалерея

   • Слайдер. Не прокручивается самостоятельно. Управление только через кнопки управления и по свайпу на мобильных устройствах. Основные требования к слайдеру прописаны в базовом техническом задании.
   • Слайдер прокручивается до последнего слайда.

7. Блок Преимущества

   • Это зацикленный слайдер. Управление слайдера только через кнопки управления и по свайпу на мобильных устройствах. Основные требования к слайдеру прописаны в базовом техническом задании.

8. Форма обратной связи

   • Контент полей формы должен проходить валидацию.
   • Поля формы должны очищаться после её отправки.
   • Отправка формы возможна только после заполнения всех полей.

9. Блок Контакты

   • Телефон и почта — это кликабельные ссылки. При клике на номер телефона появляется возможность совершить звонок, при клике на почту — открывается почта с возможностью написать письмо.
   • Карта не скроллится. Увеличивается и уменьшается через элементы управления самой подключаемой карты. Маркер установлен на адресе. Карта подключается с помощью библиотеки Leaflet.

10. Футер

    • Элементы меню являются якорными ссылками.
    • Иконки соцсетей ведут на соцсети компании. В адресе ссылки можно поставить #.
    • Телефон — это кликабельная ссылка. При клике на номер телефона появляется возможность совершить звонок.
    • Клик на логотип ведёт на Главную страницу.

11. Загрузить проект на GitHub Pages перед тестированием