🚀

Модуль 3. Проектная работа

Занятие 30
Проект: интерактив

Сегодня мы добавим на сайт полезный интерактивный блок: форму отзыва, галерею или раздел «Вопрос–ответ».

👀

Сегодня сделаем вот такое

🕹

Сайт, с которым можно играть

  • ❓ Вопрос — ответ
  • 🖼 Галерея с эффектами
  • 📝 Форма отзыва
  • 🗺 Карта

Один аккуратный блок лучше трёх недоделанных.

❓

details + summary

  • summary — вопрос, виден всегда
  • Остальное раскрывается по клику
  • Без JavaScript!

Нажми на вопрос 👉

<details>
  <summary>Сколько спит кот?</summary>
  <p>До 16 часов в день! 😴</p>
</details>
<details>
  <summary>Почему кот мурчит?</summary>
  <p>Так он показывает, что ему хорошо.</p>
</details>
body { font-family: sans-serif; background: #f5f6fa; }
details {
  background: white; margin-bottom: 10px;
  padding: 12px 16px; border-radius: 12px;
}
summary { cursor: pointer; font-weight: bold; }
details[open] { border-left: 5px solid #fd79a8; }
details[open] summary { color: #e84393; }
🎯

Селектор атрибута [open]

details[open] — только раскрытые блоки

  • input[type="email"] — поля для почты
  • a[target="_blank"] — внешние ссылки

[атрибут] выбирает элементы по их атрибутам.

🖼

Галерея с эффектом

  • Grid + auto-fill
  • aspect-ratio: 1 + object-fit: cover
  • :hover + transform: scale

Наведи на картинку 👉

<div class="gallery">
  <img src="/images/cat.svg" alt="Кот">
  <img src="/images/dog.svg" alt="Собака">
  <img src="/images/rocket.svg" alt="Ракета">
  <img src="/images/mountain.svg" alt="Горы">
</div>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; transition: transform .3s;
}
.gallery img:hover { transform: scale(1.08) rotate(-2deg); }
📝

Форма в стиле сайта

  • width: 100%, скругления, отступы
  • font: inherit — шрифт сайта
  • Яркий :focus
  • ⚠️ Учебная — данные не отправляются
<form class="form">
  <label for="name">Имя</label>
  <input id="name" placeholder="Лиза">
  <label for="msg">Отзыв</label>
  <textarea id="msg" rows="3"></textarea>
  <button>Отправить</button>
</form>
.form { display: grid; gap: 6px; max-width: 320px; font-family: sans-serif; }
.form input, .form textarea {
  padding: 10px; font: inherit;
  border: 2px solid #dfe6e9; border-radius: 8px;
}
.form input:focus, .form textarea:focus {
  border-color: #6c5ce7; outline: 3px solid rgba(108,92,231,.25);
}
.form button { margin-top: 6px; padding: 10px; color: white; background: #6c5ce7; border: 0; border-radius: 8px; font: inherit; }
✅

Проверка блока

  • 🎨 В стиле сайта (переменные)
  • ⌨️ Работает с клавиатуры
  • 📱 Хорошо на телефоне
  • 🛡 Нет личных данных
🃏

Запомни!

  • <details><summary>Раскрывающийся блок
  • details[open]Стиль открытого блока
  • transform: scale(1.1)Увеличение
  • input:focusПоле в фокусе
  • <iframe>Карта
⌨️

Практика: Добавляем полезный блок

  1. Выбери, какой интерактивный блок нужен твоему сайту.
  2. Сверстай его HTML.
  3. Оформи блок в стиле сайта (переменные, скругления, :hover).
  4. Проверь, как блок выглядит на телефоне.

🚀 Со звёздочкой: Сделай галерею-лайтбокс на чистом CSS с помощью :target.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Придумай 3 вопроса и ответа по теме своего сайта.