Результат выполнения задания нужно будет оформить здесь же, на гитхабе. Желательный срок выполнения 5 дней с момента получения задания. В качестве ответа не нужно присылать никаких ZIP-архивов и наборов файлов. Все ваши ответы должны быть оформлены на https://github.com/.
Вы присылаете только ссылку на ваш репозиторий на почту shevlyakov.n@future-group.ru. Если у вас еще нет аккаунта, то это хороший повод его завести.
Ссылка на макеты в Figma: https://www.figma.com/file/fMyOAiBkWJ4LtAacwdmIyB/testTask?node-id=0%3A1 Чтобы просматривать CSS стили блоков и работать с макетом - залогиньтесь.
Что нужно сделать:
- Сверстать страницу по макету в Figma. Верстка должна быть кроссбраузерной и валидной, страница должна корректно отображаться во всех браузерах последней версии. (IE11 тоже).
- Выполнить адаптив, страница должна хорошо смотреться на всех основных разрешениях.
- Реализовать и сверстать модальные окна, без использования сторонних библиотек. Форма в модальном окне не должна быть доступна к отправке, если обязательные поля пустые и не нажат чекбокс. В инпутах для данных карты возможно вводить только числа, ограниченное количество соответственно.
- По нажатию на блок с видео, картинка и кнопка должны пропадать и на этом месте должен запускаться плеер YouTube скриншот
- Реализовать блоки “показать еще”, “показать все фото”. По нажатию на кнопке, контент должен раскрываться. Также реализуйте отображение реального количества отзывов на странице, рядом с кнопкой “Показать все”.
- Вставить Яндекс Карту в блок с картой, с установленной меткой. По нажатию на метку открывается простенький балун с текстом.
- Там где на мобильном макете появляется слайдер, его можно реализовать по желанию, но скролл фотографий должен быть.
Требования:
HTML: Используйте шаблонизатор HTML кода pug (очень желательно). Можете так же использовать Bootstrap или просто сетки.
CSS: Использование Pre/Post процессоров (SCSS/SASS, Stylus, LESS, PostCSS). Мы работаем со Stylus. Используйте методологию БЭМ. JS: Желательно использовать современный синтаксис языка JS, предпочтительней jQuery. Сборка: Для сборки проекта используйте любой известный Вам сборщик проектов (WebPack и т.д).
Заданию уделите от 5 до 25 рабочих часов, что успеете высылайте на почту. Срок 5 дней
Дополнительно напишите нам, как вы тестировали результат своей работы. Какие используете инструменты и как вы осуществляете тестирование.