Scribd
Upload
4 views12 pages

Advances in Web Technologies

The document presents a Hackathon registration form designed using HTML and CSS. It includes various input fields for user information such as name, email, contact number, university, year of study, gender, skills, additional comments, and an optional photo upload. The form features a visually appealing layout with animations and responsive design elements.

Uploaded by

Min Min
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views12 pages

Advances in Web Technologies

The document presents a Hackathon registration form designed using HTML and CSS. It includes various input fields for user information such as name, email, contact number, university, year of study, gender, skills, additional comments, and an optional photo upload. The form features a visually appealing layout with animations and responsive design elements.

Uploaded by

Min Min
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Advances in Web Technologies

Assessment-1
Name :V. Dhivya Shree
reg.no:22MID0295

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Hackathon Registration</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #A8DADC,
#E6FFFB); /* Light blue and mint green */
color: #333;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-size: cover;
}

h1 {
text-align: center;
font-size: 3em;
margin-bottom: 30px;
color: #FF6F61; /* Peach color for header */
text-transform: uppercase;
font-weight: 600;
}

.moving-text {
color: #3CB371; /* Medium sea green for moving text */
font-size: 1.8em;
font-style: italic;
position: absolute;
top: 15%;
animation: moveText 10s linear infinite;
font-weight: bold;
}

@keyframes moveText {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}

.container {
width: 60%;
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
margin-top: 100px;
color: #333;
border-top: 5px solid #FF6F61; /* Peach accent at the
top */
}

.form-group {
margin-bottom: 20px;
}

label {
font-size: 1.1em;
color: #FF6F61; /* Peach color for labels */
font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
width: 100%;
padding: 12px;
border: 2px solid #A8DADC; /* Light mint green border
*/
border-radius: 6px;
font-size: 16px;
color: #333;
margin-top: 5px;
background-color: #fff;
box-sizing: border-box;
}

textarea {
resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
margin-right: 10px;
}

button {
padding: 12px 18px;
background-color: #FF6F61; /* Peach button */
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 18px;
width: 48%;
margin-top: 20px;
transition: background-color 0.3s;
}

button:hover {
background-color: #FF4F39; /* Darker peach color on
hover */
}

.form-footer {
display: flex;
justify-content: space-between;
gap: 15px;
}

.form-footer button {
width: 48%;
}

.form-group input[type="file"] {
padding: 8px;
border-radius: 6px;
border: 2px solid #A8DADC; /* Light mint green for file
input */
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] {
margin-top: 10px;
}
</style>
</head>
<body>

<div class="moving-text">
<p>Join us for an unforgettable Hackathon
experience!</p>
</div>

<div class="container">
<h1>Hackathon Registration</h1>
<form action="#" method="POST"
enctype="multipart/form-data">

<!-- Text Fields -->


<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required
placeholder="Enter your full name">
</div>

<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required
placeholder="Enter your email">
</div>

<div class="form-group">
<label for="contact">Contact Number:</label>
<input type="tel" id="contact" name="contact"
required placeholder="Enter your contact number">
</div>

<!-- Dropdown Menu -->


<div class="form-group">
<label for="university">University:</label>
<select id="university" name="university" required>
<option value="" disabled selected>Select your
university</option>
<option value="university1">University 1</option>
<option value="university2">University 2</option>
<option value="university3">University 3</option>
</select>
</div>

<div class="form-group">
<label for="year">Year of Study:</label>
<select id="year" name="year" required>
<option value="" disabled selected>Select your
year of study</option>
<option value="1">1st Year</option>
<option value="2">2nd Year</option>
<option value="3">3rd Year</option>
<option value="4">4th Year</option>
</select>
</div>

<!-- Radio Buttons -->


<div class="form-group">
<label>Gender:</label>
<input type="radio" id="male" name="gender"
value="Male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender"
value="Female" required>
<label for="female">Female</label>
<input type="radio" id="other" name="gender"
value="Other" required>
<label for="other">Other</label>
</div>

<!-- Checkboxes -->


<div class="form-group">
<label for="preferences">Select your
interests/skills:</label>
<input type="checkbox" id="frontend" name="skills"
value="Frontend Development">
<label for="frontend">Frontend
Development</label><br>
<input type="checkbox" id="backend" name="skills"
value="Backend Development">
<label for="backend">Backend
Development</label><br>
<input type="checkbox" id="ai" name="skills"
value="AI/ML">
<label for="ai">AI/ML</label><br>
<input type="checkbox" id="design" name="skills"
value="UI/UX Design">
<label for="design">UI/UX Design</label>
</div>

<!-- Textarea -->


<div class="form-group">
<label for="comments">Additional
Comments:</label>
<textarea id="comments" name="comments"
rows="4" placeholder="Write any additional comments or
questions..."></textarea>
</div>

<!-- File Upload for Images -->


<div class="form-group">
<label for="photo">Upload your photo
(Optional):</label>
<input type="file" id="photo" name="photo"
accept="image/*">
</div>

<!-- Form Buttons -->


<div class="form-footer">
<button type="submit">Register</button>
<button type="reset">Reset</button>
</div>
</form>
</div>

</body>
</html>

OUTPUT:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy