Тестовое задание на позицию Верстальщик

Результат выполнения задания нужно будет оформить здесь же, на гитхабе. Желательный срок выполнения 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 дней

Дополнительно напишите нам, как вы тестировали результат своей работы. Какие используете инструменты и как вы осуществляете тестирование.

fugr-ru/frontend-html-3

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Packages