Skip to content

Tars-Tarkas/HELYFY-test-layout

Repository files navigation

Языки программирования и инструменты

HTML SASS JS Gulp

Задание

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

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

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

GitHub Streak