SuddenFall

## Form
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Elements Showcase</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f4f4f4;
        }
        form {
            width: 100%;
            max-width: 400px;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type="radio"] {
            margin-right: 10px;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background-color: #28a745;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #218838;
        }
        button:active {
            background-color: #1e7e34;
        }
    </style>
</head>
<body>

    <form action="#" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your name" required>

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

        <label for="phone">Phone Number:</label>
        <input type="tel" id="phone" name="phone" placeholder="Enter your phone number" pattern="[0-9]{10}" required>

        <label>Gender:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male" style="display:inline;">Male</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female" style="display:inline;">Female</label>
        <input type="radio" id="other" name="gender" value="other">
        <label for="other" style="display:inline;">Other</label>

        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="">Select your country</option>
            <option value="India">India</option>
            <option value="USA">USA</option>
            <option value="UK">UK</option>
        </select>

        <label for="comments">Comments:</label>
        <textarea id="comments" name="comments" rows="4" placeholder="Enter your comments"></textarea>

        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" placeholder="Enter your message here"></textarea>

        <button type="submit">Submit</button>
    </form>

</body>
</html>


###navbar
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar</title>
    <style>
        /* General Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

        /* Navigation Bar */
        nav {
            background-color: #333;
            padding: 10px 20px;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
        }

        nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
        }

        nav ul li {
            margin: 0 20px;
        }

        nav ul li a {
            text-decoration: none;
            color: white;
            font-weight: bold;
            padding: 8px 16px;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        nav ul li a:hover {
            background-color: #575757;
            border-radius: 4px;
        }

        /* Sample content to show scroll effect with fixed nav */
        .content {
            padding-top: 80px; /* Space for fixed navbar */
            text-align: center;
            margin-top: 40px;
        }

        .content h1 {
            margin-bottom: 20px;
        }

        .content p {
            width: 60%;
            margin: 0 auto;
            line-height: 1.6;
        }
    </style>
</head>
<body>

    <!-- Navigation Bar -->
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

    <!-- Sample Content for Demo -->
    <div class="content">
        <h1>Welcome to My Website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at libero ut risus fermentum elementum. Phasellus ac orci in metus scelerisque vestibulum. Nullam nec justo non leo facilisis feugiat. Aliquam erat volutpat. Nullam at dui non ipsum varius vulputate. In vel urna a elit placerat volutpat. Integer sit amet gravida augue.</p>
    </div>

</body>
</html>