Верстка одной статической страницы

Верстка одной статической страницы.

Есть "самопальная" страница https://smartersystems.ru/index.html

Необходима "профессиональная" адаптивная вёрстка:

1. Поддержка всех устройств - смартфоны, планшеты, десктопы - со всеми разрешениями - начиная от 320 и до 4к, вид - ландшафт и портрет

2. Поддержка браузеров, желательно, начиная с IE10

3. Верстка с использованием CSS Grid

4. Валидации HTML-файлов.

W3C - validator.w3.org или на выбор Исполнителя.

Если верстка не проходит валидацию, должно быть грамотное объяснение причины.

Объяснения типа - «Я всегда так делаю. Все отображается нормально. Никто не жаловался.» - не прокатят.

5. Валидации CSS-файлов

http://csslint.net/ или на выбор Исполнителя.

Если верстка не проходит валидацию, должно быть грамотное объяснение причины.

Объяснения типа - «Я всегда так делаю. Все отображается нормально. Никто не жаловался.» - не прокатят.

6. Брейкпойнты по необходимости, но с обязательным соответствием с брейкпойнтами Bootstrap 5.

7. Верстка должна быть выполнена без применения js-скриптов.

8. Сброс стилей - от Bootstrap 5.

9. Использование SASS

10. Недопустимо использование миксинов (@include) и экстендов(@extend)

11. Нельзя использовать вендорные префиксы (если в них сейчас вообще есть необходимость) в препроцессорах, которые могут быть добавлены автопрефиксером

12. Осмысленное наименование CSS-классов

13. Нельзя использовать !important.

14. Использование единиц em и rem, а не px (за исключением брейкпойнтов, где для совместимости с Bootstrap5 допускается использование px)

15. Верстка должна корректно отображаться при различных коэффициентах масштабирования шрифта (устанавливается на десктопах)

При разных размерах шрифта, установленного в системе – Мелкий (по умолчанию)/Средний(125%)/Крупный(150%).

16. Верстка должна корректно отображаться при различных масштабах, устанавливаемого в браузерах – 80% - 100% - 120 % - 150% (для примера).

17. Стиль для печати - без печати фоновой картинки.

18. Размеры шрифтов текстов и их расположение для разных разрешений, согласовываются с Заказчиком.

Требования по текстам:

1. Блок "Наименование"

- текст - Смартер системс

- в 2 строки

- первые 2 буквы слова системс располагаются строго под последними двумя буквами слова Смартер.

2. Цитата

- может включать в себя подпись - источник/автора цитаты

- на больших разрешениях - располагается между фигурой и краем экрана, на меньших - ближе к фигуре, как бы его слова,

3. Контакты

4. Авторская ссылка о фоновой картинке

Должна быть. Должны быть видима, заметна, но не бросаться в глаза, не выделяться, не отвлекать/привлекать внимания.

Исходная верстка - https://smartersystems.ru/index.html или во вложенном архиве.

Исходная верстка не является требованием.

Это просто пример, макет, что должно быть сверстано.

Опциональные требования:

1. Верстка должна проходить тесты на переполнения и незаполнения.

Имеется ввиду, что блок "Цитата" может отсутствовать или быть большего размера, чем сейчас.

2. Текст блока наименование может быть на англйиском языке - Smarter systems, при этом требование о взаимном расположении остается - первые 2 буквы слова systems располагаются строго под последними двумя буквами слова Smarters.

От Исполнителя:

1. Используемые средства валидации HTML/CSS

2. Используемые средства демонстрации, что верстка правильно отображается при различных разрешениях на различных браузерах.

Ну и цена и срок.

Оплата через Безопасную сделку.