Ambuyo, Joyce Bernadeth S.
BSIT-2B (WEBDEV)
OUTPUT:
CODE:
<!DOCTYPE html> margin: 20px;
<head> }
<title>Organization Membership Form</title> h1 {
<style> text-align: center;
body { color: #333;
font-family: system-ui; margin-bottom: 20px;
display: flex; font-size: 25px;
justify-content: center; position: relative;
align-items: center; animation: fadeIn 1s ease-in-out;
height: 100vh; }
background: pink; .form-group {
margin: 0; margin-bottom: 15px;
} }
.container { .form-group label {
background: #fff; display: block;
border-radius: 10px; margin-bottom: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); color: #666;
padding: 75px; }
width: 350px; .form-group input[type="text"],
max-width: 400px; .form-group input[type="email"],
.form-group input[type="number"], <div class="container">
.form-group select { <h1>Organization Membership Form</h1>
width: 100%; <form>
padding: 10px; <div class="form-group">
border: 1px solid #ddd; <label for="fullname">Full Name:</label>
border-radius: 5px; <input type="text" id="fullname" name="fullname"
transition: border-color 0.3s ease; required>
} </div>
.form-group input[type="text"]:focus, <div class="form-group">
.form-group input[type="email"]:focus, <label for="fullname">Section:</label>
.form-group input[type="number"]:focus, <input type="text" id="section" name="section"
.form-group select:focus { required>
border-color: #3498db; </div>
outline: none; <div class="form-group">
} <label for="email">Email:</label>
.buttons { <input type="email" id="email" name="email"
display: flex; required>
justify-content: space-between; </div>
} <div class="form-group">
.buttons button { <label for="age">Age:</label>
padding: 10px 20px; <input type="number" id="age" name="age"
border: none; required>
border-radius: 5px; </div>
cursor: pointer; <div class="form-group">
transition: background 0.3s ease; <label for="address">Address:</label>
} <input type="text" id="address" name="address"
.buttons .submit-button { required>
background: #266a20; </div>
color: #fff; <div class="form-group">
} <label for="org">Choice of Organization:</label>
.buttons .reset-button { <select id="org" name="org" required>
background: #333; <option value="itsa">ITSA</option>
color: #fff; <option value="comsa">COMSA</option>
} <option value="appdo">APPDO</option>
.buttons button:hover { <option value="esports">CRIMSON VULPES
opacity: 0.8; ESPORTS</option>
} </select>
@keyframes fadeIn { </div>
from { <div class="buttons">
opacity: 0; <button type="submit"
transform: translateY(-10px); class="submit-button">Submit</button>
} <button type="reset"
to { class="reset-button">Reset</button>
opacity: 1; </div>
transform: translateY(0); </form>
} </div>
} </body>
</style> </html>
</head>
<body>