0% found this document useful (0 votes)

17 views

Webfilemihr

1. The document describes a student creating three web development programs: a student registration form with validation, a student login form with validation, and a train ticket booking form. 2. The first program creates a student registration form using HTML and CSS that collects information such as name, gender, birthdate, address, and includes form validation. 3. The second program creates a student login form with fields for username, email, and password that includes form validation checks. 4. The third program creates a web page using HTML and CSS to collect train ticket booking information such as name, source/destination, address, travel date, number of passengers, and train number.

Uploaded by

dhruvbarvaliya27

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

0% found this document useful (0 votes)

17 views

Webfilemihr

Uploaded by

dhruvbarvaliya27

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

1

Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

::::::::::::::::::::::::::::::::::::: Web Designing-1 ::::::::::::::::::::::::::::::::::::

Program :- 1

Create a Student Registration Form using HTML and CSS with all
required html validations. Fields are like First_Name, Last_Name, Gender,
Birthdate, Address, City, Mobile_Number, Cast, Subcast, Qualification etc.

CODE:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #222;
margin: 0;
padding: 0;
}

.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #913f92;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
color: white;
2
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

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

input[type="text"],
input[type="date"],
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

select {
height: 40px;
}

input[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
3
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

border: none;
border-radius: 5px;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
<title>Student Registration Form</title>
</head>
<body>
<div class="container">
<h2>Student Registration Form</h2>
<form action="#" method="post">
<div class="first_name">
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required>
</div>
<div class="last_name">
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required>
</div>
<div class="gender">
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
4
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<option value="other">Other</option>
<option value="female">Female</option>
</select>

</div>
<div class="birthdate">
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>

</div>
<div class="address">
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>

</div>
<div class="city">
<label for="city">City:</label>
<input type="text" id="city" name="city" required>

</div>
<div class="mobile_number">
<label for="mobile_number">Mobile Number:</label>
<input type="text" id="mobile_number" name="mobile_number"
pattern="[0-9]{10}" required>

</div>
<div class="cast">
<label for="cast">Cast:</label>
5
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<input type="text" id="cast" name="cast" required>

</div>
<div class="subcast">
<label for="subcast">Subcast:</label>
<input type="text" id="subcast" name="subcast" required>

</div>
<div class="qualification">
<label for="qualification">Qualification:</label>
<input type="text" id="qualification" name="qualification" required>

</div>
<div class="submit">
<input type="submit" value="Register">

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

OUTPUT:
6
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51
7
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 2 :-
2) Create a Student Login Form using HTML and CSS with Proper
validations. Fields are like User_Name, Email ID, Password, etc.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Login</title>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
}
.container {
background-color: rgb(140, 112, 144);
max-width: 400px;
margin: 0 auto;
padding: 40px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
}
8
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

label {
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.error {
color: red;
font-size: 12px;
}
</style>
9
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

</head>
<body>
<div class="container">
<h2>Student Login</h2>
<form id="login-form" action="#" method="post">
<div class="form-group">
<label for="user_name">User Name:</label>
<input type="text" id="user_name" name="user_name" required>
<div class="error" id="user_name_error"></div>
</div>
<div class="form-group">
<label for="email">Email ID:</label>
<input type="email" id="email" name="email" required>
<div class="error" id="email_error"></div>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<div class="error" id="password_error"></div>
</div>
<div class="form-group">
<input type="submit" value="Login">
</div>
</form>
</div>
<script>
const form = document.getElementById('login-form');
10
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

const userNameInput = document.getElementById('user_name');

const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const userNameError = document.getElementById('user_name_error');
const emailError = document.getElementById('email_error');
const passwordError = document.getElementById('password_error');

form.addEventListener('submit', function (e) {

let isValid = true;

// Clear previous error messages

userNameError.textContent = '';
emailError.textContent = '';
passwordError.textContent = '';

// Validate User Name

if (userNameInput.value.trim() === '') {
userNameError.textContent = 'User Name is required';
isValid = false;
}

// Validate Email
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-
Z]{2,4}$/;
if (!emailPattern.test(emailInput.value)) {
emailError.textContent = 'Invalid email format';
isValid = false;
}
11
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

// Validate Password
if (passwordInput.value.length < 6) {
passwordError.textContent = 'Password must be at least 6 characters';
isValid = false;
}

if (!isValid) {
e.preventDefault(); // Prevent form submission if there are errors
}
});
</script>
</body>
</html>

Output:
12
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51
13
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 3 :-
3) Create a web page using HTML with CSS which accept ticket booking
information like Client_Name, Source, Destination, Address,
Travelling_Date, Number_Of_Passenger_Travelling and Train_Number
etc.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color:rgb(140, 112, 144);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

label {
14
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

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

input[type="text"],
input[type="date"],
input[type="number"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

input[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #0056b3;
15
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

}
</style>
<title>Ticket Booking Form</title>
</head>
<body>
<div class="container">
<h2>Ticket Booking Form</h2>
<form action="#" method="post">
<label for="client_name">Client Name:</label>
<input type="text" id="client_name" name="client_name" required>

<label for="source">Source:</label>
<input type="text" id="source" name="source" required>

<label for="destination">Destination:</label>
<input type="text" id="destination" name="destination" required>

<label for="address">Address:</label>
<input type="text" id="address" name="address" required>

<label for="travelling_date">Travelling Date:</label>

<label for="passenger_count">Number of Passengers:</label>

<label for="train_number">Train Number:</label>

16
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<input type="text" id="train_number" name="train_number" required>

<input type="submit" value="Book Ticket">

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

Output:-
17
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51
18
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 4 :-
4) create following structure using Bootstrap Grid System classes.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Grid Example</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="row">
<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid
#ccc; padding: 10px;text-align: center;">col-1</div>
<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid
#ccc; padding: 10px;text-align: center">col-1</div>
<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid
#ccc; padding: 10px;text-align: center">col-1</div>
<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid
#ccc; padding: 10px;text-align: center">col-1</div>
<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid
#ccc; padding: 10px;text-align: center">col-1</div>
<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid
#ccc; padding: 10px;text-align: center">col-1</div>
<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid
#ccc; padding: 10px;text-align: center">col-1</div>
<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid
#ccc; padding: 10px;text-align: center">col-1</div>
19
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid

#ccc; padding: 10px;text-align: center">col-1</div>
<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid
#ccc; padding: 10px;text-align: center">col-1</div>
<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid
#ccc; padding: 10px;text-align: center">col-1</div>
<div class="col-md-1" style="background-color: #f2f2f2; border: 1px solid
#ccc; padding: 10px;text-align: center">col-1</div>

</div>

<div class="row">
<div class="col-md-4" style="background-color: #fcf8e3; border: 1px
solid #ccc; padding: 10px;text-align: center">col 4</div>
<div class="col-md-8" style="background-color: #fcf8e3; border: 1px
solid #ccc; padding: 10px;text-align: center">col 8</div>
</div>
20
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

</body>
</html>

Output:-
21
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 5 :-
5) Create web pages using HTML and Bootstrap which accept book details
like Book_Code, Book_Name, Author_Name, Cost, ISBN_No. etc.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Details Form</title>

border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>

<div class="container">
<div class="form-container">
<h2 class="mb-4">Enter Book Details</h2>
<form>
<div class="form-group">
<label for="bookCode">Book Code:</label>
<input type="text" class="form-control" id="bookCode"
name="bookCode" required>
</div>
<div class="form-group">
<label for="bookName">Book Name:</label>
<input type="text" class="form-control" id="bookName"
name="bookName" required>
</div>
<div class="form-group">
<label for="authorName">Author Name:</label>
<input type="text" class="form-control" id="authorName"
name="authorName" required>
</div>
23
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<div class="form-group">
<label for="cost">Cost:</label>
<input type="number" class="form-control" id="cost" name="cost"
required>
</div>
<div class="form-group">
<label for="isbn">ISBN No.:</label>
<input type="text" class="form-control" id="isbn" name="isbn"
required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</body>
</html>

Output:-
24
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51
25
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 6 :-
6) Create a Contact Form using HTML and Bootstrap with Proper
validations. Fields are like First_Name, Last_Name, Email ID,
Mobile_Number, Message, etc.
Code:-

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

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
.container {
margin-top: 30px;
}
body{
background: #222;
color: white;
}
</style>
</head>
<body>
<div class="container">
26
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<h2>Contact Us</h2>
<form id="contactForm">
<div class="form-row">
<div class="form-group col-md-6">
<label for="firstName">First Name:</label>
<input type="text" class="form-control" id="firstName"
name="firstName" required>
</div>
<div class="form-group col-md-6">
<label for="lastName">Last Name:</label>
<input type="text" class="form-control" id="lastName"
name="lastName" required>
</div>
</div>
<div class="form-group">
<label for="email">Email ID:</label>
<input type="email" class="form-control" id="email" name="email"
required>
</div>
<div class="form-group">
<label for="mobileNumber">Mobile Number:</label>
<input type="tel" class="form-control" id="mobileNumber"
name="mobileNumber" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" id="message" name="message" rows="4"
required></textarea>
</div>
27
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

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

</form>
</div>

<!-- Include Bootstrap JS and jQuery

Output:-
28
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51
29
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 7 :-
7) Create Employee Registration Form using HTML and Bootstrap with
Proper validations. Fields are like Employee Full Name, Gender, Birthdate,
Address, Nationality, Contact_Number, Designation, Salary, Employee
Number, Department, Cast, Qualification, Language Known etc.

Code:-
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
body {
background-color: #222;
}
.container {
margin-top: 50px;
background-color: #333333;
color: white;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
padding: 30px;
}
30
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

.container h2 {
margin-bottom: 30px;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">Employee Registration</h2>
<form id="employeeForm">
<div class="form-group">
<label for="fullName">Full Name:</label>
<input type="text" class="form-control" id="fullName" name="fullName"
required>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<select class="form-control" id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
31
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="birthdate">Birthdate:</label>
<input type="date" class="form-control" id="birthdate" name="birthdate"
required>
</div>

<div class="form-group">
<label for="address">Address</label>
<input type="address" class="form-control" name="address" required>
</div>
<div class="form-group">
<label for="contact_no">contact_no</label>
<input type="number" class="form-control" name="contact_no" required>
</div>
<div class="form-group">
<label for="designation">designation</label>
<input type="designation" class="form-control" name="designation"
required>
</div>
<div class="form-group">
<label for="nationality">nationality</label>
<input type="text" class="form-control" name="nationality" required>
</div>
<div class="form-group">
<label for="salary">salary</label>
32
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<input type="number" class="form-control" name="salary" required>

</div>
<div class="form-group">
<label for="employee_number">employee_number</label>
<input type="text" class="form-control" name="employee_number"
required>
</div>
<div class="form-group">
<label for="department">department</label>
<input type="text" class="form-control" name="department" required>
</div>
<div class="form-group">
<label for="cast">cast</label>
<input type="text" class="form-control" name="cast" required>
</div>
<div class="form-group">
<label for="qualification">qualification</label>
<input type="text" class="form-control" name="qualification" required>
</div>
<div class="form-group">
<label for="language_known">language known</label>
<input type="text" class="form-control" name="language_known"
required>
</div>

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

</form>
33
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

</div>

</body>
</html>

Output:-
34
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51
35
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 8 :-
8) Create following structure using Bootstrap Grid System classes.\
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title>Bootstrap Grid Structure Example</title>
</head>
<body>
<div class="container">

<div class="row">
<div class="col-md-4">
<div class="bg-primary text-white p-3">Column 1</div>
</div>
<div class="col-md-4">
<div class="bg-secondary text-white p-3">Column 2</div>
</div>
<div class="col-md-4">
<div class="bg-success text-white p-3">Column 3</div>
</div>
</div>

36
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<div class="row">
<div class="col-md-6">
<div class="bg-warning p-3">Column 1</div>
</div>
<div class="col-md-6">
<div class="bg-danger text-white p-3">Column 2</div>
</div>
</div>

<div class="row">
<div class="col-md-3">
<div class="bg-info text-white p-3">Column 1</div>
</div>
<div class="col-md-3">
<div class="bg-dark text-white p-3">Column 2</div>
</div>
<div class="col-md-6">
<div class="bg-light p-3">Column 3</div>
</div>
</div>

<div class="row">
<div class="col-md-4">
<div class="bg-primary text-white p-3">Column 1</div>
</div>
37
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<div class="col-md-4">
<div class="bg-secondary text-white p-3">Column 2</div>
</div>
<div class="col-md-4">
<div class="bg-success text-white p-3">Column 3</div>
</div>
</div>
</div>

Output:-
38
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 9 :-
9) Designing a Signup page and login page of Facebook using bootstrap4
and css.
Code:-
SignUP Page:-
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook Signup</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.signup-form,
.login-form {
background: #fff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

.signup-form h2,
.login-form h2 {
text-align: center;
margin-bottom: 20px;
39
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

.btn-block {
margin-top: 10px;
}

.text-center {
text-align: center;
}
</style>
</head>

<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="signup-form">
<h2>Sign Up for Facebook</h2>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="First
Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last
Name">
</div>
<div class="form-group">
40
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<input type="email" class="form-control"

placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control"
placeholder="Password">
</div>
<button type="submit" class="btn btn-primary btn-block">Sign
Up</button>
</form>
</div>
<p class="text-center mt-3">
<a href="9login.html">Already have an account? Log in</a>
</p>
</div>
</div>
</div>

</html>
41
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Output:-

===>>>Login Page:-
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
42
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<title>Facebook Login</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="login-form">
<h2>Log in to Facebook</h2>
<form>
<div class="form-group">
<input type="email" class="form-control"
placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control"
placeholder="Password">
</div>
<button type="submit" class="btn btn-primary btn-block">Log
In</button>
</form>
</div>
<p class="text-center mt-3">
<a href="index.html">Sign up for Facebook</a>
</p>
43
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js
"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></sc
ript>
</body>
</html>

Output:-
44
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 10 :-
10) Design a mark sheet like VNSGU Mark sheet of student and display all
your marks with subjects in a tabular format.

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Mark Sheet</title>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: aliceblue;
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border: 2px solid #333;
background-color: white;
}
45
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

.header {
text-align: center;
}
.student-info {
text-align: left;
}

table {
width: 100%;
border-collapse: initial;
margin-top: 20px;
background-color: burlywood;
}

table, th, td {
border: 1px solid #333;
}

th, td {
padding: 10px;
text-align: center;
}

th {
background-color: #333;
color: #fff;
}
46
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

.total-gpa {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Veer Narmad South Gujarat University</h1>
<h2>Student Mark Sheet</h2>
</div>

<div class="student-info">
<p><strong>Student Name:</strong> Roshan Dudhat</p>
<p><strong>Roll Number:</strong> 19</p>
<p><strong>Program:</strong> Bachelor of Computer Application</p>
<p><strong>Batch:</strong> 2023</p>
<p><strong>Semester:</strong> 3rd</p>
</div>

<table>
<thead>
<tr>
<th>Subject</th>
<th>Maximum Marks</th>
<th>Obtained Marks</th>
47
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mathematics</td>
<td>100</td>
<td>95</td>
<td>A</td>
</tr>
<tr>
<td>Oops</td>
<td>100</td>
<td>98</td>
<td>A+</td>
</tr>
<tr>
<td>Web Design</td>
<td>100</td>
<td>92</td>
<td>A+</td>
</tr>
<tr>
<td>Softwere Eng.</td>
<td>100</td>
<td>88</td>
<td>A</td>
48
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

</tr>
<tr>
<td>Python</td>
<td>100</td>
<td>95</td>
<td>A+</td>
</tr>
</tbody>
</table>

<div class="total-gpa">
<p><strong>Total Marks Obtained:</strong> 467 out of 500</p>
<p><strong>GPA:</strong> 9.8/10.0</p>
</div>
<div class="remarks">
<p><strong>Remarks:</strong> Excellent performance by the
student.</p>
</div>
</div>
</body>
</html>

Output:-
49
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51
50
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 11 :-
11) Design a website for medical store with following pages;
• Home/Index page
• Registration page
• Login page
• Medicine Stock page
• About us page
• Do proper validation from use JavaScript. Using HTML, CSS,
Bootstrap 4 for styling.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medical Store</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Medical Store</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
51
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<ul class="navbar-nav ml-auto">

<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="registration.html">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="medicine.html">Medicine Stock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
</ul>
</div>
</nav>

<div class="container mt-5">
<h1>Welcome to Medical Store</h1>
<p>Your trusted source for medicines and healthcare products.</p>
</div>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
52
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

HOME/INDEX PAGE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medical Store - Home</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Medical Store</a>
53
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="registration.html">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="medicine.html">Medicine Stock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
</ul>
</nav>

<div class="container mt-5">
<h1>Welcome to Medical Store</h1>
<p>Your trusted source for medicines and healthcare products.</p>

</div>
54
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Registration page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration - Medical Store</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Medical Store</a>

</nav>

<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="mb-4">Registration</h2>
<form action="process_registration.php" method="POST">

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

<div class="form-group">
<label for="email">Email</label>
56
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<input type="email" class="form-control" id="email"

name="email" required>
</div>

<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
name="password" required>
</div>

<div class="form-group">
<label for="confirm_password">Confirm Password</label>
<input type="password" class="form-control"
id="confirm_password" name="confirm_password" required>
</div>

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

OUTPUT:
58
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Login page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Medical Store</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Medical Store</a>

</nav>

<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="mb-4">Login</h2>
<form action="process_login.php" method="POST">

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

<div class="form-group">
<label for="password">Password</label>
59
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<input type="password" class="form-control" id="password"

name="password" required>
</div>

<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>

OUTPUT:
60
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Medicine Stock page :

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

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Medical Store</a>

</nav>

<div class="container mt-5">
<h2 class="mb-4">Medicine Stock</h2>
61
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<table class="table table-bordered">

<thead>
<tr>
<th>Medicine Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>

<tr>
<td>Medicine A</td>
<td>100</td>
<td>$10.00</td>
</tr>
<tr>
<td>Medicine B</td>
<td>50</td>
<td>$15.00</td>
</tr>

</tbody>
</table>
</div>

OUTPUT:
62
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

About us page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Medical Store</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Medical Store</a>

</nav>

<div class="container mt-5">
63
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<div class="row">
<div class="col-md-6">
<h2>About Us</h2>
<p>
Welcome to our medical store! We are dedicated to providing high-
quality medicines and healthcare products to our customers. With a team of
experienced professionals, we ensure that you receive the best care and
guidance for your health needs.
</p>
<p>
Our mission is to make healthcare accessible and convenient for
everyone. We take pride in serving our community and strive to maintain the
highest standards of service and integrity.
</p>
</div>
<div class="col-md-6">

<img src="medical_store_image.jpg" alt="Medical Store"
class="img-fluid">
</div>
</div>
</div>

OUTPUT:
64
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51
65
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 12 :-
12) Design a website for Online Shopping containing multiple webpages.
• Home page ➢ (Kids Wear, Women Wear, Mens Wear) Show any
logo to relate with website in Header left side) (Show profile icon in
Header right side)
• Log in Page.
• About us page.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Shopping</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img
src="C:\Users\DELL\OneDrive\Desktop\jr_files\draw_svg20200611-27481-
1gfzrgc.svg.png" alt="Website Logo" height="30"></a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
66
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<a class="nav-link" href="login12.html"><i class="fa fa-user">

<div class="container mt-5">
<h1>Welcome to Online Shopping</h1>
<div class="row">
<div class="col-md-4">
<h3>Kids Wear</h3>

</div>
<div class="col-md-4">
<h3>Women Wear</h3>

</div>
<div class="col-md-4">
<h3>Mens Wear</h3>

</div>
</div>
</div>

67
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

OUTPUT:

LOGIN PAGE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Online Shopping</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
69
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<a class="navbar-brand" href="#"><img

src="C:\Users\DELL\OneDrive\Desktop\jr_files\draw_svg20200611-27481-
1gfzrgc.svg.png" alt="Website Logo" height="30"></a>
</nav>

<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="mb-4">Login</h2>
<form action="process_login.php" method="POST">

<div class="form-group">
<label for="username">Username or Email</label>
<input type="text" class="form-control" id="username"
name="username" required>
</div>

<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
name="password" required>
</div>

<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
70
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

</div>
</div>

OUTPUT:

ABOUT US:
<!DOCTYPE html>
<html lang="en">
71
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Online Shopping</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img
src="C:\Users\DELL\OneDrive\Desktop\jr_files\draw_svg20200611-27481-
1gfzrgc.svg.png" alt="Website Logo" height="30"></a>
</nav>

<div class="container mt-5">
<h2>About Us</h2>
<p>
Welcome to Online Shopping, your one-stop destination for a wide range
of products.We offer a diverse selection of items, including clothing,
electronics, home goods, and much more.
</p>
<p>
72
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Our mission is to provide you with a convenient and enjoyable online

shopping experience. We are committed to offering high-quality products,
exceptional customer service, and competitive prices.
</p>
</div>

OUTPUT:
73
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 13 :-
13) Design a website for Electronics Store containing multiple webpages.
• Home/Index page
• Registration page
• Login page
• Electronic Stock(different type of Variety) page
• About us page
Do proper validation from use JavaScript. using HTML5, CSS, Bootstrap
4 for styling.
HOME/INDEX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electronics Store</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Electronics Store</a>

74
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<ul class="navbar-nav ml-auto">

<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="LOG13.HTML">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REG13.HTML">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ele13.html">Electronic Stock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AB13.HTML">About Us</a>
</li>
</ul>
</nav>

<div class="container mt-5">
<h1>Welcome to Electronics Store</h1>
<p>Your source for the latest electronic gadgets and appliances.</p>

</div>

75
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

OUTPUT:

Registration page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration - Electronics Store</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Electronics Store</a>

</nav>
77
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="mb-4">Registration</h2>
<form action="process_registration.php" method="POST">

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

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

<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
name="password" required>
</div>

<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" class="form-control"
id="confirmPassword" name="confirmPassword" required>
</div>

<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" id="address" name="address"
rows="3" required></textarea>
</div>
78
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

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

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></sc
ript>
</body>
</html>
OUTPUT:

<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="mb-4">Login</h2>
<form action="process_login.php" method="POST">

<div class="form-group">
<label for="username">Username or Email</label>
80
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<input type="text" class="form-control" id="username"

name="username" required>
</div>

<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
name="password" required>
</div>

<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>

OUTPUT:
82
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

ELECTRONICS STOCK:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electronic Stock - Electronics Store</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Electronics Store</a>

</nav>

<div class="container mt-5">
<h2>Electronic Stock</h2>
<div class="row">
<div class="col-md-4">

83
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<div class="card mb-4">

<div class="card-body">
<h5 class="card-title">Product 1</h5>
<p class="card-text">Description of Product 1.</p>
<p class="card-text">Price: $99.99</p>

</div>
</div>
</div>
<div class="col-md-4">

<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Product 2</h5>
<p class="card-text">Description of Product 2.</p>
<p class="card-text">Price: $149.99</p>

</div>
</div>
</div>
<div class="col-md-4">

<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Product 3</h5>
<p class="card-text">Description of Product 3.</p>
<p class="card-text">Price: $199.99</p>
84
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

</div>
</div>
</div>
</div>

</div>

OUTPUT:
85
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

ABOUT US:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Electronics Store</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/* Custom CSS styles can be added here */
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Electronics Store</a>

</nav>

<div class="container mt-5">
<h2>About Us</h2>
<p>
86
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Welcome to Electronics Store, your premier destination for a wide range

of electronic products. We are committed to providing high-quality gadgets and
appliances to our customers.
</p>
<p>
Our team is dedicated to delivering the latest technology trends and
innovations. We aim to make your life easier and more enjoyable with our
products.
</p>
</div>

OUTPUT:
87
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51
88
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 14 :-
14) Design a website for Online Banking System with following pages;
• Registration Customer
• Login Customer
• View Account Details
• Do proper validation from use JavaScript. using HTML5, CSS,
Bootstrap 4 for styling.

REGISTRATION:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Registration</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
}
.container {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
89
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3>Customer Registration</h3>
</div>
<div class="card-body">
<form id="registrationForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username"
name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" class="form-control"
id="confirmPassword" name="confirmPassword" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email"
name="email" required>
</div>
<button type="submit" class="btn btn-primary btn-
block">Register</button>
90
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<a href="LOG14.HTML">Already have an account? Log

in</a>
</form>
</div>
</div>
</div>
</div>
</div>

if (password !== confirmPassword) {

alert('Passwords do not match.');
event.preventDefault();
}
});
</script>
</body>
</html>

OUTPUT:
91
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51
92
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

LOGIN :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Login</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
}
.container {
margin-top: 50px; }
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3>Customer Login</h3>
</div>
<div class="card-body">
<form id="loginForm">
<div class="form-group">
93
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<label for="username">Username</label>
<input type="text" class="form-control" id="username"
name="username" required> </div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary btn-
block">Login</button>
</form>
</div> </div>
</div>
</div>
</div>
</body>
</html>
OUTPUT:
94
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

ACCOUNT DETAILS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View Bank Account Details</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa; }
.container {
margin-top: 50px;}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3>Bank Account Details</h3>
</div>
<div class="card-body">
<div class="form-group">
<label for="accountNumber">Account Number</label>
95
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<input type="text" class="form-control" id="accountNumber"

name="accountNumber" readonly>
</div>
<div class="form-group">
<label for="accountBalance">Account Balance</label>
<input type="text" class="form-control" id="accountBalance"
name="accountBalance" readonly>
</div>
<div class="form-group">
<label for="accountHolder">Account Holder</label>
<input type="text" class="form-control" id="accountHolder"
name="accountHolder" readonly>
</div></div></div>
</div>
</div>
</div></body>
</html>
OUTPUT:
96
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

VALIDATION:
// registration.js
document.getElementById('registrationForm').addEventListener('submit',
function(event) {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;

if (!username || !password) {
alert('Please fill in all fields.');
event.preventDefault();
}
});

// login.js
document.getElementById('loginForm').addEventListener('submit',
function(event) {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;

if (!username || !password) {
alert('Please fill in all fields.');
event.preventDefault();
}
});
97
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

Program 15 :-
15) Design a website for College Management System containing multiple
webpages.
• Home/Index page
• Registration page
• Login page
• About us page
• Do proper validation from use JavaScript.
using CSS, Bootstrap 4 for styling.
Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Management System</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>

.container {
display: flex;
background-color: #047BD5;
color: white;
height: 30vh;
width: 100%;
98
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

.cent {
display: flex;
flex-direction: column;
text-align: center;
margin-left: 24%;
align-items: center;
justify-content: center;
}

p{
font-size: 20px;
}

h1 {
font-size: 3rem;
font-weight: bolder;
}

.container2 {
display: flex;
height: 60vh;
width: 100vw;
background-color: wheat;
flex-direction: row;
text-align: center;
99
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

box-shadow: 10px;
justify-self: center;
justify-content: flex-start;
margin-top: 0;
align-items:center;

.portal1 {
display: flex;
height: fit-content;
margin-right: 46px;
background-color: white;
color: black;
text-align: center;
padding: 10px;
box-shadow: 10px;
flex-direction: column;
width: 20vw;
box-shadow: color(srgb black black black);
margin-left: 350px;

}
100
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

h2 p {
margin: 0;
}

.portal2 {
display: flex;
padding: 10px;
margin-right: 46px;
text-align: center;
height: fit-content;
background-color: white;
color: black;
flex-direction: column;
padding: auto;
box-shadow: color(srgb black black black);

width: 20vw;

.portal3 {
display: flex;
height: fit-content;
background-color: white;
color: black;
flex-direction: column;
101
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

width: 20vw;
padding: 10px;
box-shadow: 29px;
box-shadow: color(srgb black black black);
margin-right: 46px;
padding: auto;
}
</style>
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html">College Management
System</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REG15.HTML">Registration</a>
102
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

</li>
<li class="nav-item">
<a class="nav-link" href="LOG15.HTML">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AB15.HTML">About Us</a>
</li>
</ul>
</div>
</nav>

<h2>Collage Mangement system</h2>

</br>
<p id="p2">your one stop solution for collage operations.</p>
</div>
</div >

<div class="container3">
103
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<div class="container2">
<div class="portal1">
<h2>student portal</h2>
<br>
<p>access you garde ,more.</p>
<br>
<a href="#">Login</a>
</div>
<br>
<div class="portal2">
<h2>student portal</h2>
<br>
<p>access you garde ,more.</p>
<br>
<a href="#">Login</a>
</div>
<br>
<div class="portal3">
<h2>student portal</h2>
<br>
<p>access you garde ,more.</p>
<br>
<a href="#">Login</a>
</div>
</div>
</div>
104
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

</html>
105
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

OUTPUT:

• Registration page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration - College Management System</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h2 class="text-center">Registration</h2>
106
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

</div>
<div class="card-body">
<form>

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

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

<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
id="password" placeholder="Enter your password" required>
</div>

<div class="form-group">
<label for="confirmPassword">Confirm
Password</label>
<input type="password" class="form-control"
id="confirmPassword" placeholder="Confirm your password" required>
</div>

<button type="submit" class="btn btn-primary btn-
block">Register</button>
</form>
</div>
</div>
</div>
</div>
107
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

</div>

OUTPUT:

LOG IN PAGE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - College Management System</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-5">
109
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<div class="row justify-content-center">

<div class="col-md-6">
<div class="card">
<div class="card-header">
<h2 class="text-center">Login</h2>
</div>
<div class="card-body">
<form>

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

<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
id="password" placeholder="Enter your password" required>
</div>

<div class="form-check">
<input type="checkbox" class="form-check-input"
id="rememberMe">
<label class="form-check-label"
for="rememberMe">Remember Me</label>
</div>
110
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<button type="submit" class="btn btn-primary btn-
block">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>

OUTPUT:

ABOUT US:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - College Management System</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-5">
112
Name:- Bhadreshwara Mihir Roll No :-S.Y.BCA Div-1 = 51

<div class="row">
<div class="col-md-6">
<h1>About Us</h1>
<p>A
Welcome to the College Management System website. We are
committed to providing a seamless experience for students, faculty, and
administrators in managing various aspects of college life.
</p>
<p>
Our system helps streamline tasks such as student registration,
course management, attendance tracking, and more. We aim to simplify the
management of academic data and enhance the overall efficiency of educational
institutions.
</p>
<p>
Whether you are a student looking for course information or an
administrator seeking to manage academic operations, our College Management
System offers a user-friendly interface and powerful tools to meet your needs.
</p>
</div>
<div class="col-md-6">

</div>
</div>
</div>

OUTPUT:

::::::::::::::::::::::::::::::::::::: Thank You ::::::::::::::::::::::::::::::::::::

Dance Website
No ratings yet
Dance Website
117 pages
Kinjal Bhandari WD
No ratings yet
Kinjal Bhandari WD
44 pages
Mini Project - Merged
No ratings yet
Mini Project - Merged
53 pages
WebDev_Practical_5
No ratings yet
WebDev_Practical_5
11 pages
Basu-Wd Journal
No ratings yet
Basu-Wd Journal
45 pages
WTassignment3.html
No ratings yet
WTassignment3.html
2 pages
Program 4
No ratings yet
Program 4
3 pages
Web Technology Exp4
No ratings yet
Web Technology Exp4
6 pages
Activity-9 Aman
No ratings yet
Activity-9 Aman
8 pages
Web Lab PGM 4
No ratings yet
Web Lab PGM 4
7 pages
19BCS4016 Msailabmst-Group4
No ratings yet
19BCS4016 Msailabmst-Group4
8 pages
WT LAB FILE (1)
No ratings yet
WT LAB FILE (1)
60 pages
WebTech (P1)
No ratings yet
WebTech (P1)
12 pages
Register
No ratings yet
Register
5 pages
DOCTYPE html-WPS Office
No ratings yet
DOCTYPE html-WPS Office
6 pages
New File 1 - Removed
No ratings yet
New File 1 - Removed
11 pages
Web Tech
No ratings yet
Web Tech
55 pages
program 21
No ratings yet
program 21
7 pages
IWP Digital Assignment -1
No ratings yet
IWP Digital Assignment -1
17 pages
Form 2
No ratings yet
Form 2
3 pages
Code
No ratings yet
Code
8 pages
Assignment Registration
No ratings yet
Assignment Registration
8 pages
Anshul 5
No ratings yet
Anshul 5
6 pages
New Text Document Reg
No ratings yet
New Text Document Reg
8 pages
Experiment Number 2
No ratings yet
Experiment Number 2
4 pages
Saptarshi WEB_TECHNOLOGY PRAC 3
No ratings yet
Saptarshi WEB_TECHNOLOGY PRAC 3
6 pages
5
No ratings yet
5
6 pages
Exp 1,2
No ratings yet
Exp 1,2
23 pages
Crear La Tabla de Formulario
No ratings yet
Crear La Tabla de Formulario
2 pages
Webdevelopmentexercise
No ratings yet
Webdevelopmentexercise
9 pages
Activity 9
No ratings yet
Activity 9
4 pages
HTML
No ratings yet
HTML
9 pages
Activity 9 12410148
No ratings yet
Activity 9 12410148
4 pages
WAD-TOE-Ass-1
No ratings yet
WAD-TOE-Ass-1
4 pages
Lab3 Form Validation
No ratings yet
Lab3 Form Validation
10 pages
#24 Add Student (Frontend)
No ratings yet
#24 Add Student (Frontend)
3 pages
LAB_3
No ratings yet
LAB_3
6 pages
WT 2
No ratings yet
WT 2
3 pages
Web Technology Lab(1)
No ratings yet
Web Technology Lab(1)
10 pages
WT Record Codes
No ratings yet
WT Record Codes
20 pages
Adl Exp1,2
No ratings yet
Adl Exp1,2
5 pages
CSS PR7 Writeup
No ratings yet
CSS PR7 Writeup
11 pages
cssForm
No ratings yet
cssForm
3 pages
Regist1 HTML
No ratings yet
Regist1 HTML
2 pages
Hajjie Sacil Asis
No ratings yet
Hajjie Sacil Asis
4 pages
LAB_2
No ratings yet
LAB_2
5 pages
!DOCTYPE. html form
No ratings yet
!DOCTYPE. html form
2 pages
4 PRGM
No ratings yet
4 PRGM
6 pages
Exp 4
No ratings yet
Exp 4
3 pages
Web Project
No ratings yet
Web Project
21 pages
Form Validations Code
No ratings yet
Form Validations Code
4 pages
WebTech_Exp_2-1
No ratings yet
WebTech_Exp_2-1
15 pages
New Microsoft Word Document
No ratings yet
New Microsoft Word Document
3 pages
Sep 21 1_01 PM
No ratings yet
Sep 21 1_01 PM
2 pages
CSS PR6 Writeup
No ratings yet
CSS PR6 Writeup
13 pages
Web Technology Lab KCS 652
No ratings yet
Web Technology Lab KCS 652
50 pages
5-Text Effects, Animations-08!01!2025 (2)
No ratings yet
5-Text Effects, Animations-08!01!2025 (2)
28 pages
Adl Exp3
No ratings yet
Adl Exp3
5 pages
Rupak 5
No ratings yet
Rupak 5
6 pages
Program 4
No ratings yet
Program 4
2 pages
beyond pretty
From Everand
beyond pretty
B.C. Hatch
No ratings yet
40-Shortcut-Keys-for-Popcorn-Time-using-Keyboard1
No ratings yet
40-Shortcut-Keys-for-Popcorn-Time-using-Keyboard1
7 pages
Getting Files From Ps2
No ratings yet
Getting Files From Ps2
8 pages
7.awp-Module - 7 - MCQ
No ratings yet
7.awp-Module - 7 - MCQ
19 pages
Phishing Url Detection Using CNNLSTM and Random Forest Classifier
No ratings yet
Phishing Url Detection Using CNNLSTM and Random Forest Classifier
6 pages
Canva Ibrahimcimen
100% (1)
Canva Ibrahimcimen
11 pages
emailvendorselection-com-free-cheap-email-marketing-software-comparison-...
No ratings yet
emailvendorselection-com-free-cheap-email-marketing-software-comparison-...
19 pages
Damn Vulnerable Web App (DVWA) Lesson 1 How To Install DVWA in Fedora 14
No ratings yet
Damn Vulnerable Web App (DVWA) Lesson 1 How To Install DVWA in Fedora 14
29 pages
Chapter 4 the Internet and the Tourist 2
No ratings yet
Chapter 4 the Internet and the Tourist 2
41 pages
Chapter 8
No ratings yet
Chapter 8
14 pages
Assisted Lab - 7
No ratings yet
Assisted Lab - 7
3 pages
3manager WhitePaper DataCollector
No ratings yet
3manager WhitePaper DataCollector
26 pages
Aligarh Public School, Aligarh
No ratings yet
Aligarh Public School, Aligarh
1 page
PHP Practical Slips University
No ratings yet
PHP Practical Slips University
5 pages
Scribd
No ratings yet
Scribd
2 pages
Anaconda Project Documentation PDF
No ratings yet
Anaconda Project Documentation PDF
14 pages
Imran Naseem: Professional Summary
No ratings yet
Imran Naseem: Professional Summary
1 page
Cloud Computing - Lab 5
No ratings yet
Cloud Computing - Lab 5
2 pages
Lab 05 - Dropbox Questions
No ratings yet
Lab 05 - Dropbox Questions
2 pages
Final
No ratings yet
Final
102 pages
CMA Unit-2 Solved
No ratings yet
CMA Unit-2 Solved
23 pages
Cheat Sheet - Streamlit Docs
No ratings yet
Cheat Sheet - Streamlit Docs
1 page
Readme
No ratings yet
Readme
8 pages
Angular 14
No ratings yet
Angular 14
21 pages
ALX SE Guide - May - 2022
No ratings yet
ALX SE Guide - May - 2022
30 pages
Nokia_NetAct_Introduction_2021
No ratings yet
Nokia_NetAct_Introduction_2021
40 pages
MCQ2
No ratings yet
MCQ2
15 pages
Citrix Systems, Inc.: Upgrade, Backup, Restore, and Reset Guide
No ratings yet
Citrix Systems, Inc.: Upgrade, Backup, Restore, and Reset Guide
33 pages
[FREE PDF sample] Getting Started with NativeScript Explore the possibility of building truly native cross platform mobile applications using your JavaScript skill NativeScript 1st Edition Anderson ebooks
100% (2)
[FREE PDF sample] Getting Started with NativeScript Explore the possibility of building truly native cross platform mobile applications using your JavaScript skill NativeScript 1st Edition Anderson ebooks
50 pages
COM 225 Week One
No ratings yet
COM 225 Week One
25 pages