Event Registration Form

<!DOCTYPE html>
<title>My Example</title>

.event-reg-container fieldset {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}
.event-reg-container legend {
    padding: 0 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}
.form-group textarea { height: 80px; resize: vertical; }

.checkbox-group .checkbox-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.checkbox-group .checkbox-option input {
    width: auto;
    margin-right: 12px;
}
.checkbox-group .checkbox-option label {
    margin: 0;
    font-weight: normal;
}
.submit-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    background-color: #e67e22;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}
.submit-btn:hover { background-color: #d35400; }
</style>

<div class="event-reg-container">
    <div class="form-header">
        <h2>Annual Tech Conference 2024 Registration</h2>
    </div>
    <form action="#" method="post">
        <fieldset>
            <legend>Your Information</legend>
            <div class="form-group">
                <label for="name">Full Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
            </div>
        </fieldset>

<fieldset>
            <legend>Ticket Information</legend>
            <div class="form-group">
                <label for="ticket-type">Ticket Type</label>
                <select id="ticket-type" name="ticket_type" required>
                    <option value="general">General Admission - $99</option>
                    <option value="vip">VIP Pass - $199</option>
                    <option value="student">Student Pass - $49</option>
                </select>
            </div>
             <div class="form-group">
                <label for="quantity">Quantity</label>
                <input type="number" id="quantity" name="quantity" min="1" max="10" value="1" required>
            </div>
        </fieldset>

<fieldset>
            <legend>Workshop Selection (Optional)</legend>
            <div class="checkbox-group">
                <div class="checkbox-option">
                    <input type="checkbox" id="workshop-js" name="workshops[]" value="js">
                    <label for="workshop-js">Advanced JavaScript</label>
                </div>
                 <div class="checkbox-option">
                    <input type="checkbox" id="workshop-css" name="workshops[]" value="css">
                    <label for="workshop-css">Modern CSS Layouts</label>
                </div>
                 <div class="checkbox-option">
                    <input type="checkbox" id="workshop-ux" name="workshops[]" value="ux">
                    <label for="workshop-ux">UX Design Principles</label>
                </div>
            </div>
        </fieldset>

<fieldset>
            <legend>Special Requirements</legend>
            <div class="form-group">
                 <label for="requirements">Dietary Restrictions or Accessibility Needs</label>
                 <textarea id="requirements" name="requirements" placeholder="Let us know how we can accommodate you..."></textarea>
            </div>
        </fieldset>
        
        <button type="submit" class="submit-btn">Register Now</button>
    </form>
</div>