<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Contact Us</title>

    <style>

        * {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

        }

        body {

            background-color: #f4f7f6;

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

            padding: 20px;

        }

        .container {

            background-color: #ffffff;

            padding: 40px;

            border-radius: 12px;

            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

            width: 100%;

            max-width: 500px;

        }

        h1 {

            margin-bottom: 10px;

            font-size: 24px;

            color: #333333;

        }

        p {

            margin-bottom: 25px;

            color: #666666;

            font-size: 14px;

            line-height: 1.5;

        }

        .form-group {

            margin-bottom: 20px;

        }

        label {

            display: block;

            margin-bottom: 8px;

            font-weight: 500;

            color: #444444;

            font-size: 14px;

        }

        input[type="text"],

        input[type="email"],

        textarea {

            width: 100%;

            padding: 12px;

            border: 1px solid #cccccc;

            border-radius: 6px;

            font-size: 16px;

            background-color: #fafafa;

            transition: border-color 0.2s;

        }

        input:focus,

        textarea:focus {

            outline: none;

            border-color: #0076ff;

            background-color: #ffffff;

        }

        textarea {

            resize: vertical;

            min-height: 120px;

        }

        button {

            width: 100%;

            padding: 14px;

            background-color: #0076ff;

            color: white;

            border: none;

            border-radius: 6px;

            font-size: 16px;

            font-weight: 600;

            cursor: pointer;

            transition: background-color 0.2s;

        }

        button:hover {

            background-color: #0056b3;

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>Get in Touch</h1>

        <p>Fill out the form below to send an email directly to us.</p>

        <form action="send-email.php" method="POST">

            <div class="form-group">

                <label for="name">Your Name</label>

                <input type="text" id="name" name="name" required placeholder="John Doe">

            </div>

            <div class="form-group">

                <label for="email">Your Email Address</label>

                <input type="email" id="email" name="email" required placeholder="john@example.com">

            </div>

            <div class="form-group">

                <label for="message">Message</label>

                <textarea id="message" name="message" required placeholder="Type your message here..."></textarea>

            </div>

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

        </form>

    </div>

</body>

</html>