From 52238dd46b54c79bd3e0640f84373923670194b9 Mon Sep 17 00:00:00 2001 From: emil28092005 Date: Sat, 7 Nov 2026 12:49:42 +0300 Subject: [PATCH] Add responsive layout lab practicum --- responsive-lab/README.md | 10 ++ responsive-lab/index.html | 186 +++++++++++++++++++++ responsive-lab/lab.css | 74 +++++++++ responsive-lab/mountains.svg | 8 + responsive-lab/student.css | 311 +++++++++++++++++++++++++++++++++++ 5 files changed, 589 insertions(+) create mode 100644 responsive-lab/README.md create mode 100644 responsive-lab/index.html create mode 100644 responsive-lab/lab.css create mode 100644 responsive-lab/mountains.svg create mode 100644 responsive-lab/student.css diff --git a/responsive-lab/README.md b/responsive-lab/README.md new file mode 100644 index 0000000..71aa3f2 --- /dev/null +++ b/responsive-lab/README.md @@ -0,0 +1,10 @@ +# Практикум по адаптивной вёрстке + +Откройте `index.html` в браузере и редакторе кода. Для работы достаточно браузера и любого текстового редактора. + +- **index.html** — условия заданий, готовая разметка для заданий 01–05 и места для своей разметки в заданиях 06–10. +- **student.css** — файл для ваших стилей. Для каждого задания в нём есть свой раздел. +- **lab.css** — оформление практикума. Оставьте этот файл как есть. +- **mountains.svg** — местная иллюстрация для заданий с изображением. + +После каждого изменения сохраните файл и обновите страницу. В режиме устройства в инструментах разработчика задавайте ширину и высоту области просмотра по условиям задания. Для проверки медиазапросов попробуйте ширину на один пиксель меньше порога и ровно на пороге. diff --git a/responsive-lab/index.html b/responsive-lab/index.html new file mode 100644 index 0000000..c6d1336 --- /dev/null +++ b/responsive-lab/index.html @@ -0,0 +1,186 @@ + + + + + + Практикум по адаптивной вёрстке + + + + +
+
+

01 · Проценты

+

Полоска в половину контейнера

+

Сделайте синюю полоску .meter шириной 50% от её родителя .track. Попробуйте менять ширину окна.

+

Проверка. На 360 и 800 px синяя полоска занимает ровно половину серой дорожки.

+
+
+
+
+
+
+ +
+

02 · Ограничение ширины

+

Карточка с полями

+

Задайте .note ширину 90% от площадки, ограничьте её до 420 px с помощью max-width и расположите по центру. Внутренние отступы должны входить в заданную ширину.

+

Проверка. На 360 px карточка занимает 90% доступной ширины внутри рамки. На 900 px её ширина равна 420 px. Поля слева и справа одинаковые.

+
+
Небольшая карточка с заметкой
+
+
+ +
+

03 · Высота окна

+

Баннер, который растёт вместе с окном

+

Задайте баннеру .banner минимальную высоту 25% от высоты окна. Используйте vh. Содержимое должно помещаться, даже если текста станет больше.

+

Проверка. При высоте окна 400 px баннер занимает 100 px, а при 800 px — 200 px. Ширину окна при этом можно оставить прежней.

+
+ +
+
+ +
+

04 · Первый медиазапрос

+

Заголовок в двух размерах

+

Для .headline задайте размер 24 px по умолчанию. Начиная с 600 px сделайте его 40 px. Используйте @media и min-width.

+

Проверка. На 599 px размер 24 px. На 600 px размер 40 px.

+
+

Городские прогулки

+
+
+ +
+

05 · Flexbox и медиазапрос

+

Из колонки в ряд

+

Сделайте .actions flex-контейнером с промежутком 12 px. На узком экране расположите кнопки друг под другом. От 640 px переключите направление на горизонтальное.

+

Проверка. На 639 px кнопки идут сверху вниз. На 640 px они стоят в одном ряду, а промежуток остаётся 12 px.

+
+
+ + +
+
+
+ +
+

06 · Своя разметка и rem

+

Меню из трёх ссылок

+

Добавьте nav с классом .menu и три ссылки на задания этой страницы. Используйте адреса #exercise-01, #exercise-02 и #exercise-03. Сделайте ссылки колонкой на узком экране и рядом от 600 px. Задайте промежуток между ними и внутренний отступ каждой ссылки через rem, например по 0.5rem.

+

Проверка. На 360 px ссылки стоят в столбик, на 600 px — в ряд. Нажатие переносит к нужному заданию.

+
+ +
+
+ +
+

07 · Два медиазапроса

+

Каталог на одну, две и три колонки

+

Добавьте контейнер .catalog и шесть карточек .item с короткими названиями. Используйте Flexbox с переносом строк или CSS Grid. Сделайте одну колонку по умолчанию, две от 600 px и три от 900 px. Между карточками оставьте 12 px.

+

Проверка. На 360, 700 и 960 px в первой строке помещаются соответственно одна, две и три карточки. Карточки в каждой строке одинаковой ширины.

+
+
+
Керамика
+
Печать
+
Ткани
+
Фотография
+
Столярное дело
+
Рисунок
+
+
+
+ +
+

08 · Резиновое изображение

+

Фото с подписью

+

Добавьте figure с классом .photo, вложите img и figcaption. Возьмите файл mountains.svg из папки проекта и добавьте изображению осмысленный alt. Уберите стандартные внешние отступы у figure. На узком экране картинка должна занимать всю ширину блока. От 700 px поставьте подпись рядом с изображением, которому отведите 55% ширины блока.

+

Проверка. На 360 px подпись под картинкой, на 700 px — справа. Картинка сохраняет пропорции и не выходит за рамку.

+
+
+ Горный пейзаж: заснеженные вершины над озером на закате +
Хребет у озера — эскиз для весенней печатной серии мастерской.
+
+
+
+ +
+

09 · Плавный размер через vw

+

Первый экран с гибкой типографикой

+

Добавьте блок .hero с заголовком h3 и коротким абзацем. Задайте блоку минимальную высоту 35vh и отцентрируйте содержимое с помощью Flexbox. Сделайте размер заголовка равным 6vw, но ограничьте его снизу 24 px, а сверху 56 px. Для ограничения пригодится clamp(минимум, желаемый размер, максимум).

+

Проверка. На 360 px заголовок имеет размер 24 px, на 600 px — 36 px, на 1000 px — 56 px. Высота блока меняется при изменении высоты окна.

+
+
+

Городские прогулки по субботам

+

Собираемся у мастерской, идём тихими дворами к реке и заканчиваем у кофейни. Два часа без спешки — только дома, деревья и разговоры.

+
+
+
+ +
+

10 · Итоговая сборка

+

Мини-страница мастерской

+

Соберите внутри .task-10 страницу мастерской. Добавьте заголовок, меню из трёх ссылок, вводный блок с картинкой и три карточки занятий. Ссылки меню могут вести к разделам внутри вашей мини-страницы.

+
    +
  • По умолчанию меню, вводный блок и карточки выстроены в одну колонку.
    • +
  • От 640 px меню становится горизонтальным, а изображение встаёт рядом с текстом и занимает около 40% ширины вводного блока.
    • +
  • От 900 px три карточки стоят в одном ряду. Внутренний контейнер всей мини-страницы имеет ширину 95%, ограничен 900 px и отцентрирован.
    • +
  • Отступы задайте в rem. Добавьте достаточно текста в одну карточку, чтобы проверить перенос строк.
    • +
+

Проверка. Откройте страницу на 320, 640, 900 и 1280 px. Меню и блоки перестраиваются на нужной ширине, текст переносится, горизонтальной прокрутки нет.

+
+
+
+

Мастерская «Тёплый круг»

+

Керамика, ручная печать и ткани — маленькая студия в центре города.

+ +
+ +
+ Горный пейзаж с озером — эскиз для печатной серии мастерской +
+

Место, где получаются вещи

+

Мы открылись весной и с тех пор проводим короткие занятия для взрослых и детей. В студии есть гончарный круг, пресс для печати и большой стол для тканей.

+

Приходите без опыта: инструменты и материалы уже подготовлены, а мастер поможет на каждом шаге.

+
+
+ +
+

Занятия на неделе

+
+
+
Керамика для начинающих
+

Учимся центровать глину на круге и делать простую чашку. Материалы и обжиг уже входят в стоимость.

+

Суббота, 11:00 · 2 часа

+
+
+
Печать на ткани
+

Собираем узор из штампов и печатаем небольшой шоппер. Подойдёт даже тем, кто первый раз держит валик в руках.

+

Среда, 18:30 · 1,5 часа

+
+
+
Открытая мастерская
+

Свободное время для своих проектов: можно прийти с идеей, взять материалы из фонда студии и работать рядом с другими. Мастер на месте подскажет, как справиться со сложным местом, и поможет довести работу до конца — от первого эскиза до финальной глазури.

+

Воскресенье, 12:00 · 3 часа

+
+
+
+ + +
+
+
+
+ + diff --git a/responsive-lab/lab.css b/responsive-lab/lab.css new file mode 100644 index 0000000..17120d3 --- /dev/null +++ b/responsive-lab/lab.css @@ -0,0 +1,74 @@ +/* Оформление практикума. Стили для заданий пишите в student.css. */ +body { + margin: 0; + color: #222; + font: 1rem/1.5 Arial, sans-serif; +} + +.lab-wrap { + width: 92%; + max-width: 1060px; + margin-inline: auto; +} + +.lab-card > ul { + padding-inline-start: 1.5rem; +} + +.lab-main { + padding-bottom: 2rem; +} + +.lab-card { + padding-block: 1.25rem; + border-top: 1px solid #ccc; +} + +.lab-card > h2 { + margin-block: 0.25rem 0.5rem; + font-size: 1.35rem; + line-height: 1.25; +} + +.lab-card > p, +.lab-card > ul { + max-width: 75ch; +} + +.lab-label { + margin: 0; + color: #555; + font-size: 0.875rem; +} + +.lab-stage { + padding: 0.75rem; + border: 1px solid #ccc; +} + +.lab-stage:empty { + min-height: 2.5rem; +} + +code { + overflow-wrap: anywhere; +} + +/* Начальный вид заготовок. */ +.task-01 .track { + background: #ddd; +} + +.task-01 .meter { + height: 24px; + background: #315cb0; +} + +.task-02 .note { + padding: 12px; + background: #eee; +} + +.task-03 .banner { + background: #eee; +} diff --git a/responsive-lab/mountains.svg b/responsive-lab/mountains.svg new file mode 100644 index 0000000..e94663b --- /dev/null +++ b/responsive-lab/mountains.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/responsive-lab/student.css b/responsive-lab/student.css new file mode 100644 index 0000000..1b35e21 --- /dev/null +++ b/responsive-lab/student.css @@ -0,0 +1,311 @@ +/* + Пишите свои стили ниже. Сохраняйте файл и обновляйте страницу. + Начинайте каждый селектор с класса задания, например .task-01 .meter. + Внутри @media тоже указывайте класс задания. +*/ + +/* 01. Полоска в половину контейнера */ +.task-01 .meter { + width: 50%; +} + +/* 02. Карточка с полями */ +.task-02 .note { + box-sizing: border-box; + width: 90%; + max-width: 420px; + margin-inline: auto; +} + +/* 03. Баннер, который растёт вместе с окном */ +.task-03 .banner { + box-sizing: border-box; + display: flex; + align-items: center; + min-height: 25vh; + padding: 1rem; +} + +/* 04. Заголовок в двух размерах */ +.task-04 .headline { + margin-block: 0; + font-size: 24px; + line-height: 1.2; +} + +@media (min-width: 600px) { + .task-04 .headline { + font-size: 40px; + } +} + +/* 05. Из колонки в ряд */ +.task-05 .actions { + display: flex; + flex-direction: column; + gap: 12px; +} + +@media (min-width: 640px) { + .task-05 .actions { + flex-direction: row; + } +} + +/* 06. Меню из трёх ссылок */ +.task-06 .menu { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.task-06 .menu a { + padding: 0.5rem; + color: #315cb0; + background: #eef3ff; + border-radius: 0.25rem; + text-decoration: none; +} + +.task-06 .menu a:hover { + background: #dfe8ff; +} + +.task-06 .menu a:focus-visible { + outline: 2px solid #315cb0; + outline-offset: 2px; +} + +@media (min-width: 600px) { + .task-06 .menu { + flex-direction: row; + flex-wrap: wrap; + } +} + +/* 07. Каталог на одну, две и три колонки */ +.task-07 .catalog { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 12px; +} + +.task-07 .item { + box-sizing: border-box; + padding: 0.75rem; + background: #f1f3f7; + border-radius: 0.25rem; +} + +@media (min-width: 600px) { + .task-07 .catalog { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (min-width: 900px) { + .task-07 .catalog { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +/* 08. Фото с подписью */ +.task-08 .photo { + margin: 0; +} + +.task-08 .photo img { + display: block; + width: 100%; + height: auto; +} + +.task-08 .photo figcaption { + margin-top: 0.5rem; + color: #444; +} + +@media (min-width: 700px) { + .task-08 .photo { + display: flex; + align-items: flex-start; + gap: 1rem; + } + + .task-08 .photo img { + flex: 0 0 55%; + width: 55%; + } + + .task-08 .photo figcaption { + flex: 1 1 0; + min-width: 0; + margin-top: 0; + } +} + +/* 09. Первый экран с гибкой типографикой */ +.task-09 .hero { + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.75rem; + min-height: 35vh; + padding: 1.5rem 1rem; + background: #edf2fb; + text-align: center; +} + +.task-09 .hero h3 { + margin: 0; + font-size: clamp(24px, 6vw, 56px); + line-height: 1.1; +} + +.task-09 .hero p { + margin: 0; + max-width: 42ch; +} + +/* 10. Мини-страница мастерской */ +.task-10 .studio { + box-sizing: border-box; + width: 95%; + max-width: 900px; + margin-inline: auto; + padding: 1rem; + color: #2f2a24; + background: #fbf7f1; + border-radius: 0.5rem; + overflow-wrap: break-word; +} + +.task-10 .studio-title { + margin: 0 0 0.25rem; + font-size: 1.5rem; + line-height: 1.2; +} + +.task-10 .studio-lead { + margin: 0 0 1rem; + color: #6b5f52; +} + +.task-10 .studio-menu { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.task-10 .studio-menu a { + display: block; + padding: 0.5rem 0.75rem; + color: #8a3f1d; + background: #fffdfa; + border: 1px solid #e6d9c8; + border-radius: 0.375rem; + text-decoration: none; +} + +.task-10 .studio-menu a:hover { + background: #f6ece0; +} + +.task-10 .studio-menu a:focus-visible { + outline: 2px solid #8a3f1d; + outline-offset: 2px; +} + +.task-10 .studio-intro { + margin-top: 1.5rem; +} + +.task-10 .studio-intro img { + display: block; + width: 100%; + height: auto; + border-radius: 0.5rem; +} + +.task-10 .studio-intro-text { + margin-top: 0.75rem; +} + +.task-10 h4 { + margin: 0 0 0.5rem; + font-size: 1.125rem; + line-height: 1.3; +} + +.task-10 h5 { + margin: 0 0 0.25rem; + font-size: 1rem; + line-height: 1.3; +} + +.task-10 p { + margin: 0 0 0.5rem; +} + +.task-10 .studio-classes { + margin-top: 1.5rem; +} + +.task-10 .studio-cards { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 0.75rem; +} + +.task-10 .studio-card { + box-sizing: border-box; + padding: 1rem; + background: #fffdfa; + border: 1px solid #e6d9c8; + border-radius: 0.5rem; +} + +.task-10 .studio-card p:last-child { + margin-bottom: 0; +} + +.task-10 .studio-meta { + color: #8a3f1d; + font-weight: 700; +} + +.task-10 .studio-signup { + margin-top: 1.5rem; + padding-top: 1rem; + border-top: 1px solid #e6d9c8; +} + +.task-10 .studio-signup p { + margin-bottom: 0; +} + +@media (min-width: 640px) { + .task-10 .studio-menu { + flex-direction: row; + flex-wrap: wrap; + } + + .task-10 .studio-intro { + display: grid; + grid-template-columns: 40% minmax(0, 1fr); + align-items: center; + gap: 1rem; + } + + .task-10 .studio-intro-text { + margin-top: 0; + } +} + +@media (min-width: 900px) { + .task-10 .studio-cards { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +}