3.html - master - ansukovka/Web

3.html
122 строки3 KB
ansukovka
upload files
19 дек 2025, 16:21
19 дек 2025, 16:217d35c35
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Заявка на ремонт ноутбука</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: #f4f4f4;
        }

        .form-wrapper {
            max-width: 600px;
            margin: 40px auto;
            background: #ffffff;
            padding: 25px;
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 25px;
        }

        form {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 15px;
        }

        label {
            align-self: center;
            font-weight: bold;
        }

        input,
        select,
        textarea,
        button {
            padding: 10px;
            font-size: 14px;
        }

        textarea {
            resize: vertical;
            min-height: 80px;
        }

        button {
            grid-column: span 2;
            background: #007bff;
            color: #ffffff;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background: #0056b3;
        }

        /* Адаптация под мобильные устройства */
        @media (max-width: 600px) {
            form {
                grid-template-columns: 1fr;
            }

            label {
                display: none;
            }

            button {
                grid-column: span 1;
            }
        }
    </style>
</head>

<body>

<div class="form-wrapper">
    <h1>Заявка на ремонт ноутбука</h1>

    <form>
        <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="email">Email</label>
        <input type="email" id="email" name="email" placeholder="Email">

        <label for="model">Модель ноутбука</label>
        <input type="text" id="model" name="model" placeholder="Модель ноутбука">

        <label for="problem">Тип неисправности</label>
        <select id="problem" name="problem">
            <option>Не включается</option>
            <option>Разбит экран</option>
            <option>Перегревается</option>
            <option>Не работает клавиатура</option>
            <option>Другое</option>
        </select>

        <label for="date">Желаемая дата ремонта</label>
        <input type="date" id="date" name="date">

        <label for="urgent">Срочный ремонт</label>
        <input type="checkbox" id="urgent" name="urgent">

        <label for="description">Описание проблемы</label>
        <textarea id="description" name="description" placeholder="Опишите проблему"></textarea>

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

</body>
</html>