---

<!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>

  <header class="site-header">
    Моё творческое пространство
  </header>

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

  <div class="info-card">
    <span class="badge">Новое</span>
    
    <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>

  <a href="#top" class="to-top">Наверх ↑</a>

</body>
</html>



h1 {
  color: green; 
}

.experiment-class {
  color: orange;
}

#top {
  color: purple; 
  font-size: 32px;
  margin-bottom: 20px;
}

.experiment-class {
  color: orange; 
}
.experiment-class {
  color: blue; 
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  color: #2b2b2b;
  font-family: Arial, sans-serif;
  background-color: #faf8f2;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 80px; 
}

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

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

p {
  line-height: 1.6;
  margin-bottom: 12px;
}

h2 {
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 24px;
  margin-bottom: 12px;
}

.site-header {
  position: sticky;
  top: 0;
  background-color: #162235;
  color: #ffffff;
  padding: 16px;
  font-weight: bold;
  font-size: 20px;
  z-index: 100; 
}

.info-card {
  width: 480px;
  background-color: #ffffff;
  border: 2px solid #333366;
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
  transition: box-shadow 0.3s ease;
  position: relative; 
}

.info-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #b3541e;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: #162235;
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: background-color 0.2s;
}

.to-top:hover {
  background-color: #333366;
}