Scribd
Upload
3 views

Web-Design-Lab[1]

The document outlines the creation of a student registration form using HTML, CSS, and JavaScript, featuring various input types such as text, email, and file uploads. It includes form validation and user confirmation for submission and reset actions. Additionally, the document describes a home page for a bookstore website, incorporating a navigation bar, sidebar, and sections for features and services offered by the bookstore.

Uploaded by

aniket.singhhome.in
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Web-Design-Lab[1]

The document outlines the creation of a student registration form using HTML, CSS, and JavaScript, featuring various input types such as text, email, and file uploads. It includes form validation and user confirmation for submission and reset actions. Additionally, the document describes a home page for a bookstore website, incorporating a navigation bar, sidebar, and sections for features and services offered by the bookstore.

Uploaded by

aniket.singhhome.in
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 58

Experiment 02: Make a Student Registration Form

Objective

The objective of this experiment is to create a student registration form and use different type of
input, eg: text, number, email, date, file 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 Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
form {
background: #ffffff;
padding: 20px 40px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: 700px;
margin: auto;
border: 1px solid #ccc;
}
input[type="text"], input[type="number"], input[type="email"], input[type="date"], select,
input[type="file"], textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ccc;
}
.button-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
input[type="submit"], input[type="button"] {
background: #5cb85c;
border: none;
color: white;
padding: 10px;
border-radius: 5px;
cursor: pointer;
width: 48%;
}
input[type="submit"]:hover, input[type="button"]:hover {
background: #4cae4c;
}
.hobbies {
display: flex;
flex-wrap: wrap;
}
.hobbies label {
margin-right: 10px;
}
</style>
<script>
function submitForm(event) {
event.preventDefault();
if (confirm("Are you sure you want to submit the form?")) {
window.location.href = 'submit.html';
}
}

function resetForm(event) {
event.preventDefault();
if (confirm("Are you sure you want to reset the form?")) {
document.querySelector("form").reset();
}
}
</script>
</head>
<body>
<center>
<h2>Student Registration Form</h2>
</center>
<form onsubmit="submitForm(event)">
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required>

<label for="middle_name">Middle Name:</label>


<input type="text" id="middle_name" name="middle_name">

<label for="last_name">Last Name:</label>


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

<label for="father_name">Father's Name:</label>


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

<label for="mobile">Mobile Number:</label>


<input type="number" id="mobile" name="mobile" pattern="[0-9]{10}" min="1000000000"
max="9999999999" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

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


<input type="date" id="dob" name="dob" required>

<label for="gender">Gender:</label><br>
<label><input type="radio" id="male" name="gender" value="male" required> Male</label>
<label><input type="radio" id="female" name="gender" value="female"> Female</label>
<label><input type="radio" id="other" name="gender" value="other"> Other</label><br>

<label for="nationality">Nationality:</label>
<input type="text" id="nationality" name="nationality" required>

<label for="course">Course:</label>
<select id="course" name="course" required>
<option value="BTech">BTech</option>
<option value="BBA">BBA</option>
<option value="BCA">BCA</option>
<option value="Other">Other</option>
</select>

<label for="branch">Branch:</label>
<input type="text" id="branch" name="branch" required>

<label for="blood_group">Blood Group:</label>


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

<label for="address">Address:</label>
<textarea id="address" name="address" rows="3" required></textarea>

<label>Hobbies:</label>
<div class="hobbies">
<label><input type="checkbox" name="hobbies" value="Reading"> Reading</label>
<label><input type="checkbox" name="hobbies" value="Travelling"> Travelling</label>
<label><input type="checkbox" name="hobbies" value="Sports"> Sports</label>
<label><input type="checkbox" name="hobbies" value="Music"> Music</label>
<label><input type="checkbox" name="hobbies" value="Art"> Art</label>
<label><input type="checkbox" name="hobbies" value="Cooking"> Cooking</label>
</div>

<label for="marksheet">Upload 12th Marksheet:</label>


<input type="file" id="marksheet" name="marksheet" accept="application/pdf,image/*"
required>

<label for="photo">Upload Photo:</label>


<input type="file" id="photo" name="photo" accept="image/*" required>

<div class="button-container">
<input type="submit" value="Register">
<input type="button" value="Reset" onclick="resetForm(event)">
</div>
</form>

</body>
</html>
Output
Experiment 03: Make a Home Page For Bookstore Website

Objective

The objective of this experiment is to create a Home Page for Book Store Website with NavBar
and a SideBar.

Code for the Home Page:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - College Bookstore</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #004080;
color: white;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-container {
display: flex;
align-items: center;
}
.logo {
width: 50px;
height: 50px;
margin-right: 1rem;
}
.college-name {
font-size: 1.5rem;
font-weight: bold;
}
nav a {
color: white;
text-decoration: none;
margin-left: 1rem;
}
.main-container {
display: flex;
min-height: calc(100vh - 80px);
}
.sidebar {
width: 250px;
background-color: #ffffff;
padding: 2rem 1rem;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar h3 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #004080;
text-align: center;
font-size: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.sidebar h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background-color: #004080;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar li {
margin-bottom: 1rem;
}
.sidebar a {
display: block;
color: #004080;
text-decoration: none;
padding: 0.75rem 1rem;
background-color: #f0f8ff;
border-radius: 5px;
transition: all 0.3s ease;
text-align: left;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.sidebar a::before {
content: '';
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,64,128,0.1);
transition: all 0.3s ease;
}
.sidebar a:hover::before {
left: 0;
}
.sidebar a:hover {
transform: translateX(5px);
color: #003366;
}
.content {
flex-grow: 1;
padding: 2rem;
background: linear-gradient(to bottom right, #ffffff, #e0eafc);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.welcome-section {
text-align: center;
margin-bottom: 2rem;
}
.welcome-section h1 {
color: #004080;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.search-bar {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.search-bar input {
width: 60%;
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #004080;
border-radius: 5px 0 0 5px;
}
.search-bar button {
padding: 0.5rem 1rem;
font-size: 1rem;
background-color: #004080;
color: white;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.features {
margin-bottom: 2rem;
}
.features h2 {
text-align: center;
color: #004080;
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.feature-list {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.feature-item {
background-color: #ffffff;
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.feature-icon {
background-color: #e0eafc;
color: #004080;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
margin-right: 1rem;
}
.feature-content {
flex: 1;
}
.feature-content h3 {
color: #004080;
margin: 0 0 0.5rem 0;
}
.feature-content p {
color: #666;
margin: 0;
}
.feature-action {
margin-left: 1rem;
}
.feature-action button {
background-color: #004080;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.3s ease;
}
.feature-action button:hover {
background-color: #003366;
}
.top-picks h2 {
text-align: center;
color: #004080;
margin-bottom: 1.5rem;
}
.featured-books {
display: flex;
overflow-x: auto;
gap: 1rem;
padding-bottom: 1rem;
}
.book-card {
flex: 0 0 auto;
width: 220px;
background-color: #f8f8f8;
border-radius: 15px;
padding: 1.5rem;
transition: transform 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
.book-card:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.book-card img {
width: 150px;
height: 200px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 1rem;
}
.book-card h3 {
color: #004080;
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.book-card p {
color: #666;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.book-card .price {
font-weight: bold;
color: #004080;
}
.assistance {
text-align: center;
margin-top: 2rem;
}
.assistance h2 {
color: #004080;
margin-bottom: 1rem;
}
.assistance button {
background-color: #004080;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="assets/logo.png" alt="College Logo" class="logo">
<div class="college-name">Inderprastha Engineering College Bookstore</div>
</div>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="catalogue.html">Catalogue</a>
</nav>
</header>

<div class="main-container">
<aside class="sidebar">
<h3>Engineering Subjects</h3>
<ul>
<li><a href="#">Computer Science</a></li>
<li><a href="#">Electrical Engineering</a></li>
<li><a href="#">Mechanical Engineering</a></li>
<li><a href="#">Civil Engineering</a></li>
<li><a href="#">Aerospace Engineering</a></li>
</ul>
</aside>

<div class="content">
<section class="welcome-section">
<h1>Welcome to IPEC Bookstore</h1>
<p>Your one-stop shop for all your academic book needs!</p>
</section>

<section class="search-bar">
<input type="text" placeholder="Search for books, authors, or ISBN...">
<button>Search</button>
</section>

<section class="features">
<h2>Our Services</h2>
<ul class="feature-list">
<li class="feature-item">
<div class="feature-icon"> </div>
<div class="feature-content">
<h3>Browse Catalog</h3>
<p>Explore our extensive collection of textbooks and reference materials.</p>
</div>
<div class="feature-action">
<button>View Catalog</button>
</div>
</li>
<li class="feature-item">
<div class="feature-icon"> </div>
<div class="feature-content">
<h3>Quick Order</h3>
<p>Know what you need? Place a quick order with minimal steps.</p>
</div>
<div class="feature-action">
<button>Order Now</button>
</div>
</li>
<li class="feature-item">
<div class="feature-icon"> </div>
<div class="feature-content">
<h3>Rental Options</h3>
<p>Save money by renting textbooks for the semester.</p>
</div>
<div class="feature-action">
<button>Rent Books</button>
</div>
</li>
</ul>
</section>

<section class="top-picks">
<h2>Top Picks</h2>
<div class="featured-books">
<div class="book-card">
<img src="assets/IntroToAlgo.jpg" alt="Introduction to Algorithms" height="200">
<h3>Introduction to Algorithms</h3>
<p>by Thomas H. Cormen</p>
<p class="price">₹1900.00</p>
</div>
<div class="book-card">
<img src="assets/ElectricCkt.jpg" alt="Electric Circuits" height="200">
<h3>Electric Circuits</h3>
<p>by Charles K. Alexandra</p>
<p class="price">₹1500.00</p>
</div>
<div class="book-card">
<img src="assets/MechMat.jpg" alt="Mechanics of Materials" height="200">
<h3>Mechanics of Materials</h3>
<p>by Barry J. Goodno</p>
<p class="price">₹1720.00</p>
</div>
<div class="book-card">
<img src="assets/StructAnal.jpg" alt="Structural Analysis" height="200">
<h3>Structural Analysis</h3>
<p>by R.C. Hibbeler</p>
<p class="price">₹1280.00</p>
</div>
</div>
</section>

<section class="assistance">
<h2>Need Assistance?</h2>
<p>Our team is here to help you find the right books for your courses.</p>
<button>Contact Support</button>
</section>
</div>
</div>
</body>
</html>
Output [Home Page]
Experiment 04: Make a Login Page For Bookstore Website

Objective

The objective of this experiment is to create a Login Page for Book Store Website with NavBar
and a SideBar.

Code for the 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 - College Bookstore</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #004080;
color: white;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-container {
display: flex;
align-items: center;
}
.logo {
width: 50px;
height: 50px;
margin-right: 1rem;
}
.college-name {
font-size: 1.5rem;
font-weight: bold;
}
nav a {
color: white;
text-decoration: none;
margin-left: 1rem;
}
.main-container {
display: flex;
min-height: calc(100vh - 80px);
}
.sidebar {
width: 250px;
background-color: #ffffff;
padding: 2rem 1rem;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar h3 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #004080;
text-align: center;
font-size: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.sidebar h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background-color: #004080;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar li {
margin-bottom: 1rem;
}
.sidebar a {
display: block;
color: #004080;
text-decoration: none;
padding: 0.75rem 1rem;
background-color: #f0f8ff;
border-radius: 5px;
transition: all 0.3s ease;
text-align: left;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.sidebar a::before {
content: '';
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,64,128,0.1);
transition: all 0.3s ease;
}
.sidebar a:hover::before {
left: 0;
}
.sidebar a:hover {
transform: translateX(5px);
color: #003366;
}
.content {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
background: linear-gradient(to bottom right, #ffffff, #e0eafc);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.login-form {
width: 100%;
max-width: 500px;
padding: 3rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.login-form h2 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #004080;
font-size: 2rem;
text-align: center;
}
.login-form label {
display: block;
margin-top: 1rem;
font-weight: bold;
color: #333;
}
.login-form input {
width: 100%;
padding: 0.75rem;
margin-top: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 1rem;
}
.login-form button {
width: 100%;
margin-top: 1.5rem;
padding: 0.75rem;
background-color: #004080;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}
.login-form button:hover {
background-color: #003366;
}
.forgot-password {
display: block;
text-align: right;
margin-top: 1rem;
color: #004080;
text-decoration: none;
}
.forgot-password:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="assets/logo.png" alt="College Logo" class="logo">
<div class="college-name">Inderprastha Engineering College Bookstore</div>
</div>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="catalogue.html">Catalogue</a>
</nav>
</header>

<div class="main-container">
<aside class="sidebar">
<h3>Engineering Subjects</h3>
<ul>
<li><a href="#">Computer Science</a></li>
<li><a href="#">Electrical Engineering</a></li>
<li><a href="#">Mechanical Engineering</a></li>
<li><a href="#">Civil Engineering</a></li>
<li><a href="#">Aerospace Engineering</a></li>
</ul>
</aside>

<div class="content">
<form class="login-form">
<h2>Login</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<button type="submit">Login</button>

<a href="#" class="forgot-password">Forgot Password?</a>


</form>
</div>
</div>
</body>
</html>
Output [Login Page]
Experiment 05: Make a Registration Page For Bookstore Website

Objective

The objective of this experiment is to create a Registration Page for Book Store Website with
NavBar and a SideBar.

Code for the 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 Bookstore</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #004080;
color: white;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-container {
display: flex;
align-items: center;
}
.logo {
width: 50px;
height: 50px;
margin-right: 1rem;
}
.college-name {
font-size: 1.5rem;
font-weight: bold;
}
nav a {
color: white;
text-decoration: none;
margin-left: 1rem;
}
.main-container {
display: flex;
min-height: calc(100vh - 80px);
}
.sidebar {
width: 250px;
background-color: #ffffff;
padding: 2rem 1rem;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar h3 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #004080;
text-align: center;
font-size: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.sidebar h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background-color: #004080;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar li {
margin-bottom: 1rem;
}
.sidebar a {
display: block;
color: #004080;
text-decoration: none;
padding: 0.75rem 1rem;
background-color: #f0f8ff;
border-radius: 5px;
transition: all 0.3s ease;
text-align: left;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.sidebar a::before {
content: '';
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,64,128,0.1);
transition: all 0.3s ease;
}
.sidebar a:hover::before {
left: 0;
}
.sidebar a:hover {
transform: translateX(5px);
color: #003366;
}
.content {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
background: linear-gradient(to bottom right, #ffffff, #e0eafc);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.registration-form {
width: 100%;
max-width: 600px;
padding: 2rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.registration-form h2 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #004080;
font-size: 2rem;
text-align: center;
}
.registration-form label {
display: block;
margin-top: 1rem;
font-weight: bold;
color: #333;
}
.registration-form input[type="text"],
.registration-form input[type="password"],
.registration-form input[type="email"],
.registration-form input[type="tel"],
.registration-form input[type="date"],
.registration-form textarea {
width: 100%;
padding: 0.75rem;
margin-top: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 1rem;
}
.registration-form .radio-group,
.registration-form .checkbox-group {
margin-top: 0.5rem;
}
.registration-form .radio-group label,
.registration-form .checkbox-group label {
display: inline;
margin-right: 1rem;
font-weight: normal;
}
.registration-form button {
width: 100%;
margin-top: 1.5rem;
padding: 0.75rem;
background-color: #004080;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}
.registration-form button:hover {
background-color: #003366;
}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="assets/logo.png" alt="College Logo" class="logo">
<div class="college-name">Inderprastha Engineering College Bookstore</div>
</div>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="catalogue.html">Catalogue</a>
</nav>
</header>

<div class="main-container">
<aside class="sidebar">
<h3>Engineering Subjects</h3>
<ul>
<li><a href="#">Computer Science</a></li>
<li><a href="#">Electrical Engineering</a></li>
<li><a href="#">Mechanical Engineering</a></li>
<li><a href="#">Civil Engineering</a></li>
<li><a href="#">Aerospace Engineering</a></li>
</ul>
</aside>

<div class="content">
<form class="registration-form">
<h2>Registration Form</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" name="phone" required>

<label>Sex:</label>
<div class="radio-group">
<input type="radio" id="male" name="sex" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="sex" value="female" required>
<label for="female">Female</label>
</div>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>

<button type="submit">Register</button>
</form>
</div>
</div>
</body>
</html>
Output [Registration Page]
Experiment 06: Make a Catalogue Page For Bookstore Website

Objective

The objective of this experiment is to create a Catalogue Page for Book Store Website with
NavBar and a SideBar.

Code for the Catalogue Page:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalogue - College Bookstore</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #004080;
color: white;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-container {
display: flex;
align-items: center;
}
.logo {
width: 50px;
height: 50px;
margin-right: 1rem;
}
.college-name {
font-size: 1.5rem;
font-weight: bold;
}
nav a {
color: white;
text-decoration: none;
margin-left: 1rem;
}
.main-container {
display: flex;
min-height: calc(100vh - 80px);
}
.sidebar {
width: 250px;
background-color: #ffffff;
padding: 2rem 1rem;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar h3 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #004080;
text-align: center;
font-size: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.sidebar h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background-color: #004080;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar li {
margin-bottom: 1rem;
}
.sidebar a {
display: block;
color: #004080;
text-decoration: none;
padding: 0.75rem 1rem;
background-color: #f0f8ff;
border-radius: 5px;
transition: all 0.3s ease;
text-align: left;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.sidebar a::before {
content: '';
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,64,128,0.1);
transition: all 0.3s ease;
}
.sidebar a:hover::before {
left: 0;
}
.sidebar a:hover {
transform: translateX(5px);
color: #003366;
}
.content {
flex-grow: 1;
padding: 2rem;
background: linear-gradient(to bottom right, #ffffff, #e0eafc);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.catalogue-header {
text-align: center;
margin-bottom: 2rem;
}
.catalogue-header h1 {
color: #004080;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.book-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 2rem;
}
.book-card {
background-color: #f8f8f8;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.book-card:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.book-card img {
width: 150px;
height: 200px;
object-fit: cover;
border-radius: 10px;
margin: 0 auto 1rem;
}
.book-card h3 {
color: #004080;
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.book-card p {
color: #666;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.book-card .price {
font-weight: bold;
color: #004080;
margin-bottom: 1rem;
}
.book-card button {
background-color: #004080;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: auto;
font-size: 1rem;
}
.book-card button:hover {
background-color: #003366;
}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="assets/logo.png" alt="College Logo" class="logo">
<div class="college-name">Inderprastha Engineering College Bookstore</div>
</div>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="catalogue.html">Catalogue</a>
</nav>
</header>
<div class="main-container">
<aside class="sidebar">
<h3>Engineering Subjects</h3>
<ul>
<li><a href="#">Computer Science</a></li>
<li><a href="#">Electrical Engineering</a></li>
<li><a href="#">Mechanical Engineering</a></li>
<li><a href="#">Civil Engineering</a></li>
<li><a href="#">Aerospace Engineering</a></li>
</ul>
</aside>

<div class="content">
<section class="catalogue-header">
<h1>Book Catalogue</h1>
<p>Browse our collection of engineering textbooks</p>
</section>

<section class="book-grid">
<div class="book-card">
<img src="assets/IntroToAlgo.jpg" alt="Introduction to Algorithms" height="200">
<h3>Introduction to Algorithms</h3>
<p>by Thomas H. Cormen</p>
<p class="price">₹1900.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/ElectricCkt.jpg" alt="Electric Circuits" height="200">
<h3>Electric Circuits</h3>
<p>by James W. Nilsson</p>
<p class="price">₹1500.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/MechMat.jpg" alt="Mechanics of Materials" height="200">
<h3>Mechanics of Materials</h3>
<p>by Russell C. Hibbeler</p>
<p class="price">₹1720.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/StructAnal.jpg" alt="Structural Analysis" height="200">
<h3>Structural Analysis</h3>
<p>by R.C. Hibbeler</p>
<p class="price">₹1280.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/DataStructAlgo.jpg" alt="Data Structures and Algorithms"
height="200">
<h3>Data Structures and Algorithms</h3>
<p>by Michael T. Goodrich</p>
<p class="price">₹1080.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/SysCtrl_.jpg" alt="Control Systems Engineering" height="200">
<h3>Control Systems Engineering</h3>
<p>by Norman S. Nise</p>
<p class="price">₹2000.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/thermo.jpg" alt="Thermodynamics: An Engineering Approach"
height="200">
<h3>Thermodynamics: An Engineering Approach</h3>
<p>by Yunus A. Cengel</p>
<p class="price">₹1660.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/fluid.jpg" alt="Fluid Mechanics" height="200">
<h3>Fluid Mechanics</h3>
<p>by Frank M. White</p>
<p class="price">₹1500.00</p>
<button>Add to Cart</button>
</div>
</section>
</div>
</div>
</body>
</html>
Output [Catalogue Page]

Experiment 07: Use CSS Selectors To Design 2 Web Pages


Objective
Design a web page using CSS which includes the following:
1) Use different font, styles: In the style definition you define how each selector should
work(font, color etc.). Then, in the body of your pages, you refer to these selectors to activate
the styles.
2) Set a background image for both the page and single elements on the page

Code
<!-- Page1.html --> [FIRST PAGE]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CS Engineering Hub - Home</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="page1">
<header>
<h1>CS Engineering Hub</h1>
<p class="subtitle">Exploring the Frontiers of Computer Science</p>
</header>
<main>
<section class="content">
<h2>Welcome to CS Engineering Hub</h2>
<p>Dive into the fascinating world of Computer Science Engineering with us. From
algorithms to artificial intelligence, we cover the latest advancements and foundational concepts
that shape our digital world.</p>
<p>Whether you're a seasoned developer or a curious beginner, our platform offers insights,
tutorials, and resources to enhance your understanding of computer science and its
applications.</p>
</section>
<section class="content">
<h2>Featured Topics</h2>
<ul>
<li>Machine Learning and AI: Transforming Industries</li>
<li>Blockchain Technology: Beyond Cryptocurrencies</li>
<li>Quantum Computing: The Next Frontier</li>
<li>Cybersecurity: Protecting Digital Assets</li>
</ul>
</section>
</main>
<footer>
<p>Computer Science Engineering Hub</p>
<a href="page2.html">Explore Our Resources →</a>
</footer>
</body>
</html>

<!-- Page2.html --> [SECOND PAGE]


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CS Engineering Hub - Resources</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="page2">
<header>
<h1>CS Engineering Resources</h1>
<p class="subtitle">Tools and Knowledge for the Modern Engineer</p>
</header>
<main>
<section class="content">
<h2>Learning Paths</h2>
<p>Enhance your skills with our curated learning paths designed for various specializations
in Computer Science Engineering.</p>
<ul>
<li>Full Stack Web Development: From Frontend to Backend</li>
<li>Data Science and Analytics: Uncovering Insights from Data</li>
<li>Cloud Computing: Scalable and Flexible Solutions</li>
<li>Internet of Things (IoT): Connecting the Physical and Digital</li>
</ul>
</section>
<section class="content">
<h2>Latest in CS Research</h2>
<p>Stay updated with cutting-edge research in Computer Science Engineering. Our team of
experts curates and summarises the most impactful papers and breakthroughs in the field.</p>
<p>From advancements in natural language processing to innovations in computer vision, we
keep you informed about the technologies shaping our future.</p>
</section>
</main>
<footer>
<p>Computer Science Engineering Hub</p>
<a href="page1.html">← Back to Home</a>
</footer>
</body>
</html>
<!-- Styles.css --> [EXTERNAL CSS FILE]
body {
line-height: 1.6;
padding: 0;
margin: 50px;
background-size: cover;
background-position: center;
background-attachment: fixed;
}

header h1 {
font-size: 2.5em;
text-align: center;
margin-top: 20px;
}

header .subtitle {
font-style: italic;
font-weight: 300;
text-align: center;
margin-top: 5px;
}

main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
}

main .content h2 {
font-size: 1.8em;
margin-bottom: 10px;
}

main .content p {
font-size: 1em;
line-height: 1.6;
padding: 0 20px;
}

ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom: 10px;
padding-left: 20px;
position: relative;
}

li::before {
content: '>';
position: absolute;
left: 0;
font-family: monospace;
font-weight: bold;
}

footer {
text-align: center;
margin-top: 30px;
padding: 20px;
border-radius: 10px;
}

footer p {
margin-bottom: 10px;
}

a{
text-decoration: none;
font-weight: bold;
}

/* Page 1 specific styles (Dark theme) */


body.page1 {
font-family: Arial, sans-serif;
background-image: url('background1.jpg');
color: #e0e0e0;
}

body.page1 header h1 {
color: #4fc3f7;
}

body.page1 header .subtitle {


color: #b3e5fc;
}

body.page1 main {
background-color: rgba(33, 33, 33, 0.8);
}

body.page1 main .content h2 {


color: #81d4fa;
}

body.page1 main .content p {


color: #e0e0e0;
}

body.page1 a {
color: #4fc3f7;
}

body.page1 a:hover {
color: #81d4fa;
}

body.page1 li::before {
color: #4fc3f7;
}

body.page1 footer {
background-color: rgba(25, 25, 25, 0.8);
}

/* Page 2 specific styles (Light theme) */


body.page2 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-image: url('background2.jpg');
color: #333333;
}

body.page2 header h1 {
color: #1976d2;
}

body.page2 header .subtitle {


color: #2196f3;
}

body.page2 main {
background-color: rgba(255, 255, 255, 0.8);
}

body.page2 main .content h2 {


color: #1565c0;
}

body.page2 main .content p {


color: #333333;
}

body.page2 a {
color: #1976d2;
}

body.page2 a:hover {
color: #1565c0;
}

body.page2 li::before {
color: #1976d2;
}

body.page2 footer {
background-color: rgba(240, 240, 240, 0.8);
}

Output [First Page]


Output [Second Page]
Experiment 08: Uses of background-repeat property and styles
for links

Objective

The objective of this experiment is to create web pages that:-


1) Control the repetition of the image with the background-repeat property.
2) Define styles for links as A:link A:visited A:active A:hover

Code
<!-- Space.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Repeat - repeat</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background-image: url("https://cdn.vectorstock.com/i/1000x1000/76/13/colorful-square-
blank-background-design-vector-4007613.webp");
background-repeat: space;
background-size: 100px 100px;
background-color: #f0f8ff;
font-family: "Arial", sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #333;
}
.container {
padding: 20px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
}
h1 {
color: #085454;
}
p{
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Background Repeat: Space</h1>
<p>
The image repeats both horizontally and vertically to fill the page.
</p>
</div>
</body>
</html>

<!-- RepeatX.html -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Repeat - repeat</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background-image: url("https://cdn.vectorstock.com/i/1000x1000/76/13/colorful-square-
blank-background-design-vector-4007613.webp");
background-repeat: repeat-x;
background-size: 100px 100px;
background-color: #f0f8ff;
font-family: "Arial", sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #333;
}
.container {
padding: 20px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
}
h1 {
color: #085454;
}
p{
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Background Repeat: Repeat X</h1>
<p>The image repeats horizontally to fill the page.</p>
</div>
</body>
</html>

<!-- RepeatY.html -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Repeat - repeat</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background-image: url("https://cdn.vectorstock.com/i/1000x1000/76/13/colorful-square-
blank-background-design-vector-4007613.webp");
background-repeat: repeat-y;
background-size: 100px 100px;
background-color: #f0f8ff;
font-family: "Arial", sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #333;
}
.container {
padding: 20px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
}
h1 {
color: #085454;
}
p{
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Background Repeat: Repeat Y</h1>
<p>The image repeats vertically to fill the page.</p>
</div>
</body>
</html>
<!-- NoRepeat.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Repeat - repeat</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background-image: url("https://cdn.vectorstock.com/i/1000x1000/76/13/colorful-square-
blank-background-design-vector-4007613.webp");
background-repeat: no-repeat;
background-size: 100px 100px;
background-color: #f0f8ff;
font-family: "Arial", sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #333;
}
.container {
padding: 20px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
}
h1 {
color:#085454;
}
p{
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Background Repeat: No Repeat</h1>
<p>The image does not repeat and appears only once on the page.</p>
</div>
</body>
</html>
<!-- Round.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Repeat - repeat</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background-image: url("https://cdn.vectorstock.com/i/1000x1000/76/13/colorful-square-
blank-background-design-vector-4007613.webp");
background-repeat: round;
background-size: 100px 100px;
background-color: #f0f8ff;
font-family: "Arial", sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #333;
}
.container {
padding: 20px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
}
h1 {
color: #085454;
}
p{
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Background Repeat: Round</h1>
<p>
The image repeats both horizontally and vertically, resizing to fit the
container without cutting off.
</p>
</div>
</body>
</html>
<!-- Link.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Link Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #f8f9fa, #e9ecef);
color: #343a40;
margin: 0;
padding: 20px;
}
h1 {
color: #495057;
text-align: center;
margin-bottom: 20px;
}
p{
text-align: center;
font-size: 1.2em;
}
a:link {
color: #007bff;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #dbeb49;
text-decoration: none;
}
a:active {
color: #dc3545;
text-decoration: underline;
}
a:hover {
color: #28a745;
text-decoration: underline;
background-color: #f8f9fa;
padding: 2px 6px;
border-radius: 5px;
}

ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}

li {
display: inline-block;
}

footer {
margin-top: 30px;
text-align: center;
font-size: 0.9em;
color: #6c757d;
}
</style>
</head>
<body>
<h1>Welcome to the Stylish Link Page</h1>
<p>Click on the links below to explore different websites!</p>
<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li>
<li><a href="https://www.Youtube.com" target="_blank">Youtube</a></li>
</ul>
<footer>
Made with by a coding enthusiast.
</footer>
</body>
</html>

Output [ Space.html ]
Output [ RepeatX.html ]

Output [ RepeatY.html ]
Output [ NoRepeat.html ]

Output [ Round.html ]
Output [ Link.html ]
Experiment 10: Name & Password Validation Using JS Objective Js VALIDATION:

Write JavaScript to validate the following fields of the above registration page. 1. Name (Name
should contains alphabets and the length should not be less than 6 characters). 2. Password
(Password should not be less than 6 characters length).

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration Page</title>
<style>
.error {
color: red;
font-size: 14px;
}
form {
max-width: 400px;
margin: auto;
}
input {
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
span {
margin-top: 10px;
}
</style>
</head>
<body>
<center>
<h1>Registration Page</h1>
</center>
<form id="registrationForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<span class="error" id="nameError"></span>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<span class="error" id="passwordError"></span>
<br />
<button type="submit">Register</button>
</form>
<script>
document
.getElementById("registrationForm")
.addEventListener("submit", function (e) {
e.preventDefault();
const name = document.getElementById("name").value.trim();
const password = document.getElementById("password").value.trim();
const nameError = document.getElementById("nameError");
const passwordError = document.getElementById("passwordError");
nameError.textContent = "";
passwordError.textContent = "";
let isValid = true;
const namePattern = /^[A-Za-z\s]+$/;
if (name.length < 6 || !namePattern.test(name)) {
nameError.textContent =
"Name should contain only alphabets and be at least 6 characters long.";
isValid = false;
}
if (password.length < 6) {
passwordError.textContent =
"Password should be at least 6 characters long.";
isValid = false;
}
if (isValid) {
alert("Registration successful!");
}
});
</script>
</body>
</html>
Experiment 11: Email & Mobile No Validation Using JS Objective Js VALIDATION:

Write JavaScript to validate the following fields of the above registration page. 1. E-mailid (should
not contain any invalid and must follow the standard pattern([email protected]) 2. Phone
Number(Phone number should contain 10 digits only)

Code
<!-- Registration-JS.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Email and Phone Validation</title>
<style>
h1 {
margin-top: 150px;
}
.error {
color: red;
font-size: 14px;
}
form {
max-width: 400px;
margin: auto;
}
input {
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<center>
<h1>Registration Page</h1>
</center>
<form id="validationForm">
<label for="email">Email ID:</label>
<input type="text" id="email" name="email" />
<span class="error" id="emailError"></span>
<br />
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" />
<span class="error" id="phoneError"></span>
<br />
<button type="submit">Validate</button>
</form>
<script src="script.js"></script>
</body>
</html>
<!-- script.js -->
document
.getElementById("validationForm")
.addEventListener("submit", function (e) {
e.preventDefault();
const email = document.getElementById("email").value.trim();
const phone = document.getElementById("phone").value.trim();
const emailError = document.getElementById("emailError");
const phoneError = document.getElementById("phoneError");
emailError.textContent = "";
phoneError.textContent = "";
let isValid = true;
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
emailError.textContent =
"Invalid email format. Please use [email protected].";
isValid = false;
}
const phonePattern = /^\d{10}$/;
if (!phonePattern.test(phone)) {
phoneError.textContent = "Phone number must contain exactly 10 digits.";
isValid = false;
}
if (isValid) {
alert("Validation successful!");
}
});

You might also like