---

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Flex</title>
<style>
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column;font:16px Arial;background:#eee}
header{position:sticky;top:0;background:#222;color:white;padding:20px;display:flex;justify-content:space-between}
nav{display:flex;gap:20px;justify-content:space-between}nav a{color:white}
main{flex:1;padding:40px}
.cards{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.card{position:relative;background:white;padding:25px;width:30%;min-height:150px}
.num{position:absolute;right:10px;top:10px}
.info{display:flex;flex-direction:column;margin-top:30px}
footer{text-align:center;background:#222;color:white;padding:20px}
.top{position:fixed;right:20px;bottom:20px;background:#222;color:white;padding:15px}
</style>
</head>

<body>

<header>
  <b>LOGO</b>
  <nav>
    <a href="#">Главная</a>
    <a href="#">О нас</a>
    <a href="#">Контакты</a>
  </nav>
</header>

<main>
  <h1>Мой сайт</h1>

  <div class="cards">
    <div class="card"><span class="num">1</span><h2>HTML</h2><p>Структура сайта</p></div>
    <div class="card"><span class="num">2</span><h2>CSS</h2><p>Дизайн сайта</p></div>
    <div class="card"><span class="num">3</span><h2>Flexbox</h2><p>Расположение элементов</p></div>
  </div>

  <div class="info">
    <h2>О сайте</h2>
    <p>Это учебная страница для изучения CSS.</p>
  </div>
</main>

<footer>© 2026 Мой сайт</footer>

<a class="top" href="#">↑</a>

</body>
</html>