Scribd
Upload
16 views15 pages

WebTech Exp 2-1

This is experiment 2 for web technology practical file aktu

Uploaded by

tecnofrizz62
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
16 views15 pages

WebTech Exp 2-1

This is experiment 2 for web technology practical file aktu

Uploaded by

tecnofrizz62
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/ 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