187 lines
15 KiB
HTML
187 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Практикум по адаптивной вёрстке</title>
|
||
<link rel="stylesheet" href="lab.css">
|
||
<link rel="stylesheet" href="student.css">
|
||
</head>
|
||
<body>
|
||
<main class="lab-wrap lab-main">
|
||
<section class="lab-card" id="exercise-01">
|
||
<p class="lab-label">01 · Проценты</p>
|
||
<h2>Полоска в половину контейнера</h2>
|
||
<p>Сделайте синюю полоску <code>.meter</code> шириной 50% от её родителя <code>.track</code>. Попробуйте менять ширину окна.</p>
|
||
<p class="lab-check"><strong>Проверка.</strong> На 360 и 800 px синяя полоска занимает ровно половину серой дорожки.</p>
|
||
<div class="lab-stage task-01">
|
||
<div class="track">
|
||
<div class="meter"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="lab-card" id="exercise-02">
|
||
<p class="lab-label">02 · Ограничение ширины</p>
|
||
<h2>Карточка с полями</h2>
|
||
<p>Задайте <code>.note</code> ширину 90% от площадки, ограничьте её до 420 px с помощью <code>max-width</code> и расположите по центру. Внутренние отступы должны входить в заданную ширину.</p>
|
||
<p class="lab-check"><strong>Проверка.</strong> На 360 px карточка занимает 90% доступной ширины внутри рамки. На 900 px её ширина равна 420 px. Поля слева и справа одинаковые.</p>
|
||
<div class="lab-stage task-02">
|
||
<div class="note">Небольшая карточка с заметкой</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="lab-card" id="exercise-03">
|
||
<p class="lab-label">03 · Высота окна</p>
|
||
<h2>Баннер, который растёт вместе с окном</h2>
|
||
<p>Задайте баннеру <code>.banner</code> минимальную высоту 25% от высоты окна. Используйте <code>vh</code>. Содержимое должно помещаться, даже если текста станет больше.</p>
|
||
<p class="lab-check"><strong>Проверка.</strong> При высоте окна 400 px баннер занимает 100 px, а при 800 px — 200 px. Ширину окна при этом можно оставить прежней.</p>
|
||
<div class="lab-stage task-03">
|
||
<div class="banner">Афиша на выходные</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="lab-card" id="exercise-04">
|
||
<p class="lab-label">04 · Первый медиазапрос</p>
|
||
<h2>Заголовок в двух размерах</h2>
|
||
<p>Для <code>.headline</code> задайте размер 24 px по умолчанию. Начиная с 600 px сделайте его 40 px. Используйте <code>@media</code> и <code>min-width</code>.</p>
|
||
<p class="lab-check"><strong>Проверка.</strong> На 599 px размер 24 px. На 600 px размер 40 px.</p>
|
||
<div class="lab-stage task-04">
|
||
<h3 class="headline">Городские прогулки</h3>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="lab-card" id="exercise-05">
|
||
<p class="lab-label">05 · Flexbox и медиазапрос</p>
|
||
<h2>Из колонки в ряд</h2>
|
||
<p>Сделайте <code>.actions</code> flex-контейнером с промежутком 12 px. На узком экране расположите кнопки друг под другом. От 640 px переключите направление на горизонтальное.</p>
|
||
<p class="lab-check"><strong>Проверка.</strong> На 639 px кнопки идут сверху вниз. На 640 px они стоят в одном ряду, а промежуток остаётся 12 px.</p>
|
||
<div class="lab-stage task-05">
|
||
<div class="actions">
|
||
<button type="button">Сохранить</button>
|
||
<button type="button">Отмена</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="lab-card" id="exercise-06">
|
||
<p class="lab-label">06 · Своя разметка и rem</p>
|
||
<h2>Меню из трёх ссылок</h2>
|
||
<p>Добавьте <code>nav</code> с классом <code>.menu</code> и три ссылки на задания этой страницы. Используйте адреса <code>#exercise-01</code>, <code>#exercise-02</code> и <code>#exercise-03</code>. Сделайте ссылки колонкой на узком экране и рядом от 600 px. Задайте промежуток между ними и внутренний отступ каждой ссылки через <code>rem</code>, например по <code>0.5rem</code>.</p>
|
||
<p class="lab-check"><strong>Проверка.</strong> На 360 px ссылки стоят в столбик, на 600 px — в ряд. Нажатие переносит к нужному заданию.</p>
|
||
<div class="lab-stage task-06">
|
||
<nav class="menu" aria-label="Задания практикума">
|
||
<a href="#exercise-01">01 · Проценты</a>
|
||
<a href="#exercise-02">02 · Карточка</a>
|
||
<a href="#exercise-03">03 · Баннер</a>
|
||
</nav>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="lab-card" id="exercise-07">
|
||
<p class="lab-label">07 · Два медиазапроса</p>
|
||
<h2>Каталог на одну, две и три колонки</h2>
|
||
<p>Добавьте контейнер <code>.catalog</code> и шесть карточек <code>.item</code> с короткими названиями. Используйте Flexbox с переносом строк или CSS Grid. Сделайте одну колонку по умолчанию, две от 600 px и три от 900 px. Между карточками оставьте 12 px.</p>
|
||
<p class="lab-check"><strong>Проверка.</strong> На 360, 700 и 960 px в первой строке помещаются соответственно одна, две и три карточки. Карточки в каждой строке одинаковой ширины.</p>
|
||
<div class="lab-stage task-07">
|
||
<div class="catalog">
|
||
<article class="item">Керамика</article>
|
||
<article class="item">Печать</article>
|
||
<article class="item">Ткани</article>
|
||
<article class="item">Фотография</article>
|
||
<article class="item">Столярное дело</article>
|
||
<article class="item">Рисунок</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="lab-card" id="exercise-08">
|
||
<p class="lab-label">08 · Резиновое изображение</p>
|
||
<h2>Фото с подписью</h2>
|
||
<p>Добавьте <code>figure</code> с классом <code>.photo</code>, вложите <code>img</code> и <code>figcaption</code>. Возьмите файл <code>mountains.svg</code> из папки проекта и добавьте изображению осмысленный <code>alt</code>. Уберите стандартные внешние отступы у <code>figure</code>. На узком экране картинка должна занимать всю ширину блока. От 700 px поставьте подпись рядом с изображением, которому отведите 55% ширины блока.</p>
|
||
<p class="lab-check"><strong>Проверка.</strong> На 360 px подпись под картинкой, на 700 px — справа. Картинка сохраняет пропорции и не выходит за рамку.</p>
|
||
<div class="lab-stage task-08">
|
||
<figure class="photo">
|
||
<img src="mountains.svg" alt="Горный пейзаж: заснеженные вершины над озером на закате">
|
||
<figcaption>Хребет у озера — эскиз для весенней печатной серии мастерской.</figcaption>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="lab-card" id="exercise-09">
|
||
<p class="lab-label">09 · Плавный размер через vw</p>
|
||
<h2>Первый экран с гибкой типографикой</h2>
|
||
<p>Добавьте блок <code>.hero</code> с заголовком <code>h3</code> и коротким абзацем. Задайте блоку минимальную высоту <code>35vh</code> и отцентрируйте содержимое с помощью Flexbox. Сделайте размер заголовка равным <code>6vw</code>, но ограничьте его снизу 24 px, а сверху 56 px. Для ограничения пригодится <code>clamp(минимум, желаемый размер, максимум)</code>.</p>
|
||
<p class="lab-check"><strong>Проверка.</strong> На 360 px заголовок имеет размер 24 px, на 600 px — 36 px, на 1000 px — 56 px. Высота блока меняется при изменении высоты окна.</p>
|
||
<div class="lab-stage task-09">
|
||
<div class="hero">
|
||
<h3>Городские прогулки по субботам</h3>
|
||
<p>Собираемся у мастерской, идём тихими дворами к реке и заканчиваем у кофейни. Два часа без спешки — только дома, деревья и разговоры.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="lab-card" id="exercise-10">
|
||
<p class="lab-label">10 · Итоговая сборка</p>
|
||
<h2>Мини-страница мастерской</h2>
|
||
<p>Соберите внутри <code>.task-10</code> страницу мастерской. Добавьте заголовок, меню из трёх ссылок, вводный блок с картинкой и три карточки занятий. Ссылки меню могут вести к разделам внутри вашей мини-страницы.</p>
|
||
<ul>
|
||
<li>По умолчанию меню, вводный блок и карточки выстроены в одну колонку.</li>
|
||
<li>От 640 px меню становится горизонтальным, а изображение встаёт рядом с текстом и занимает около 40% ширины вводного блока.</li>
|
||
<li>От 900 px три карточки стоят в одном ряду. Внутренний контейнер всей мини-страницы имеет ширину 95%, ограничен 900 px и отцентрирован.</li>
|
||
<li>Отступы задайте в <code>rem</code>. Добавьте достаточно текста в одну карточку, чтобы проверить перенос строк.</li>
|
||
</ul>
|
||
<p class="lab-check"><strong>Проверка.</strong> Откройте страницу на 320, 640, 900 и 1280 px. Меню и блоки перестраиваются на нужной ширине, текст переносится, горизонтальной прокрутки нет.</p>
|
||
<div class="lab-stage task-10">
|
||
<div class="studio">
|
||
<header class="studio-header">
|
||
<h3 class="studio-title">Мастерская «Тёплый круг»</h3>
|
||
<p class="studio-lead">Керамика, ручная печать и ткани — маленькая студия в центре города.</p>
|
||
<nav class="studio-menu" aria-label="Разделы мини-страницы">
|
||
<a href="#studio-about">О мастерской</a>
|
||
<a href="#studio-classes">Занятия</a>
|
||
<a href="#studio-signup">Как записаться</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<section class="studio-intro" id="studio-about">
|
||
<img src="mountains.svg" alt="Горный пейзаж с озером — эскиз для печатной серии мастерской">
|
||
<div class="studio-intro-text">
|
||
<h4>Место, где получаются вещи</h4>
|
||
<p>Мы открылись весной и с тех пор проводим короткие занятия для взрослых и детей. В студии есть гончарный круг, пресс для печати и большой стол для тканей.</p>
|
||
<p>Приходите без опыта: инструменты и материалы уже подготовлены, а мастер поможет на каждом шаге.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="studio-classes" id="studio-classes" aria-labelledby="studio-classes-title">
|
||
<h4 id="studio-classes-title">Занятия на неделе</h4>
|
||
<div class="studio-cards">
|
||
<article class="studio-card">
|
||
<h5>Керамика для начинающих</h5>
|
||
<p>Учимся центровать глину на круге и делать простую чашку. Материалы и обжиг уже входят в стоимость.</p>
|
||
<p class="studio-meta">Суббота, 11:00 · 2 часа</p>
|
||
</article>
|
||
<article class="studio-card">
|
||
<h5>Печать на ткани</h5>
|
||
<p>Собираем узор из штампов и печатаем небольшой шоппер. Подойдёт даже тем, кто первый раз держит валик в руках.</p>
|
||
<p class="studio-meta">Среда, 18:30 · 1,5 часа</p>
|
||
</article>
|
||
<article class="studio-card">
|
||
<h5>Открытая мастерская</h5>
|
||
<p>Свободное время для своих проектов: можно прийти с идеей, взять материалы из фонда студии и работать рядом с другими. Мастер на месте подскажет, как справиться со сложным местом, и поможет довести работу до конца — от первого эскиза до финальной глазури.</p>
|
||
<p class="studio-meta">Воскресенье, 12:00 · 3 часа</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="studio-signup" id="studio-signup">
|
||
<h4>Как записаться</h4>
|
||
<p>Напишите нам или зайдите в студию за час до занятия. Возьмите сменную обувь и хорошее настроение — остальное найдётся на месте.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|