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

Задание

Ссылка на макеты в 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 дней

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

---

Подготовка к реализации проекта

---

1. подключить Fonts

---

2. подключить Normalize

---

3. подключить CSS

---

4. подключить SASS

---

5. используем методологию BEM

---

6. картинки все сжать через https://squoosh.app/ или https://tinypng.com/

---

7. иконки все сжать через https://jakearchibald.github.io/svgomg/ после сжатия забросить все в спрайт через https://icomoon.io/

---

8. закинуть в проект файлик - .gitignore

---

9. закинуть в проект файлик - .prettierrc.json

---

10. макет - https://www.figma.com/file/jjKQXpWj3fdAHDUGhd4lFA/Britlex-Language-School-(Copy)?node-id=580%3A2&t=VQ3kgxlTI4S8v1bQ-1

---

11. на все внешние ссылки - rel="noopener noreferrer nofollow"

---

12. фонтс - 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:

1. 100 - Thin
2. 200 - UltraLite
3. 300 - Lite
4. 400 - Normal
5. 500 - Medium
6. 600 - Semibold
7. 700 - Bold
8. 800 - Heavy
9. 900 - Black Footer