Учебный проект в рамках обучения в RS SCHOOL. Выполнен мной с применением технологий CSS Flexbox и Grid Layout.
Ключевым моментом является полное соответствие макету (Pixel Perfect).
-
Основные блоки должны быть идеально расположены на заданной ширине экрана (1020px).
-
Изображения, логотипы (если они есть) должны быть идеально расположены в рамках логического контейнера.
-
Иконки должны сохранять идеальное расстояние до соответствующего им текста.
-
Если использован правильный шрифт, проверьте высоту текста — он должен соответствовать исходнику. Ширина может варьироваться. Но общепринятой практикой является добавление свойства межбуквенного интервала (letter-spacing) тексту заголовков, девиза (motto) или цитат.
-
Если в строке несколько объектов визуально одинаковой ширины, то ширина содержащих их блоков должна быть одинаковой. Разница в несколько пикселей не имеет значения, важно совпадение размеров.
-
Поддержка браузеров: Google Chrome, Mozilla Firefox, Microsoft Edge (Windows) or Safari (MacOS).
- Интерактивная панель навигации.
- Логотип содержит 2 разных текстовых элемента, белый и красный.
- На странице обязательно должен присутствовать один элемент "h1". Расположите его на свое усмотрение.
- Внизу есть небольшая линия другого цвета, будьте внимательны.
-
Стрелки должны быть интерактивными. При нажатии ничего происходить не должно (слайды могут не листаться).
-
Картинки в слайдере можно реализовать тремя способами. Выберите один из них:
-
Создайте изображения наложением нескольких слоев, используя z-index. Элементы должны быть в position: absolute. Изображения телефонов так же могут быть сделаны средствами CSS.
-
Создайте полные изображения вертикального и горизонтального телефонов с помощью графического редактора (фотошоп или аналог), объединив все слои.
-
Объедините оба предыдущих варианта и создайте изображения трёх отдельных элементов: тень, контейнер телефона, внутреннее изображение на экране. В таком случае одно и то же изображение телефона и тени можно использовать для обеих картинок, просто повернув их на 90 градусов и 180 градусов. Тень можно сделать с помощью CSS.
-
Внизу есть небольшая линия другого цвета, будьте внимательны.
- Трёхколоночный макет снизу. Лучше использовать flexbox или grid. Float использовать можно. "table" - нельзя!
- Изображения можно экспортировать как иконки вместе с кругами. Другой вариант - экспортировать только сами иконки, а круги - добавить свойством border-radius.
- Если в текстовой ячейке больше текста, чем она вмещает, и текст начинает выходить за границы элемента, то выступающая часть должна быть скрыта.
- Внизу есть небольшая линия другого цвета, будьте внимательны.
- Интерактивные кнопки навигации.
- Четырех колоночный макет с изображениями.
- Если в сетку добавить больше элементов с изображениями (например, 15) - то следющие за 12-м не должны показываться (т.е. 13, 14, 15 не видны).
- Внизу есть небольшая линия другого цвета, будьте внимательны.
- Трёхколоночный макет снизу.
- Имя, если оно очень большое, все равно должно занимать ровно одну строку.
- Интерактивные социальные иконки.
- Внизу есть небольшая линия другого цвета, будьте внимательны.
- Все элементы ввода - часть формы
- Форма должна быть интерактивной, а именно иметь возможность отправлять запрос. Добавьте кнопку 'Submit' куда-либо на ваше усмотрение. Кнопка должна находиться внутри формы.
- 2 поля помечены как (Required). Это значит, что должна быть хотя бы базовая валидация на text и на email.
- Поля должны каким-либо образом дать понять пользователю, если введенные данные не валидны.
- На всех полях должен быть placeholder.
- Указатель на номер телефона - должен быть ссылкой типа tel.
- Указатель на email - должен быть ссылкой типа mail.
- Внизу есть небольшая линия другого цвета, будьте внимательны.
- Символ "копирайт" (©) должен быть текстовым, т.е. чтобы при выделении текста мышкой, он также выделялся.
- Интерактивные иконки.