напиши код для создания веб страницы, про китов

Краткий ответ: ниже готовая одностраничная веб-страница о китах. Сохрани код в файл index.html, затем открой его в браузере.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мир китов</title>

    <style>
        :root {
            --dark-blue: #063b5b;
            --blue: #0b78a8;
            --light-blue: #eaf8ff;
            --yellow: #f5b942;
            --text: #183b4f;
            --white: #ffffff;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            color: var(--text);
            background: #f7fcff;
            line-height: 1.6;
        }

        .container {
            width: min(1100px, calc(100% - 32px));
            margin: 0 auto;
        }

        .header {
            position: sticky;
            top: 0;
            z-index: 10;
            background: var(--dark-blue);
            color: var(--white);
        }

        .navigation {
            min-height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .logo {
            color: var(--white);
            text-decoration: none;
            font-size: 1.3rem;
            font-weight: bold;
        }

        nav {
            display: flex;
            gap: 20px;
        }

        nav a {
            color: var(--white);
            text-decoration: none;
        }

        nav a:hover {
            color: var(--yellow);
        }

        .hero {
            background: linear-gradient(135deg, #c9f1ff, #5ab8d9);
        }

        .hero-content {
            min-height: 520px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 30px;
        }

        .eyebrow {
            color: var(--blue);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        h1,
        h2,
        h3 {
            line-height: 1.2;
        }

        .hero h1 {
            margin: 10px 0;
            color: var(--dark-blue);
            font-size: clamp(2.3rem, 6vw, 4.5rem);
        }

        .hero p {
            max-width: 600px;
            font-size: 1.15rem;
        }

        .button {
            display: inline-block;
            margin-top: 15px;
            padding: 13px 22px;
            border: none;
            border-radius: 30px;
            background: var(--yellow);
            color: #25384a;
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
        }

        .button:hover {
            background: #ffd269;
        }

        .whale {
            text-align: center;
            font-size: clamp(8rem, 20vw, 15rem);
            animation: swim 4s ease-in-out infinite;
        }

        @keyframes swim {
            0%, 100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-18px);
            }
        }

        .section {
            padding: 70px 0;
        }

        .section-title {
            margin-top: 0;
            color: var(--dark-blue);
            font-size: 2.2rem;
        }

        .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        .card {
            padding: 25px;
            border-radius: 18px;
            background: var(--white);
            box-shadow: 0 8px 25px rgba(6, 59, 91, 0.1);
        }

        .card-icon {
            font-size: 2.5rem;
        }

        .card h3 {
            color: var(--blue);
        }

        .fact-section {
            background: var(--light-blue);
            text-align: center;
        }

        .fact-box {
            max-width: 700px;
            margin: 0 auto;
            padding: 30px;
            border-radius: 20px;
            background: var(--white);
            box-shadow: 0 8px 25px rgba(6, 59, 91, 0.1);
        }

        #factText {
            min-height: 55px;
            font-size: 1.15rem;
        }

        footer {
            padding: 25px;
            background: var(--dark-blue);
            color: var(--white);
            text-align: center;
        }

        @media (max-width: 700px) {
            .navigation {
                flex-direction: column;
                padding: 15px 0;
            }

            .hero-content {
                grid-template-columns: 1fr;
                padding: 60px 0;
                text-align: center;
            }

            .hero p {
                margin-left: auto;
                margin-right: auto;
            }

            .cards {
                grid-template-columns: 1fr;
            }

            nav {
                gap: 12px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>

<body>
    <header class="header">
        <div class="container navigation">
            <a class="logo" href="#top">🐋 Мир китов</a>

            <nav>
                <a href="#about">О китах</a>
                <a href="#facts">Факты</a>
            </nav>
        </div>
    </header>

    <main id="top">
        <section class="hero">
            <div class="container hero-content">
                <div>
                    <p class="eyebrow">Жители океана</p>
                    <h1>Киты — гиганты морей</h1>
                    <p>
                        Киты — удивительные морские млекопитающие.
                        Они дышат воздухом, заботятся о детёнышах
                        и общаются с помощью звуков.
                    </p>
                    <a class="button" href="#about">Узнать больше</a>
                </div>

                <div class="whale" aria-label="Кит">🐋</div>
            </div>
        </section>

        <section class="section" id="about">
            <div class="container">
                <p class="eyebrow">Коротко о китах</p>
                <h2 class="section-title">Почему они удивительны?</h2>

                <div class="cards">
                    <article class="card">
                        <div class="card-icon">🌊</div>
                        <h3>Обитатели океана</h3>
                        <p>
                            Киты живут в морях и океанах по всему миру,
                            совершая длинные путешествия.
                        </p>
                    </article>

                    <article class="card">
                        <div class="card-icon">💨</div>
                        <h3>Дышат воздухом</h3>
                        <p>
                            Киты являются млекопитающими и поднимаются
                            к поверхности, чтобы вдохнуть воздух.
                        </p>
                    </article>

                    <article class="card">
                        <div class="card-icon">🎵</div>
                        <h3>Общаются звуками</h3>
                        <p>
                            Некоторые виды китов издают сложные звуки,
                            которые могут распространяться под водой
                            на большие расстояния.
                        </p>
                    </article>
                </div>
            </div>
        </section>

        <section class="section fact-section" id="facts">
            <div class="container">
                <p class="eyebrow">Интересные сведения</p>
                <h2 class="section-title">Факт о китах</h2>

                <div class="fact-box">
                    <p id="factText">
                        Нажми на кнопку, чтобы узнать интересный факт.
                    </p>

                    <button class="button" id="factButton" type="button">
                        Показать факт
                    </button>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>© 2025 «Мир китов»</p>
    </footer>

    <script>
        const facts = [
            "Синий кит считается самым крупным животным на Земле.",
            "Киты кормят детёнышей молоком.",
            "Киты могут общаться с помощью низкочастотных звуков.",
            "Некоторые киты ежегодно проплывают тысячи километров."
        ];

        const factText = document.getElementById("factText");
        const factButton = document.getElementById("factButton");

        let currentFact = 0;

        factButton.addEventListener("click", function () {
            factText.textContent = facts[currentFact];

            currentFact++;

            if (currentFact === facts.length) {
                currentFact = 0;
            }
        });
    </script>
</body>
</html>

Как устроен код

1. HTML создаёт структуру страницы:

   • заголовок;
   • меню;
   • блок с описанием китов;
   • карточки с фактами;
   • кнопку и подвал страницы.

2. CSS отвечает за внешний вид:

   • цвета и шрифты;
   • расположение блоков;
   • карточки;
   • адаптацию под телефон;
   • анимацию кита.

3. JavaScript делает страницу интерактивной:

   • после нажатия на кнопку меняется текст;
   • каждый раз показывается следующий факт.

Проверка результата

После открытия файла в браузере должны работать:

• ссылки меню «О китах» и «Факты»;
• кнопка «Узнать больше»;
• анимация кита;
• кнопка «Показать факт», меняющая текст.