<!DOCTYPE html>
<html lang="en">
<head>
    <title>Form Submission</title>
    <style>
        .form-container {
            text-align: left; 
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
        }

        form {
            padding: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input[type="text"], input[type="email"], input[type="date"], textarea, div { 
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #cccccc;
        }

        .button {
            padding: 10px 15px;
            color: white;
            background-color: #67595E; 
            border: none;
            cursor: pointer;
        }

        .button:hover {
            background-color: #0056b3; 

        }
    </style>
</head>
<body>

<div class="form-container">
    <h2>Satisfaction Survey</h2>
    <form method=GET action="http://workshop.sps.nyu.edu/~sultans/util/form/formProc.cgi">
        <!-- Name -->
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required>

       <!-- Address -->
        <label for="address">Address:</label>
        <textarea name="address" style="height:50px" required></textarea>

        <!-- Email -->
        <label for="email">Email Address:</label>
        <input type="email" id="email" name="email" required>

        <!-- Date of Birth -->
        <label for="dob">Date of Birth:</label>
        <input type="date" id="dob" name="dob" required>
 
        <!-- Gender -->
        <label for="sex1">Gender:</label>
        <div   id="gender">
        <input type="radio" id="sex1" name="sex" value="M" required>Male
        <input type="radio" id="sex2" name="sex" value="F" required>Female
        </div>

        <!-- Skills -->
        <label for="status1">Marital Status:</label>
        <div   id="status">
        <input type="checkbox" id="status1" name="status">Single
        <input type="checkbox" id="status2" name="status">Married
        <input type="checkbox" id="status3" name="status">With Children
        </div>
        
        <!-- Satisfaction ratio -->
        <label for="phone">Your Satisfaction Range</label>
        <div   id="satisfaction">
        0
        <input type="range" id="satisfy" name="satisfy" required>
        100%
        </div>
                
<!--
        <input type="hidden" name="_EMAIL"    value="your_email@address">
        <input type="hidden" name="_FILE"     value="your_file_name">
        <input type="hidden" name="_REDIRECT" value="http://your_hostname/~your_userid/Thankyou.html">
-->
        <input type="submit" value="Submit" class='button'>
    </form>
</div>

</body>
</html>