Scribd
Upload
54 views

2.Make the above web application responsive web application using Bootstrap framework

The document outlines the structure and design of a responsive web application for an online eBook platform using Bootstrap. It includes HTML templates for the home, login, registration, and cart pages, featuring a consistent header, navigation, and footer across all pages. The application is designed to be user-friendly with responsive elements and a clean layout.

Uploaded by

Kore Ramesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
54 views

2.Make the above web application responsive web application using Bootstrap framework

The document outlines the structure and design of a responsive web application for an online eBook platform using Bootstrap. It includes HTML templates for the home, login, registration, and cart pages, featuring a consistent header, navigation, and footer across all pages. The application is designed to be user-friendly with responsive elements and a clean layout.

Uploaded by

Kore Ramesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

2.

Make the above web application responsive web application using Bootstrap
framework.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - PEC</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.header-img {
height: 100px;
}
.custom-header {
background-color: #ffffff;
color: white;
padding: 20px 0;
}
.custom-nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: inline-block;

}
.custom-nav a:hover {

border-radius: 5px;
}
nav{
background-color:#0b6620;
}
</style>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<!-- Header Section -->
<header class="custom-header text-center">
<div class="container d-flex align-items-center justify-content-
between">
<img src="PEC Header.png" alt="PEC LOGO" class="header-img">
<h1 class="mb-0">PEC - WORLD BEST ONLINE EBOOKS WEBSITE</h1>
</div>
</header>

<!-- Navigation Section -->


<nav class="custom-nav text-center">
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Register</a>
<a href="cart.html">Cart</a>
</nav>

<!-- Main Content -->


<main class="mt-4">
<div class="container text-center">
<h2>Welcome to PEC</h2>
<img src="PECBuilding_F1.png" alt="" width="70%" height="50%">
<p>Your one-stop destination for online eBooks.</p>
<button class="btn btn-primary">Explore Now</button>
</div>
</main>

<!-- Footer Section -->


<footer class="bg-dark text-white text-center py-3 mt-4">
<p>&copy; 2025 PEC. All rights reserved.</p>
</footer>
</div>

<!-- Bootstrap JS -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</div>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - PEC</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.header-img {
height: 100px;
}
.custom-header {
background-color: #ffffff;
color: white;
padding: 20px 0;
}
.custom-nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
}
.custom-nav a:hover {
background-color: #495057;
border-radius: 5px;
}
</style>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<!-- Header Section -->
<header class="custom-header text-center">
<div class="container d-flex align-items-center justify-content-
between">
<img src="PEC Header.png" alt="PEC LOGO" class="header-img">
<h1 class="mb-0">PEC - WORLD BEST ONLINE EBOOKS WEBSITE</h1>
</div>
</header>

<!-- Navigation Section -->


<nav class="bg-dark custom-nav text-center">
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Register</a>
<a href="cart.html">Cart</a>
</nav>

<!-- Login Form Section -->


<main class="mt-4">
<div class="container">
<h2 class="text-center">Login</h2>
<form class="mx-auto mt-3" style="max-width: 400px;">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username"
placeholder="Enter your username">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password"
placeholder="Enter your password">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input"
id="rememberMe">
<label class="form-check-label" for="rememberMe">Remember
Me</label>
</div>
<button type="submit" class="btn btn-primary w-
100">Login</button>
</form>
</div>
</main>

<!-- Footer Section -->


<footer class="bg-dark text-white text-center py-3 mt-4">
<p>&copy; 2025 PEC. All rights reserved.</p>
</footer>
</div>

<!-- Bootstrap JS -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</div>
</body>
</html>
registration.html

<!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>
<!-- Bootstrap CSS -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.cs
s" rel="stylesheet">
<link rel="stylesheet" href="stylecss">
<style>
body {
background-color: #f8f9fa;
}
.header-img {
height: 100px;
}
.custom-header {
background-color: #ffffff;
color: white;
padding: 20px 0;
}
.custom-nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
}
.custom-nav a:hover {
background-color: #495057;
border-radius: 5px;
}
</style>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<!-- Header Section -->
<header class="custom-header text-center">
<div class="container d-flex align-items-center justify-content-between">
<img src="PEC Header.png" alt="PEC LOGO" class="header-img">
<h1 class="mb-0">PEC - WORLD BEST ONLINE EBOOKS WEBSITE</h1>
</div>
</header>
<!-- Navigation Section -->
<nav class="bg-dark custom-nav text-center">
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Register</a>
<a href="cart.html">Cart</a>
</nav>

<!-- Main Content -->


<main class="container my-5">
<h1 class="text-center mb-4">Registration</h1>
<form class="row g-3">
<div class="col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName"
placeholder="Enter your first name">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName"
placeholder="Enter your last name">
</div>
<div class="col-md-12">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email"
placeholder="Enter your email">
</div>
<div class="col-md-12">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password"
placeholder="Enter your password">
</div>
<div class="col-md-12">
<label for="confirmPassword" class="form-label">Confirm
Password</label>
<input type="password" class="form-control" id="confirmPassword"
placeholder="Confirm your password">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary w-
100">Register</button>
</div>
</form>
</main>

<!-- Footer -->


<footer class="bg-dark text-white text-center py-3">
<p class="mb-0">&copy; 2025 Your Brand. All rights reserved.</p>
</footer>

<!-- Bootstrap JS -->


<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.m
in.js"></script>
</div>
</body>
</html>
cart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart Page</title>
<!-- Bootstrap CSS -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.cs
s" rel="stylesheet">
<link rel="stylesheet" href="stylecss">
<style>
body {
background-color: #f8f9fa;
}
.header-img {
height: 100px;
}
.custom-header {
background-color: #ffffff;
color: white;
padding: 20px 0;
}
.custom-nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
}
.custom-nav a:hover {
background-color: #495057;
border-radius: 5px;
}
</style>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<!-- Header Section -->
<header class="custom-header text-center">
<div class="container d-flex align-items-center justify-content-between">
<img src="PEC Header.png" alt="PEC LOGO" class="header-img">
<h1 class="mb-0">PEC - WORLD BEST ONLINE EBOOKS WEBSITE</h1>
</div>
</header>
<!-- Navigation Section -->
<nav class="bg-dark custom-nav text-center">
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Register</a>
<a href="cart.html">Cart</a>
</nav>

<!-- Main Content -->


<main class="container my-5">
<h1 class="text-center mb-4">Your Cart</h1>
<div class="table-responsive">
<table class="table table-bordered">
<thead class="table-dark">
<tr>
<th>Item</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Item 1</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>$10.00</td>
<td><input type="number" value="1" class="form-control"
style="width: 80px;"></td>
<td>$10.00</td>
<td><button class="btn btn-danger btn-
sm">Remove</button></td>
</tr>
<tr>
<td>Sample Item 2</td>
<td>Consectetur adipiscing elit.</td>
<td>$20.00</td>
<td><input type="number" value="1" class="form-control"
style="width: 80px;"></td>
<td>$20.00</td>
<td><button class="btn btn-danger btn-
sm">Remove</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4" class="text-end">Grand Total</th>
<th colspan="2">$30.00</th>
</tr>
</tfoot>
</table>
</div>
<div class="text-center mt-4">
<button class="btn btn-primary">Proceed to Checkout</button>
</div>
</main>

<!-- Footer -->


<footer class="bg-dark text-white text-center py-3">
<p class="mb-0">&copy; 2025 Your Brand. All rights reserved.</p>
</footer>

<!-- Bootstrap JS -->


<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.m
in.js"></script>
</div>
</body>
</html>

You might also like