<!
DOCTYPE html>
<html>
<head>
<title>Online Bookstore</title>
<style>
body {
font-family: Arial;
text-align: center;
background-color: blue;
}
h1 {
background: #333;
color: white;
padding: 15px;
font-size: 24px;
}
nav {
background: #444;
padding: 10px;
}
iframe {
width: 100%;
height: 500px;
border: none;
}
a{
color: white;
text-decoration: none;
margin: 0 15px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to Our Online Bookstore</h1>
<nav>
<a href="home.html" target="contentFrame">Home</a>
<a href="categories.html" target="contentFrame">Categories</a>
<a href="bestsellers.html" target="contentFrame">Bestsellers</a>
<a href="contact.html" target="contentFrame">Contact Us</a>
</nav>
<iframe name="contentFrame" src="home.html"></iframe>
</body>
</html>
Home.html
<html>
<head>
<title>homepage</title>
<style>
h1
{
color:pink;
text-align:center;
}
</style>
</head>
<body>
<h1>Welcome to homepage</h1>
</body>
</html>
b. 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</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f4f4f4;
}
.login-container {
background: white;
padding: 20px;
box-shadow: 0px 0px 5px gray;
text-align: center;
}
input, button {
width: 80%;
margin: 5px 0;
padding: 10px;
}
button {
background: blue;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form>
<input type="text" id="username" placeholder="Username" required>
<input type="password" id="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
c. Catalogue page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookstore Catalogue</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: #f4f4f4;
}
.catalogue {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.book {
background: white;
padding: 10px;
box-shadow: 0px 0px 5px gray;
width: 200px;
text-align: center;
}
.book img {
width: 100%;
height: auto;
}
.book button {
background: blue;
color: white;
border: none;
padding: 5px;
cursor: pointer;
margin-top: 5px;
}
</style>
</head>
<body>
<h2>Online Bookstore Catalogue</h2>
<div class="catalogue">
<div class="book">
<img src="iot.jpg"alt="Book 1">
<h3>IOT</h3>
<p>Rs 460</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="ml.jpg" alt="Book 2">
<h3>ML</h3>
<p>RS 499</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="wt.jpg" alt="Book 3">
<h3>WT</h3>
<p>RS 299</p>
<button>Add to Cart</button>
</div>
</div>
</body>
</html>
Register page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookstore Registration</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f4f4f4;
}
.registration-container {
background: white;
padding: 20px;
box-shadow: 0px 0px 5px gray;
text-align: center;
width: 300px;
}
.form-group {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0;
}
label {
font-weight: bold;
margin-right: 10px;
width: 80px;
text-align: right;
}
input {
flex: 1;
padding: 8px;
}
button {
width: 100%;
padding: 10px;
background: blue;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="registration-container">
<h2>Register</h2>
<form >
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your full name" required>
</div>
<div class="form-group">
<label for="number">Phone number</label>
<input type="number" id="number" placeholder="Enter your phone number"
required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter your password"
required>
</div>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
