<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>

    <style>
        body {
            font-family: Arial, sans-serif; /* Задава шрифта */
            background-color: #e8f0f2; /* Задава цвета на фона */
            color: #333; /* Задава цвета на текста */
            margin: 0; /* Премахва стандартното външно отстояние */
            padding: 30px; /* Добавя вътрешно отстояние в тялото на страницата */
        }

        form {
            background-color: white; /* Задава фона на формуляра */
            width: 350px; /* Задава ширината на формуляра */
            margin: 20px auto; /* Добавя външно отстояние и центрира формуляра */
            padding: 25px; /* Добавя вътрешно отстояние във формуляра */
            border: 2px solid #ccc; /* Добавя рамка около формуляра */
            border-radius: 10px; /* Заобля ъглите */
        }

        h1 {
            text-align: center; /* Центрира заглавието */
            color: darkslateblue; /* Променя цвета на заглавието */
            font-size: 26px; /* Задава размера на шрифта */
            margin-bottom: 25px; /* Добавя отстояние под заглавието */
        }

        label {
            display: block; /* Поставя всеки етикет на отделен ред */
            font-weight: bold; /* Удебелява текста */
            margin-bottom: 5px; /* Добавя отстояние под всеки етикет */
        }

        input, textarea {
            width: 100%; /* Разтяга полетата до цялата налична ширина */
            padding: 10px; /* Добавя вътрешно отстояние в полетата */
            margin-bottom: 15px; /* Добавя отстояние под всяко поле */
            border: 1px solid gray; /* Добавя тънка рамка */
            border-radius: 5px; /* Заобля ъглите на полетата */
            font-size: 15px; /* Задава размера на текста */
            box-sizing: border-box; /* Включва вътрешното отстояние и рамката в ширината */
        }

        textarea {
            height: 100px; /* Задава височината на полето за съобщение */
            resize: vertical; /* Позволява промяна на размера само по вертикала */
        }

        button {
            width: 100%; /* Разтяга бутона до цялата ширина на формуляра */
            padding: 12px; /* Добавя вътрешно отстояние в бутона */
            background-color: darkslateblue; /* Задава фона на бутона */
            color: white; /* Задава цвета на текста в бутона */
            border: none; /* Премахва стандартната рамка */
            border-radius: 5px; /* Заобля ъглите на бутона */
            font-size: 16px; /* Задава размера на текста в бутона */
            cursor: pointer; /* Показва курсор с форма на ръка при посочване */
        }

        button:hover {
            background-color: midnightblue; /* Променя цвета на фона при посочване */
        }
    </style>
</head>
<body>

    <form>
        <h1>Contact Us</h1>

        <label for="name">Full Name</label>
        <input type="text" id="name" placeholder="Enter your name">

        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Enter your email">

        <label for="message">Message</label>
        <textarea id="message" placeholder="Write your message"></textarea>

        <button type="button">Send Message</button>
    </form>

</body>
</html>