Q1.
Program for Home page of Online Book Store
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>XYZ BOOKSTORE</title>
<link rel="stylesheet" href="style/[Link]">
</head>
<body class="app-shell">
<header class="site-header">
<iframe src="[Link]" name="header" scrolling="no"></iframe>
</header>
<main class="main-area">
<aside class="side-panel">
<iframe src="[Link]" name="menu"></iframe>
</aside>
<section class="content-panel">
<iframe src="[Link]" name="content"></iframe>
</section>
</main>
</body>
</html>
[Link]
<html>
<head>
<link rel="stylesheet" href="style/style_start.css">
</head>
<body class="start-body">
<div class="start-box">
<h3>Welcome to Online Book Store</h3>
<p>This website provides a catalogue of books for various departments
like CSE, ECE, EEE and CIVIL.</p>
<p>You can register, log in, and add books to your cart. Use the top
navigation links to explore. </p>
</div>
</body>
</html>
[Link]
<html>
<head>
<link rel="stylesheet" href="style/[Link]">
</head>
<body>
<div class="header-title">
<img src="images/[Link]" class="logo">
<h1>XYZ BOOKSTORE</h1>
</div>
<div align="center" class="navbar header">
<a href="[Link]" target="content">Home</a> |
<a href="[Link]" target="content">Login</a> |
<a href="[Link]" target="content">Registration</a> |
<a href="[Link]" target="content">Catalogue</a> |
<a href="[Link]" target="content">Cart</a>
</div>
</body>
</html>
[Link]
<html>
<head>
<link rel="stylesheet" href="style/[Link]">
</head>
<body>
<div class="department-section">
<h3>Departments</h3>
<a href="[Link]" target="content">CSE</a><br><br>
<a href="[Link]" target="content">ECE</a><br><br>
<a href="[Link]" target="content">EEE</a><br><br>
<a href="[Link]" target="content">CIVIL</a><br><br>
</div>
</body>
</html>
[Link]
.department-section a {
display: inline-block;
background: #1d3557;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
padding: 10px 28px;
margin: 12px 18px 0 0;
border-radius: 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: all 0.3s ease;
letter-spacing: 1px;
cursor: pointer;
}
.department-section a:hover {
background: #457b9d;
color: #fff;
transform: translateY(-2px) scale(1.04);
box-shadow: 0 4px 16px rgba(30,64,175,0.13);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Roboto, Arial, sans-serif;
background: linear-gradient(360deg, #92e0cd, #b3d2ff, #e9f2ff);
margin: 0;
padding-bottom: 40px;
}
.header-box {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
background: linear-gradient(135deg, #ffffffd7, #f2f6ff);
padding: 18px 30px;
border-bottom: 1px solid #ddd;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.header-box img {
width: 70px;
}
h1 {
margin: 30px;
letter-spacing: 2px;
font-size: 40px;
font-weight: 700;
color: #1d3557;
font-family: Arial;
}
.navbar header {
text-align: center;
background: #ffffff;
padding: 14px 0;
font-size: 18px;
box-shadow: 0 3px 12px rgba(0,0,0,0.06);
position: sticky;
top: 0;
z-index: 10;
}
.navbar a {
text-decoration: none;
margin: 0 25px;
padding: 8px 14px;
color: #1d3557;
font-weight: 600;
border-radius: 6px;
transition: all .3s ease;
}
.navbar a:hover {
background-color: #1d3557;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
table {
border-collapse: collapse;
background: white;
margin: 30px auto;
width: 90%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
th {
background-color: #e8ecf2;
font-weight: bold;
padding: 14px;
font-size: 17px;
color: #1d3557;
}
td, th {
border: 1px solid #d3d3d372;
padding: 14px;
font-size: 20px;
}
tr:hover {
background-color: #faf9ff;
}
button,input[type="submit"] {
background: #1d3557;
color: white;
border: none;
padding: 10px 18px;
font-size: 15px;
border-radius: 8px;
cursor: pointer;
transition: 0.3s ease;
}
button:hover,
input[type="submit"]:hover {
background: #457b9d;
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.remove-btn {
background-color: crimson;
color: white;
border: none;
padding: 10px 14px;
border-radius: 15px;
cursor: pointer;
transition: 0.3s;
text-align: center;
}
.remove-btn:hover {
background-color: darkred;
}
table th, table td {
text-align: center;
}
form {
background: white;
width: 420px;
margin: 25px auto;
padding: 30px;
border-radius: 14px;
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
form h2 {
text-align: center;
margin-bottom: 20px;
color: #1d3557;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px 12px;
margin-top: 5px;
border: 1px solid #cdd3dd;
border-radius: 6px;
font-size: 15px;
transition: 0.3s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
border-color: #457b9d;
box-shadow: 0 0 6px rgba(69, 123, 157, 0.4);
outline: none;
}
label {
font-weight: 600;
color: #1d3557;
}
input[type="checkbox"] {
margin-top: 12px;
}
.department-section {
background: linear-gradient(120deg, #f0f4ff 60%, #e0e7ff 100%);
border-radius: 18px;
box-shadow: 0 4px 18px rgba(30, 64, 175, 0.08);
padding: 32px 28px;
margin: 32px auto;
width: 85%;
max-width: 900px;
}
.department-section h3 {
color: #1d3557;
font-size: 28px;
margin-bottom: 18px;
text-align: center;
}
.department-section p {
color: #333;
font-size: 18px;
line-height: 1.7;
text-align: center;
}
a{
font-size: 18px;
}
#toast {
visibility: hidden;
min-width: 240px;
background-color: red;
color: #fff;
text-align: center;
padding: 12px 18px;
border-radius: 6px;
position: fixed;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
z-index: 1000;
opacity: 0;
transition: opacity 0.5s, visibility 0.5s;
}
#[Link] {
visibility: visible;
opacity: 1;
}
.header-title {
display: flex;
align-items: center;
justify-content: center;
gap: 1px;
margin-top: 10px;
}
.header-title .logo {
width: 200px;
height: auto;
mix-blend-mode: multiply;
background: transparent;
}
.app-shell {
border: 10px solid #1d3557;
border-radius: 14px;
padding: 6px;
box-shadow: 0 0 0 4px #ffffff, 0 8px 24px rgba(0,0,0,0.08);
background: linear-gradient(135deg,#dfe7f9,#c4e6d9);
min-height: 100vh;
box-sizing: border-box;
}
.site-header iframe,
.side-panel iframe,
.content-panel iframe {
width:100%; height:100%; border:0;
}
.site-header { height:190px; }
.main-area { display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh -
190px); background:#fff; border:1px solid #cdd6e2; border-radius:10px; overflow:hidden; }
.side-panel { border-right:1px solid #cdd6e2; }
Style_start.css
.start-body {
font-family: Arial, sans-serif;
background: linear-gradient(360deg, #92e0cd, #b3d2ff, #e9f2ff);
margin: 0;
padding: 0;
}
.start-box {
width: 70%;
margin: 60px auto;
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
text-align: center;
}
.start-box h3 {
font-size: 30px;
color: darkblue;
margin-bottom: 15px;
}
.start-box p {
font-size: 18px;
color: #444;
line-height: 1.6;
}
Q2. Program for Registration page of Online Book
Store
[Link]
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="style/style_register.css">
</head>
<body class="reg-body">
<div class="reg-box">
<h2>Registration</h2>
<form action="register_1.html" method="post">
<table cellpadding="8" class="reg-table">
<tr>
<td><label>Name:</label></td>
<td><input type="text" name="name" class="reg-input"></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input type="email" name="email" class="reg-input"></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="password" name="password" class="reg-input">
</td>
</tr>
<tr>
<td><label>Confirm Password:</label></td>
<td><input type="password" name="confirm_password" class="reg-
input"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Register" class="reg-btn">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Style_register.css
.reg-body {
font-family: Arial, sans-serif;
background: linear-gradient(360deg, #92e0cd, #b3d2ff, #e9f2ff);
margin: 0;
padding: 0;
.reg-box {
width: 450px;
margin: 60px auto;
background: white;
padding: 35px;
border-radius: 15px;
box-shadow: 0 6px 18px rgba(0,0,0,0.2);
text-align: center;
.reg-box h2 {
color: darkblue;
margin-bottom: 20px;
.reg-table {
width: 100%;
.reg-input {
width: 95%;
padding: 10px;
border-radius: 8px;
border: 1px solid lightgray;
font-size: 16px;
.reg-btn {
background-color: darkblue;
color: white;
padding: 10px 20px;
font-size: 17px;
border: none;
border-radius: 8px;
cursor: pointer;
width: 150px;
transition: 0.3s;
.reg-btn:hover {
background-color: blue;
transform: translateY(-2px);
Q3. Program for Login page of Online Book Store
[Link]
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" href="style/style_login.css">
</head>
<body class="login-body">
<div class="login-box">
<h2>Login</h2>
<form action="login_1.html" method="post">
<label>Username:</label><br>
<input type="text" name="username" class="login-input"><br><br>
<label>Password:</label><br>
<input type="password" name="password" class="login-input"><br><br>
<input type="checkbox" name="remember"> Remember me
<br><br>
<input type="submit" value="Login" class="login-btn"><br><br>
</form>
</div>
</body>
</html>
Style_login.css
.login-body {
font-family: Arial, sans-serif;
background: linear-gradient(360deg, #92e0cd, #b3d2ff, #e9f2ff);
margin: 0;
padding: 0;
.login-box {
width: 350px;
margin: 70px auto;
background: white;
padding: 35px;
border-radius: 15px;
box-shadow: 6px 18px rgba(0,0,0,0.2);
text-align: center;
}
.login-box h2 {
color: darkblue;
margin-bottom: 20px;
.login-input {
width: 90%;
padding: 10px;
font-size: 16px;
border: 1px solid lightgray;
border-radius: 8px;
.login-btn {
width: 96%;
background-color: darkblue;
color: white;
padding: 10px;
border: none;
font-size: 17px;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
.login-btn:hover {
background-color: blue;
transform: translateY(-2px);
Q4. Program for Catalogue page of Online Book
Store
[Link]
<!DOCTYPE html>
<html>
<script src="script_catalogue.js"></script>
<script src="[Link]"></script>
<head>
<title>BOOK CATALOGUE</title>
<link rel="stylesheet" href="style/[Link]">
<link rel="stylesheet" href="style/style_books.css">
</head>
<div id="toast">Added to Cart!</div>
<body>
<h1 align="center">BOOK CATALOGUE</h1>
<!-- CSE Books -->
<h2>CSE Books</h2>
<table border="1" width="100%" cellpadding="8">
<tr>
<th>Book Image</th>
<th>Book Name</th>
<th>Author</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">.
</td>
<td>Introduction to Computer Science</td>
<td>Perry Donham</td>
<td>₹550</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110"></td>
<td>Open Data Structure</td>
<td>Pat Morin</td>
<td>₹600</td>
<td><button onclick="addToCartFromButton(this)">Add to Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110"></td>
<td>Computer Networking: Principles, Protocols</td>
<td>Olivier Bonaventure</td>
<td>₹500</td>
<td><button onclick="addToCartFromButton(this)">Add to Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">
</td>
<td>Computer Science One</td>
<td>Chris Bourke</td>
<td>₹550</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
</table>
<h2>ECE Books</h2>
<table border="1" width="100%" cellpadding="8">
<tr>
<th>Book Image</th>
<th>Book Name</th>
<th>Author</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">
</td>
<td>Electronic Devices and Circuit Theory</td>
<td>Robert L. Boylestad, Louis Nashelsky</td>
<td>₹480</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">
</td>
<td>Digital Logic and Computer Design</td>
<td>M. Morris Mano</td>
<td>₹650</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">
</td>
<td>Communication Systems</td>
<td>Simon Haykin</td>
<td>₹700</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80"
height="110"></td>
<td>Microprocessors and Interfacing</td>
<td>Douglas V. Hall</td>
<td>₹700</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
</table>
<h2>EEE Books</h2>
<table border="1" width="100%" cellpadding="8">
<tr>
<th>Book Image</th>
<th>Book Name</th>
<th>Author</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">
</td>
<td>Electrical Machines</td>
<td>P.S. Bimbhra</td>
<td>₹620</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">
</td>
<td>Circuit Theory / Network Analysis</td>
<td>Van Valkenburg</td>
<td>₹580</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">
<td>Digital Signal Processing</td>
<td>Proakis & Manolakis</td>
<td>₹540</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80"
height="110"></td>
<td>Microprocessors and Interfacing</td>
<td>Douglas V. Hall</td>
<td>₹700</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
</table>
<h2>Civil Engineering Books</h2>
<table border="1" width="100%" cellpadding="8">
<tr>
<th>Book Image</th>
<th>Book Name</th>
<th>Author</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">
</td>
<td>Fluid Mechanics</td>
<td>R.K. Bansal</td>
<td>₹450</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">
</td>
<td>Concrete Technology</td>
<td>M.S. Shetty</td>
<td>₹450</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">
</td>
<td>Structural Analysis</td>
<td>R.C. Hibbeler</td>
<td>₹500</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
<tr>
<td align="center"><img src="images/[Link]" width="80" height="110">
</td>
<td>Hydraulics & Hydraulic Machines</td>
<td>P.N. Modi, S.M. Seth</td>
<td>₹550</td>
<td><button onclick="addToCartFromButton(this)">Add to
Cart</button></td>
</tr>
</table>
</body>
</html>
Style_catalogue.css
h2 {
margin-left: 50px;
margin-top: 20px;
color: #1d3557;
}
h1 {
margin-left: 50px;
margin-top: 20px;
color: #1d3557;
}
Q5. Program for Cart page of Online Book Store
[Link]
<html>
<head>
<link rel="stylesheet" href="style/[Link]">
<link rel="stylesheet" href="style/style_books.css">
<script src="[Link]" defer></script>
</head>
<body onload="loadCart()">
<h2 align="center">Your Cart</h2>
<table align="center" cellpadding="10" cellspacing="0">
<tr>
<th>Book Image</th>
<th>Title</th>
<th>Author</th>
<th>Price</th>
<th align="center">Remove</th>
</tr>
<tbody id="cart-table"></tbody>
</table>
</body>
</html>
Style_books.css
h3 {
margin-left: 50px;
margin-top: 20px;
color: #1d3557;
}
h2 {
margin-left: 50px;
margin-top: 20px;
color: #1d3557;
}
h1 {
margin-left: 50px;
margin-top: 20px;
color: #1d3557;
}