---

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моё хобби — CSS версия</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1 id="top-heading">Моё хобби</h1>

  <!-- Задание 3: Блок-карточка о себе -->
  <div class="info-card">
    <p>Привет! Меня зовут Алексей, и я увлекаюсь фотографией уже несколько лет.</p>
    <p>Для меня это не просто нажатие на кнопку спуска, а способ замедлиться, посмотреть вокруг и найти что-то красивое в повседневности.</p>
    <p>Эта карточка создана для отработки блочной модели CSS: отступов, рамок и теней.</p>
  </div>

  <h2>Как я начал</h2>
  <p>
    Ещё в школе я увлёкся <strong class="accent">фотографией</strong> — сначала снимал на телефон,
    потом купил первую зеркальную камеру. Мне нравилось ловить
    <em>мимолётные моменты</em> и замечать то, что другие пропускают.
    Постепенно это превратилось в настоящее увлечение, а не просто в развлечение.
  </p>

  <h2>Что мне это даёт</h2>
  <p>
    Фотография учит <strong class="accent">внимательности</strong> и терпению: хороший кадр часто
    требует долгого ожидания правильного света. Кроме того, это отличный способ
    <em>отключиться от суеты</em> и побыть наедине с собой. Каждая удачная
    фотография — маленькая победа и повод двигаться дальше.
  </p>

  <h2>Мои планы</h2>
  <p>
    В ближайшее время я хочу освоить <strong class="accent">ночную съёмку</strong> и попробовать
    себя в жанре стрит-фотографии. Мечтаю собрать небольшую серию работ
    <em>о родном городе</em> и распечатать её в фотокнигу. Верю, что регулярная
    практика поможет мне выйти на новый уровень.
  </p>

  <h2>Что мне нравится в этом хобби</h2>
  <ul>
    <li>Возможность замечать красоту в обычных вещах</li>
    <li>Творческая свобода и отсутствие строгих правил</li>
    <li>Общение с другими фотографами</li>
    <li>Путешествия ради новых кадров</li>
    <li>Постоянное развитие и обучение</li>
  </ul>

  <h2>Мой план на месяц</h2>
  <ol>
    <li>Снимать по 10 фотографий каждый день</li>
    <li>Пройти онлайн-курс по обработке в Lightroom</li>
    <li>Сделать фотосессию на закате в центре города</li>
    <li>Отобрать лучшие 15 снимков для портфолио</li>
  </ol>

</body>
</html>


/* Задание 2: Универсальный сброс (В САМОМ НАЧАЛЕ ФАЙЛА!) */
* {
  box-sizing: border-box;
  margin: 0;
}

/* --- Стили из предыдущего задания --- */
body {
  color: #2b2b2b;
  font-family: Arial, sans-serif;
  background-color: #faf8f2;
  padding: 20px; 
  max-width: 800px;
  margin: 0 auto;
}

.accent {
  color: #b3541e;
  font-weight: bold;
}

#top-heading {
  color: #333366;
  font-size: 32px;
  margin-bottom: 20px; /* Добавил отступ снизу, чтобы заголовок не прилипал к карточке */
}

ul li {
  list-style-type: square;
  line-height: 1.6;
}

/* --- Задания 3, 4, 5: Блочная модель карточки --- */
.info-card {
  width: 480px;
  background-color: #ffffff;
  border: 2px solid #333366;
  border-radius: 12px;
  
  /* Внутренние отступы: текст не прилипает к рамке */
  padding: 24px;
  
  /* Внешние отступы: 20px сверху и снизу, 0 слева и справа */
  margin: 20px 0;
  
  /* Плавный переход для тени (чтобы было красивее при наведении) */
  transition: box-shadow 0.3s ease;
}

/* Задание 5: Тень при наведении */
.info-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* --- Задание 6: Оформление текста --- */

/* Межстрочный интервал для абзацев и отступ между ними */
p {
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Заголовки h2: межбуквенный интервал и ВСЕ БУКВЫ ЗАГЛАВНЫЕ */
h2 {
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 24px; /* Отделим заголовки от предыдущих блоков */
  margin-bottom: 12px;
}