Scribd
Upload
10 views

WebTech_Exp_2-1

This is experiment 2 for web technology practical file aktu

Uploaded by

tecnofrizz62
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

WebTech_Exp_2-1

This is experiment 2 for web technology practical file aktu

Uploaded by

tecnofrizz62
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Experiment No: 2

PROGRAM: Design the three Registration form student, faculty, employee


Designing interactive registration forms for students, employees, and faculty requires a
balance of usability, aesthetics, and functionality.
HOME.HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Registration Portal</title>
<link rel="stylesheet" href="home .css">
</head>
<body>
<header>

<div class="container">
<h1>Welcome to the Registration Portal</h1>
<p>Select the registration form that applies to you:</p>
</div>
</header>

<section class="selection-container">
<div class="card" onclick="window.location.href='StudentRegPage.html'">
<h2>Student Registration</h2>
<p>For students to register and manage their academic details.</p>
</div>

<div class="card" onclick="window.location.href='EmployeeRegPPage.html'">


<h2>Employee Registration</h2>
<p>For new employees to register and manage their employment information.</p>
</div>

1
<div class="card" onclick="window.location.href='FacultyRegPage.html'">
<h2>Faculty Registration</h2>

<p>For faculty to register and upload academic qualifications and experience.</p>


</div>
</section>
<footer>
<p>&copy; 2024 Registration Portal. All rights reserved.</p>

</footer>
</body>
</html>

Home.css:

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Roboto', sans-serif;
background-color: #f0f8ff;
color: #333;
}

header {
background-color: #2b547e;
color: white;
padding: 40px 20px;
text-align: center;
}

2
header h1 {
font-size: 2.5rem;
margin-bottom: 10px;

}
header p {
font-size: 1.2rem;
}
.selection-container {

display: flex;
justify-content: space-around;
align-items: center;
padding: 50px 20px;
}

.card {
background-color: white;
border-radius: 10px;
padding: 20px;
width: 30%;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);


text-align: center;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}
.card h2 {
font-size: 1.8rem;

3
color: #2b547e;
margin-bottom: 10px;
}

.card p {
font-size: 1rem;
color: #666;
}
footer {

background-color: #2b547e;
color: white;
text-align: center;
padding: 20px 0;
position: absolute;

width: 100%;
bottom: 0;
}
footer p {
font-size: 0.9rem;

}
StudentRegPage.html:
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<link rel="stylesheet" href="StudentRegPage.css">
</head>
<body>

4
<div class="form-container">
<h2>Student Registration Form</h2>
<form action="#" method="POST" class="registration-form">

<div class="form-group">
<label for="fullName">Full Name</label>
<input type="text" id="fullName" name="fullName" required>
</div>
<div class="form-group">

<label for="dob">Date of Birth</label>


<input type="date" id="dob" name="dob" required>
</div>
<div class="form-group">
<label for="email">Email</label>

<input type="email" id="email" name="email" required>


</div>
<div class="form-group">
<label for="course">Course</label>
<select id="course" name="course" required>

<option value="" disabled selected>Select your course</option>


<option value="computer-science">Computer Science</option>
<option value="engineering">Engineering</option>
<option value="mathematics">Mathematics</option>
</select>

</div>
<div class="form-group">
<label for="year">Year of Study</label>
<input type="number" id="year" name="year" min="1" max="5" required>
</div>
<div class="form-group">

5
<label for="profilePic">Upload Profile Picture</label>
<input type="file" id="profilePic" name="profilePic" required>
</div>

<button type="submit" class="submit-btn">Submit</button>


</form>
</div>
</body>

</html>
StudentRegPage.css:
*{
box-sizing: border-box;
margin: 0;

padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #f0f8ff;

}
.form-container {
max-width: 600px;
margin: 50px auto;
background-color: white;

padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;

6
margin-bottom: 20px;
color: #2b547e;
}

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

label {

display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],

input[type="email"],
input[type="date"],
input[type="number"],
select,
input[type="file"] {

width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
display: block;
width: 100%;
padding: 10px;
background-color: #ffd700;
border: none;

7
color: white;
font-size: 16px;
border-radius: 5px;

cursor: pointer;
}

button:hover {
background-color: #ffcc00;

}
EmployeeRegPage.html
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Registration Form</title>
<link rel="stylesheet" href="EmployeeRegPPage.css">
</head>

<body>
<div class="form-container">
<h2>Employee Registration Form</h2>
<form action="#" method="POST" class="registration-form">
<div class="form-group">

<label for="employeeName">Full Name</label>


<input type="text" id="employeeName" name="employeeName" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>

8
</div>
<div class="form-group">
<label for="department">Department</label>

<select id="department" name="department" required>


<option value="" disabled selected>Select Department</option>
<option value="hr">Human Resources</option>
<option value="it">IT</option>
<option value="finance">Finance</option>

</select>
</div>
<div class="form-group">
<label for="doj">Date of Joining</label>
<input type="date" id="doj" name="doj" required>

</div>
<div class="form-group">
<label for="profilePic">Upload Profile Picture</label>
<input type="file" id="profilePic" name="profilePic" required>
</div>

<button type="submit" class="submit-btn">Register</button>


</form>
</div>
</body>
</html>

EmployeeRegPage.css
*{
box-sizing: border-box;
}
body {
font-family: 'Helvetica', sans-serif;

9
background-color: #f5f5f5;
}
.form-container {

max-width: 600px;
margin: 50px auto;
background-color: white;
padding: 20px;
border-radius: 10px;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);


}
h2 {
text-align: center;
margin-bottom: 20px;

color: #228b22;
}
.form-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="date"],
select,
input[type="file"] {

10
width: 100%;
padding: 10px;
border: 1px solid #ccc;

border-radius: 5px;
}

button {
display: block;

width: 100%;
padding: 10px;
background-color: #ffa500;
border: none;
color: white;

font-size: 16px;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #ff8c00;
}
FacultyRegPage.html
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faculty Registration Form</title>
<link rel="stylesheet" href="FacultyRegPage.css">

11
</head>
<body>
<div class="form-container">

<h2>Faculty Registration Form</h2>


<form action="#" method="POST" class="registration-form">
<div class="form-group">
<label for="facultyName">Full Name</label>
<input type="text" id="facultyName" name="facultyName" required>

</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>

<div class="form-group">
<label for="research">Research Interests</label>
<input type="text" id="research" name="research" required>
</div>
<div class="form-group">

<label for="experience">Years of Experience</label>


<input type="number" id="experience" name="experience" min="0" required>
</div>
<div class="form-group">
<label for="profilePic">Upload CV and Profile Picture</label>

<input type="file" id="profilePic" name="profilePic" required>


</div>
<button type="submit" class="submit-btn">Submit</button>
</form>
</div>
</body>

12
</html>
FacultyRegPage.css
*{

box-sizing: border-box;
}
body {
font-family: 'Georgia', serif;
background-color: #e6e6e6;

}
.form-container {
max-width: 600px;
margin: 50px auto;
background-color: white;

padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
h2 {

text-align: center;
margin-bottom: 20px;
color: #1e90ff;
}
.form-group {

margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;

13
}
input[type="text"],
input[type="email"],

input[type="number"],
input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;

border-radius: 5px;
}
button {
display: block;
width: 100%;

padding: 10px;
background-color: #800020;
border: none;
color: white;
font-size: 16px;

border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #990033;

14
15

You might also like