Ссылка на макеты в 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 дней
Дополнительно напишите нам, как вы тестировали результат своей работы. Какие используете инструменты и как вы осуществляете тестирование.
Подготовка к реализации проекта
- подключить Fonts
- подключить Normalize
- подключить CSS
- подключить SASS
- используем методологию BEM
- картинки все сжать через https://squoosh.app/ или https://tinypng.com/
- иконки все сжать через https://jakearchibald.github.io/svgomg/ после сжатия забросить все в спрайт через https://icomoon.io/
- закинуть в проект файлик - .gitignore
- закинуть в проект файлик - .prettierrc.json
- на все внешние ссылки - rel="noopener noreferrer nofollow"
- фонтс - Free Fonts: https://nomail.com.ua/ , https://fontsfree.net/ Google Fonts: https://fonts.google.com/
Fonts converter: http://www.font2web.com/
подключение в CSS или SCSS
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/FontsFree-Net-Proxima-Nova-Bold.eot'); src: local('в�є'), url('../fonts/Proxima-Nova-Bold.woff') format('woff'), url('../fonts/Proxima-Nova-Bold.ttf') format('truetype'), url('../fonts/Proxima-Nova-Bold.svg') format('svg'); font-weight: 700; font-style: normal; }
font-weight:
- 100 - Thin
- 200 - UltraLite
- 300 - Lite
- 400 - Normal
- 500 - Medium
- 600 - Semibold
- 700 - Bold
- 800 - Heavy
- 900 - Black Footer