---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Мой первый сайт</title>

    <style>
        /* Общие стили */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }

        /* Шапка сайта */
        header {
            background: #2c5aa0;
            color: white;
            padding: 20px 0;
            text-align: center;
        }

        header h1 {
            font-size: 32px;
            margin-bottom: 10px;
        }

        header p {
            font-size: 16px;
            opacity: 0.9;
        }

        /* Навигация */
        nav {
            background: #1e3f73;
            padding: 10px 0;
            text-align: center;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-size: 16px;
            transition: color 0.3s;
        }

        nav a:hover {
            color: #ffcc00;
        }

        /* Основной контент */
        main {
            max-width: 900px;
            margin: 30px auto;
            padding: 0 20px;
        }

        section {
            background: white;
            padding: 25px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        section h2 {
            color: #2c5aa0;
            margin-bottom: 15px;
            font-size: 24px;
        }

        section p {
            margin-bottom: 10px;
        }

        /* Список */
        ul {
            margin-left: 20px;
            margin-top: 10px;
        }

        ul li {
            margin-bottom: 8px;
        }

        /* Кнопка */
        .btn {
            display: inline-block;
            background: #2c5aa0;
            color: white;
            padding: 12px 25px;
            text-decoration: none;
            border-radius: 5px;
            margin-top: 15px;
            transition: background 0.3s;
        }

        .btn:hover {
            background: #1e3f73;
        }

        /* Форма */
        form {
            margin-top: 15px;
        }

        form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        form input,
        form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: inherit;
        }

        form button {
            background: #2c5aa0;
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        form button:hover {
            background: #1e3f73;
        }

        /* Подвал */
        footer {
            background: #1e3f73;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 30px;
        }

        /* Адаптивность */
        @media (max-width: 600px) {
            header h1 {
                font-size: 24px;
            }

            nav a {
                display: block;
                margin: 8px 0;
            }

            section {
                padding: 15px;
            }
        }
    </style>
</head>

<body>

    <!-- Шапка -->
    <header>
        <h1>Мой первый сайт</h1>
        <p>Добро пожаловать на мою страницу</p>
    </header>

    <!-- Навигация -->
    <nav>
        <a href="#about">Обо мне</a>
        <a href="#services">Услуги</a>
        <a href="#contact">Контакты</a>
    </nav>

    <!-- Основной контент -->
    <main>

        <!-- Обо мне -->
        <section id="about">
            <h2>Обо мне</h2>

            <p>Привет! Меня зовут Иван. Я начинающий веб-разработчик.</p>

            <p>
                Этот сайт создан для демонстрации моих навыков
                в HTML и CSS.
            </p>

            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>Основы JavaScript</li>
            </ul>

            <a href="#contact" class="btn">Связаться со мной</a>
        </section>

        <!-- Услуги -->
        <section id="services">
            <h2>Услуги</h2>

            <p>Я предлагаю следующие услуги:</p>

            <ul>
                <li>Создание простых сайтов-визиток</li>
                <li>Вёрстка по макету</li>
                <li>Адаптация сайтов под мобильные устройства</li>
                <li>Консультации по основам HTML и CSS</li>
            </ul>
        </section>

        <!-- Контакты -->
        <section id="contact">
            <h2>Контакты</h2>

            <p>Свяжитесь со мной удобным способом:</p>

            <ul>
                <li>Email: ivan@example.com</li>
                <li>Телефон: +7 (900) 123-45-67</li>
                <li>Telegram: @ivan_dev</li>
            </ul>

            <form>
                <label for="name">Ваше имя:</label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    placeholder="Введите имя"
                    required
                >

                <label for="email">Email:</label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    placeholder="Введите email"
                    required
                >

                <label for="message">Сообщение:</label>
                <textarea
                    id="message"
                    name="message"
                    rows="5"
                    placeholder="Введите сообщение"
                ></textarea>

                <button type="submit">Отправить</button>
            </form>
        </section>

    </main>

    <!-- Подвал -->
    <footer>
        <p>&copy; 2026 Мой первый сайт. Все права защищены.</p>
    </footer>

</body>
</html>