Add responsive layout lab practicum
This commit is contained in:
emil28092005
@@ -0,0 +1,10 @@
|
|||||||
|
# Практикум по адаптивной вёрстке
|
||||||
|
|
||||||
|
Откройте `index.html` в браузере и редакторе кода. Для работы достаточно браузера и любого текстового редактора.
|
||||||
|
|
||||||
|
- **index.html** — условия заданий, готовая разметка для заданий 01–05 и места для своей разметки в заданиях 06–10.
|
||||||
|
- **student.css** — файл для ваших стилей. Для каждого задания в нём есть свой раздел.
|
||||||
|
- **lab.css** — оформление практикума. Оставьте этот файл как есть.
|
||||||
|
- **mountains.svg** — местная иллюстрация для заданий с изображением.
|
||||||
|
|
||||||
|
После каждого изменения сохраните файл и обновите страницу. В режиме устройства в инструментах разработчика задавайте ширину и высоту области просмотра по условиям задания. Для проверки медиазапросов попробуйте ширину на один пиксель меньше порога и ровно на пороге.
|
||||||
@@ -0,0 +1,186 @@
|
|||||||
|
<!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>
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540">
|
||||||
|
<rect width="960" height="540" fill="#e4ecff"/>
|
||||||
|
<circle cx="746" cy="139" r="64" fill="#ffca7b"/>
|
||||||
|
<path d="M0 415 230 148 490 415 687 221 960 420V540H0Z" fill="#7b93d2"/>
|
||||||
|
<path d="m158 232 72-84 92 95-55-19-37 19-28-20z" fill="#f7f9ff"/>
|
||||||
|
<path d="M0 475 274 309 472 477 702 348 960 476V540H0Z" fill="#324c85"/>
|
||||||
|
<path d="M0 510c170-35 306-15 468 2 192 21 326 9 492-23v51H0Z" fill="#192c56"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 498 B |
@@ -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));
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user