Scribd
Upload
4 views18 pages

HTML Ass 1

The document outlines a web application for event registration, featuring a home page with navigation links, a structured registration form, and a success confirmation page. Key features include a video background, responsive design, form validation, and contact information. The HTML and CSS code provided supports the functionality and aesthetics of the website.

Uploaded by

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

HTML Ass 1

The document outlines a web application for event registration, featuring a home page with navigation links, a structured registration form, and a success confirmation page. Key features include a video background, responsive design, form validation, and contact information. The HTML and CSS code provided supports the functionality and aesthetics of the website.

Uploaded by

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

29/01/2023 Rooshitha Jemimah R

2303717620522045

Internet Technology & Web Services ASSIGNMENT-1

Website Overview:

1. Home Page (Event Home)


o Displays a welcome message with an aesthetically appealing video background.
o Provides navigation links to different event categories like IT, AI & Data
Science, Mechanical, Cybersecurity, and ECE events.
o Includes a contact section with an email address, phone number, and physical
address.
2. Event Registration Page
o A well-structured registration form that collects user details such as:
 Name
 Email
 Phone number
 Attendance preference (Online or In-Person)
 Session preference (Workshops, Speakers, or Networking)
 Event date selection
o Validation script ensures correct input (e.g., valid email, 10-digit phone number,
and future event date).
o Buttons for submission and home navigation.
3. Registration Success Page
o Confirms successful registration with a thank-you message.
o Provides a quick link to return to the home page.
o Displays contact information for further inquiries.

Key Features:

Video Background – Enhances visual appeal and engagement.


Responsive Design – Works across different screen sizes.
Form Validation – Prevents incorrect user input.
Confirmation Page – Ensures users know their registration is successful.

INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Home</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet">
</head>
<body>
<video autoplay muted loop id="bg-video">
<source src="background.webm" type="video/mp4">
Your browser does not support the video tag.
</video>
<h1 style="font-size: large; margin-top:300px;"></h1>

<div class="content">
<h1>Welcome to Our Events</h1>
<nav>
<ul>
<li><a href="event-1.html">IT Event</a></li>
<li><a href="event-2.html">AI and DS Event</a></li>
<li><a href="event-3.html">Mechanical Event</a></li>
<li><a href="event-4.html">CyberSecurity Event</a></li>
<li><a href="event-5.html">ECE event</a></li>
</ul>
</nav>
<section class="contact">
<h2>Contact Us</h2>
<p>If you have any questions, feel free to reach out to us:</p>
<ul>
<li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
<li>Phone: +1 234 567 890</li>
<li>Address: Lakshmi Mills, Avinashi Road, 641023</li>
</ul>
</section>
</div>
</body>
</html>
<style>
#bg-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: aldrich;
color: #f1f1f1;
}

.content {
text-align: center;
background: rgba(30, 47, 74, 0.7);
padding: 40px;
border-radius: 15px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
h1 {
font-size: 48px;
margin-bottom: 30px;
color: #fff;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}
nav {
margin-bottom: 40px;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
margin: 15px 0;
}
nav ul li a {
display: inline-block;
padding: 15px 30px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid #fff;
color: white;
text-decoration: none;
font-size: 18px;
font-weight: bold;
border-radius: 8px;
transition: background-color 0.3s, color 0.3s;
width: 450px;
}
nav ul li a:hover {
background: #fff;
color: #333;
}
.contact {
background: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
margin-top: 30px;
}
.contact h2 {
font-size: 28px;
color: #fff;
margin-bottom: 10px;
}
.contact p {
font-size: 16px;
color: #ccc;
}
.contact ul {
list-style: none;
padding: 0;
font-size: 16px;
}
.contact ul li {
margin: 10px 0;
}
.contact ul li a {
color: #00bfff;
text-decoration: none;
transition: color 0.3s;
}
.contact ul li a:hover {
color: #fff;
}
</style>

Events.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Registration</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet">
<style>

body {
font-family: aldrich;
background-color: #002b36;
color: #00bcd4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#bg-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.form-container {
background-color: rgba(30, 47, 74, 0.7);
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
width: 400px;
border: 2px solid #d6e5e7;
}
h1 {
color: #ececec;
font-size: 22px;
text-align: center;
margin-bottom: 20px;
}
.form-group {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.form-group label {
width: 120px;
font-size: 16px;
text-align: left;
color: #6ca5ac;
}
.form-group input,
.form-group select {
flex: 1;
padding: 8px;
font-size: 16px;
border: 1px solid #71a5ac;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.1);
color: #00bcd4;
}
.radio-group {
padding-left: 15px;
display: flex;
gap: 1px;
}
button {
width: 100%;
padding: 10px;
background-color: #175976;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
margin-top: 10px;
}

button:hover {
background-color: #85aab9;
}
.home-btn {
width: 100%;
padding: 10px;
background-color: #85a3a7;
color: rgb(7, 48, 68);
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
.home-btn:hover {
background-color: #4c5b67;
}
</style>
</head>
<body>
<video autoplay muted loop id="bg-video">
<source src="background.webm" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="form-container">
<h1>IT EVENT</h1>
<form action="success.html" method="get" onsubmit="return validateForm()">
<div class="form-group">
<label for="name">First Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your first name"
required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email"
required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" placeholder="Enter your phone number"
required>
</div>
<div class="form-group">
<label>Attendance:</label>
<div class="radio-group">
<input type="radio" id="online" name="attendance" value="Online" required>
<label for="online">Online</label>
<input type="radio" id="in-person" name="attendance" value="In-person"
required>
<label for="in-person">In-person</label>
</div>
</div>
<div class="form-group">
<label for="session">Session Preference:</label>
<select id="session" name="session" required>
<option value="" disabled selected>Select a session</option>
<option value="Workshops">Workshops</option>
<option value="Speakers">Speakers</option>
<option value="Networking">Networking</option>
</select>
</div>
<div class="form-group">
<label for="event-day">Event Date:</label>
<input type="date" id="event-day" name="event-day" required>
</div>
<button type="submit">Register</button>
<button type="button" class="home-btn"
onclick="window.location.href='ndex.html'">Home</button>
</form>
</div>
<script>
function validateForm() {
var name = document.getElementById('name').value.trim();
var email = document.getElementById('email').value.trim();
var phone = document.getElementById('phone').value.trim();
var eventDate = document.getElementById('event-day').value;
var attendance = document.querySelector('input[name="attendance"]:checked');
var session = document.getElementById('session').value;
if (name === "") {
alert("Name must be filled out.");
return false;
}
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}
var phonePattern = /^[0-9]{10}$/;
if (!phonePattern.test(phone)) {
alert("Please enter a valid 10-digit phone number.");
return false;
}
if (!attendance) {
alert("Please select your attendance preference (Online or In-person).");
return false;
}
if (session === "") {
alert("Please select a session.");
return false;
}
if (eventDate === "") {
alert("Event date must be selected.");
return false;
} else {
var currentDate = new Date();
var selectedDate = new Date(eventDate);

if (selectedDate <= currentDate) {


alert("Event date must be in the future.");
return false;
}
}

window.location.href = "success.html";
return false;
}
</script>
</body>
</html>
Success.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Success</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet">
</head>
<body>
<video autoplay muted loop id="bg-video">
<source src="background.webm" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="success-container">
<h1>Registration Successful!</h1>
<p>Your form has been successfully submitted. Thank you for registering.</p>
<button class="home-btn" onclick="window.location.href='ndex.html'">Go to Home</button>
</div>
<div class="contact-us">
<h2>Contact Us</h2>
<p>If you have any questions, feel free to reach out to us:</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</
a></p>
<p>Phone: <a href="tel:+1234567890">+1 234 567 890</a></p>
<p>Address: Lakshmi Mills, Avinashi Road, 641023</p>
</div>
</body>
</html>

Styles.css
body {
font-family: Arial, sans-serif;
background-color: #99a7ab;
color: #00bcd4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column;
}
#bg-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.success-container {
background-color: rgba(0, 43, 54, 0.8);
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
width: 400px;
text-align: center;
}
h1 {
color: #ececec;
font-size: 26px;
margin-bottom: 20px;
}
p{
color: #6ca5ac;
font-size: 18px;
}
.home-btn {
width: 100%;
padding: 10px;
background-color: #3a89a8;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
.home-btn:hover {
background-color: #6c7b8f;
}
.contact-us {
background-color: rgba(0, 43, 54, 0.8);
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
margin-top: 30px;
text-align: center;
}
.contact-us h2 {
color: #ececec;
font-size: 22px;
margin-bottom: 15px;
}
.contact-us p {
font-size: 16px;
color: #6ca5ac;
margin: 10px 0;
}
.contact-us a {
color: #00bcd4;
}
OUTPUT:

You might also like