---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мастер на час — бытовые услуги</title>
</head>
<body>
    <!-- Шапка с меню -->
    <header>
        <div class="logo">Мастер <span>на час</span></div>
        <nav>
            <a href="#home">Главная</a>
            <a href="#services">Услуги</a>
            <a href="#contact">Заявка</a>

            <!-- Выпадающий список -->
            <div class="dropdown">
                <button class="dropbtn">Выбрать услугу ▼</button>
                <div class="dropdown-content">
                    <a href="#services">Сантехника</a>
                    <a href="#services">Электрика</a>
                    <a href="#services">Сборка мебели</a>
                    <a href="#services">Мелкий ремонт</a>
                    <a href="#services">Установка техники</a>
                </div>
            </div>
        </nav>
    </header>

    <!-- Баннер -->
    <div class="hero" id="home">
        <h1>Бытовые услуги на дом</h1>
        <p>Сантехника, электрика, ремонт и сборка мебели — быстро, качественно, недорого</p>
        <a href="#contact" class="btn">Оставить заявку</a>
    </div>

    <!-- Услуги -->
    <section id="services">
        <h2>Наши услуги</h2>
        <div class="services">
            <div class="card">
                <h3>Сантехника</h3>
                <p>Замена смесителей, прочистка засоров, ремонт унитазов</p>
                <div class="price">от 1 500 ₽</div>
            </div>

            <div class="card">
                <h3>Электрика</h3>
                <p>Замена розеток, выключателей, установка светильников</p>
                <div class="price">от 800 ₽</div>
            </div>

            <div class="card">
                <h3>Сборка мебели</h3>
                <p>Шкафы, комоды, кухни, офисная мебель</p>
                <div class="price">от 1 200 ₽</div>
            </div>

            <div class="card">
                <h3>Мелкий ремонт</h3>
                <p>Повесить полку, заменить замок, починить дверь</p>
                <div class="price">от 500 ₽</div>
            </div>

            <div class="card">
                <h3>Установка техники</h3>
                <p>Стиральные машины, посудомойки, вытяжки</p>
                <div class="price">от 1 800 ₽</div>
            </div>

            <div class="card">
                <h3>Выезд мастера</h3>
                <p>Консультация и диагностика на месте</p>
                <div class="price">Бесплатно</div>
            </div>
        </div>
    </section>

    <!-- Форма заявки -->
    <section id="contact">
        <h2>Оставить заявку</h2>
        <form id="orderForm">
            <label for="name">Ваше имя:</label>
            <input type="text" id="name" name="name"
                   placeholder="Введите имя" required>

            <label for="phone">Телефон:</label>
            <input type="tel" id="phone" name="phone"
                   placeholder="+7 (___) ___-__-__" required>

            <label for="service">Выберите услугу:</label>
            <select id="service" name="service" required>
                <option value="">-- Выберите из списка --</option>
                <option value="santehnika">Сантехника</option>
                <option value="elektrika">Электрика</option>
                <option value="mebel">Сборка мебели</option>
                <option value="remont">Мелкий ремонт</option>
                <option value="tehnika">Установка техники</option>
            </select>

            <label for="message">Комментарий:</label>
            <textarea id="message" name="message" rows="4"
                      placeholder="Опишите задачу"></textarea>

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

    <!-- Подвал -->
    <footer>
        <p><strong>Мастер на час</strong></p>
        <p>Телефон: +7 (900) 123-45-67 | Email: master@example.ru</p>
        <p>© 2026 Все права защищены</p>
    </footer>

    <!-- Обработка формы -->
    <script>
        document.getElementById('orderForm').addEventListener('submit', function (e) {
            e.preventDefault();

            const name = document.getElementById('name').value.trim();
            const phone = document.getElementById('phone').value.trim();
            const service = document.getElementById('service').value;

            if (!name || !phone || !service) {
                alert('Пожалуйста, заполните все обязательные поля!');
                return;
            }

            alert(`Спасибо, ${name}! Ваша заявка на услугу "${service}" принята. Мы перезвоним по номеру ${phone}.`);

            this.reset();
        });
    </script>
</body>
</html>