Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 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
Available Formats
Download as PDF, TXT or read online on Scribd
3 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
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/bootstrap@5.3.0-
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/bootstrap@5.3.0-
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/bootstrap@5.3.0-
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/bootstrap@5.3.0-
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