3. Две колонки со сложным перестроением

  • Уровень сложности: синьор
  • Категория: HTML и CSS / Сетки
  • Сценарии тестирования: изменяемый контент, изменяемый вьюпорт

Описание задания

Доработайте исходную вёрстку, чтобы внешний вид вашей вёрстки совпадал с эталонным решением в разных условиях.

Исходное состояние элемента:

Примеры итогового состояния в нескольких сценариях:

Инструкция по запуску и прохождению

  • Скачайте архив с заданием и автотестами.
  • В корне проекта установите зависимости командой npm i.
  • Запустите автотесты командой npm run test и посмотрите на все тесткейсы.
  • После этого приступайте к решению.
  • Вносите изменения в код и запускайте автотесты.
  • Задание выполнено, если все тесты горят зелёным.

Правила и подсказки

  • В этом задании изменять разметку нельзя, можно править только стили.
  • Основной файл задания: component-3/solution/index.html.
  • Стилевой файл: component-3/solution/css/style.css.
  • Размеры и отступы кратны 5 пикселям.
  • Решение должно работать без :has.

Сценарии тестирования

  • Ширина вьюпорта – 700px.
  • Ширина вьюпорта – 500px.
  • Ширина вьюпорта – 700px, изменено содержание.
  • Ширина вьюпорта – 700px, изменено содержание.

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

  • Необходимо установить Node.js последний LTS релиз. Если Node.js уже установлен, убедитесь, что его версия не ниже 18. Как ставить Node.js можно прочитать в блоге.
  • На Windows запускайте автотесты строго при масштабе экрана 100% иначе автотесты могут не проходить даже при правильно сделанной вёрстке и вы будете терять время на поиск багов там, где их нет.
  • Инструкцию по настройке параметров отображения в Windows можно найти здесь.