Учебный вариант 00 — пара 18

Постоянный пример преподавателя «Техника дома · V00». Он принадлежит этой паре и не зависит от смены студенческих вариантов. Студенты продолжают свои номера и данные.

Задание: продолжить Variant00-web, сохранив три страницы и их содержание. Добавить viewport, контейнер Flexbox для трёх карточек, перенос меню и медиазапрос для узкого экрана. Проверить главную, каталог и форму при ширине 320, 375 и 768 CSS-пикселей. Способ выполнения — в статье этой пары.

Ниже сохранён полный состав примера: файлы, тексты, изображения, поля, стили и проверки. Не нужно заново собирать уже работающий проект или заменять все файлы готовым кодом.

Как выглядит готовый результат

Четыре образца показывают результат адаптации этого примера. Это учебные изображения с условной отрисовкой элементов, а не снимки браузера. Сверяйте расположение, содержание, цвета и читаемость; совпадение до пикселя не требуется. Страницу нужно собрать из настоящих HTML-элементов.

Каталог — 768 px

Сохранение изображений: скачанные файлы называйте так, как указано в задании: 010-00-fridge.svg → fridge.svg, 010-00-washer.svg → washer.svg, 010-00-kettle.svg → kettle.svg. Сохраняйте их в своей папке images.

Каталог — 375 px

Главная — 375 px

Форма — 375 px

На узком экране допустима прокрутка вниз: изображения показывают страницы целиком. Горизонтальной прокрутки всей страницы быть не должно. На 320 px проверьте те же признаки, что на 375 px; отдельный образец не требуется. Внешний вид списка, флажков и ползунка зависит от браузера. Работу ссылок, встроенной проверки ввода и GET проверяйте действием.

Файлы и общие элементы

В папке Variant00-web находятся index.html, catalog.html, form.html, style.css и папка images с тремя SVG-файлами из этого листа. Каждая страница содержит <!doctype html>, html lang="ru", разделы head и body. В head — кодировка UTF-8, собственный title, подключение style.css и одна строка viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

В body каждой страницы сохраняются header, nav, main class="page" и footer. В шапке обычный абзац «Техника дома · V00». В подвале — «Учебный прототип · Вариант 00».

В меню нет ссылки на открытую страницу. Дополнительные переходы внутри основной части перечислены ниже.

Главная страница

Каталог

title и h1 — «Каталог техники». Пояснение — «Три товара с основными характеристиками». Внутри main после пояснения находится div class="products", а внутри него — три непосредственных ребёнка article class="card" в следующем порядке:

В каждой карточке порядок: заголовок → картинка → характеристика → описание. Меню и заголовок каталога в products не включаются.

Это готовые учебные иллюстрации без брендов. Скопируйте их в images своего демонстрационного веб-проекта. Рисовать изображения заново не требуется.

Форма

title и h1 — «Заказ техники». Форма имеет class="request-form" и method="get"; action не задан, отправка идёт на текущую страницу. Подписи связаны с полями через одинаковые for и id; для отправляемых элементов заданы name.

Каждое поле с подписью находится в своём абзаце. Абзацы пунктов 1, 2, 3 и 6 имеют класс form-field; два абзаца флажков остаются без него. Кнопка type="submit" — «Проверить заказ». После формы ссылка «Назад» ведёт на index.html.

Пустой выбор товара не проходит встроенную проверку браузера. Допустимая отправка показывает параметры GET в адресе. Невыбранные флажки не отправляются; выбранные отправляют своё значение. Заказ не сохраняется и не обрабатывается, JavaScript не добавляется.

Общее оформление

Следующие значения сохраняют внешний вид примера. В таблице перечислены свойства существующих правил; не нужно создавать их повторные копии.

В CSS после обычного правила .card добавляется:

.products {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.products > .card {
  flex: 1 1 16rem;
  min-width: 0;
  margin-bottom: 0;
}

Оформление формы и фокус

Ширину 100% флажкам не назначать. Для видимого фокуса сохраняется:

a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid #C2410C;
  outline-offset: 3px;
}

В самом конце CSS находится один медиазапрос:

@media (max-width: 600px) {
  main.page {
    padding: 0.75rem;
  }
  .products > .card {
    flex-basis: 100%;
  }
}

Ожидаемое расположение

Схема показывает расположение, а не заменяет страницы картинкой. На 320 и 375 px каталог показывает карточки по одной. На 768 px при стандартном шрифте браузера ожидаются две карточки рядом и третья ниже на всю строку. При увеличенном шрифте число карточек в строке может уменьшиться: важнее читаемость и отсутствие общего горизонтального переполнения.

На всех ширинах главная остаётся читаемой, меню переносится при нехватке места, поля формы помещаются внутри белой поверхности. Синие характеристики, жёлтые описания и порядок товаров сохраняются.

Что показать

Порядок проверки и показа: Как сдать работу. Если нужно сначала включить панель размеров, откройте настройку ширины в браузере.

Проверьте девять сочетаний: три страницы при каждой из ширин 320, 375 и 768 px. Прокрутите каждую до конца: горизонтальной прокрутки всей страницы нет, тексты не обрезаны, картинки сохраняют пропорции, ссылки работают.

При итоговом показе откройте все три страницы на 375 px, затем каталог на 768 px. Покажите видимый фокус с клавиатуры и проверку формы: пустой выбор запрещён, допустимая отправка показывает параметры GET. Объясните роль products и условие медиазапроса. Отдельный письменный отчёт не нужен.