Пора собрать всё, что мы знаем, в один настоящий сайт!
Сверстай сайт по картинке, используя всё, что изучили: теги, стили, отступы, flexbox и :hover. Сравни свой результат с ответом только после того, как закончишь.
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
Сделай одностраничный сайт о своём хобби. Обязательно:
<header> с меню <nav> (минимум 3 ссылки)<h1><section><footer>:hover)<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<style>
body { margin: 0; font-family: sans-serif; }
header { background-color: #1f1b3d; padding: 16px; }
nav { display: flex; gap: 20px; justify-content: center; }
nav a { color: white; text-decoration: none; }
nav a:hover { color: #ffd23f; }
h1, section { text-align: center; }
footer { background-color: #1f1b3d; color: white; text-align: center; padding: 16px; }
</style>
</head>
<body>
<header>
<nav>
<a href="#about">Обо мне</a>
<a href="#hobby">Хобби</a>
<a href="#contacts">Контакты</a>
</nav>
</header>
<h1>Я люблю космос 🚀</h1>
<section id="about">
<h2>Обо мне</h2>
<p>Мне 12 лет, я учусь делать сайты.</p>
</section>
<section id="hobby">
<h2>Моё хобби</h2>
<p>Смотрю на звёзды в телескоп.</p>
</section>
<footer id="contacts">© 2024 Мой сайт</footer>
</body>
</html>