Проект: интерактив

💡 Объяснение

Сайт, с которым можно что-то делать

Пока наш сайт в основном «читается». Сегодня добавим полезный интерактивный блок — что-то, с чем посетитель может взаимодействовать. Мы ещё не знаем JavaScript, но HTML и CSS умеют немало.

Как выбрать блок

Спроси себя: «Что было бы полезно посетителю моего сайта?»

• Много вопросов по теме → «Вопрос — ответ».
• Много картинок → галерея с эффектами.
• Хочется узнать мнение → форма отзыва или опрос.
• Сайт о городе или месте → карта в iframe.

Лучше один блок, сделанный аккуратно, чем три недоделанных.

Вариант 1. «Вопрос — ответ» на details и summary

<details>
  <summary>Сколько спит кот?</summary>
  <p>До 16 часов в день!</p>
</details>

<details> — раскрывающийся блок. <summary> — видимый заголовок, по клику на который раскрывается остальное содержимое. Никакого JavaScript — браузер делает всё сам! Это работает и с клавиатуры.

Оформление:

details {
  background: white;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 12px;
}
summary { cursor: pointer; font-weight: bold; }
details[open] { border-left: 5px solid var(--accent); }

details[open] — это селектор атрибута: он выбирает только раскрытые блоки (у них появляется атрибут open).

Вариант 2. Галерея с эффектами

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s;
}
.gallery img:hover {
  transform: scale(1.05);
}

Подписи к фото — через figure и figcaption. Для сильных: подпись, которая появляется поверх картинки при наведении (position: absolute + opacity + :hover). Но помни, что на телефоне наведения нет — важную информацию не прячь.

Вариант 3. Форма отзыва

Вспоминаем занятие 10: form, label, input, textarea, select, button. Теперь оформляем её в стиле сайта:

.form input, .form textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #dfe6e9;
  border-radius: 8px;
  font: inherit;          /* шрифт как у сайта */
}
.form input:focus, .form textarea:focus {
  border-color: var(--main);
  outline: 3px solid rgba(108, 92, 231, 0.25);
}

Честно предупреди посетителя: форма учебная, данные никуда не отправляются. И никогда не проси в ней личные данные.

Вариант 4. Карта

OpenStreetMap или Яндекс Карты → «Поделиться» → «Встроить» → скопировать iframe. Задай width="100%", высоту 300–400px, title и loading="lazy". Показывай общественные места (парк, музей, город), а не свой дом.

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

• Блок подходит теме и выглядит в стиле сайта (цвета, скругления из переменных).
• Работает мышкой и клавиатурой (Tab, Enter).
• Хорошо выглядит на телефоне.
• Нет личных данных.

Частые ошибки

• summary не первым ребёнком в details.
• Картинки в галерее разной высоты — забыли aspect-ratio и object-fit.
• Поля формы со стандартным шрифтом — забыли font: inherit.
• Важная информация видна только при наведении.

Проверь себя

1. Как сделать раскрывающийся ответ без JavaScript?
2. Что выбирает селектор details[open]?
3. Какой интерактивный блок подходит твоему сайту и почему?