Skip to content

fugr-ru/frontend-html-3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 

Repository files navigation

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

Результат выполнения задания нужно будет оформить здесь же, на гитхабе. Желательный срок выполнения 5 дней с момента получения задания. В качестве ответа не нужно присылать никаких ZIP-архивов и наборов файлов. Все ваши ответы должны быть оформлены на https://github.com/.

Вы присылаете только ссылку на ваш репозиторий на почту shevlyakov.n@future-group.ru. Если у вас еще нет аккаунта, то это хороший повод его завести.

Задание

Ссылка на макеты в Figma: https://www.figma.com/file/fMyOAiBkWJ4LtAacwdmIyB/testTask?node-id=0%3A1 Чтобы просматривать CSS стили блоков и работать с макетом - залогиньтесь.

Что нужно сделать:

  1. Сверстать страницу по макету в Figma. Верстка должна быть кроссбраузерной и валидной, страница должна корректно отображаться во всех браузерах последней версии. (IE11 тоже).
  2. Выполнить адаптив, страница должна хорошо смотреться на всех основных разрешениях.
  3. Реализовать и сверстать модальные окна, без использования сторонних библиотек. Форма в модальном окне не должна быть доступна к отправке, если обязательные поля пустые и не нажат чекбокс. В инпутах для данных карты возможно вводить только числа, ограниченное количество соответственно.
  4. По нажатию на блок с видео, картинка и кнопка должны пропадать и на этом месте должен запускаться плеер YouTube скриншот
  5. Реализовать блоки “показать еще”, “показать все фото”. По нажатию на кнопке, контент должен раскрываться. Также реализуйте отображение реального количества отзывов на странице, рядом с кнопкой “Показать все”.
  6. Вставить Яндекс Карту в блок с картой, с установленной меткой. По нажатию на метку открывается простенький балун с текстом.
  7. Там где на мобильном макете появляется слайдер, его можно реализовать по желанию, но скролл фотографий должен быть.

Требования:

HTML: Используйте шаблонизатор HTML кода pug (очень желательно). Можете так же использовать Bootstrap или просто сетки.

CSS: Использование Pre/Post процессоров (SCSS/SASS, Stylus, LESS, PostCSS). Мы работаем со Stylus. Используйте методологию БЭМ. JS: Желательно использовать современный синтаксис языка JS, предпочтительней jQuery. Сборка: Для сборки проекта используйте любой известный Вам сборщик проектов (WebPack и т.д).

Заданию уделите от 5 до 25 рабочих часов, что успеете высылайте на почту. Срок 5 дней

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


About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published