Write in
NodeJS Record
[Link] the above web application responsive web application using
Bootstrap framework
AIM: Make the above web application responsive web application using
Bootstrap framework
DESCRIPTION: Bootstrap is a popular CSS framework that makes it easy to
create responsive web applications. The previous example can be modified
using Bootstrap by following these steps
Project Structure:
1. [Link] - Main HTML file containing the structure of the web
application.
2. [Link] - CSS file for styling the web pages.
3. images/ - Folder for storing images.
1. [Link]
<!DOCTYPE html>
<html >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - BOOKISH</title>
<!-- Bootstrap CSS -->
<link href="[Link]
rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<img src="[Link]" alt="BOOKISH LOGO" width="120" height="90" />
<h1 style="color:white;">BOOKISH - BEST ONLINE EBOOK STORE READ &
EXPLORE</h1>
</header>
<nav>
<a href="#Home">Home</a>
<a href="#Login">Login</a>
<a href="Registration">Registration</a>
<a href="#Cart" >Cart</a>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center>
<h2>Welcome to Bookish e-Book Website</h2>
<p>Shopping at <font size=5>BOOKISH</font> can be both <font size=5>fun</font>
and <font size=5>savings</font>.</br>Shop with us in this special <font
size=5>discount</font> season and save upto <font size=5>90%</font> on all your
purchases.</br>
</p>
<br/><br/><br/><br/><br/><br/><br/><br/>
</main>
</div>
<div class="sidebar2"></div>
</div>
<footer>
<font color="white">© 2024 All rights reserved by Bookish ebooks</font>
</footer>
</div>
</body>
</html>
2. [Link]
body {
font-family: monospace;
}
main {
background-color: LightGray;
color: maroon;
margin-left: 10px;
height: 60vh;
}
header, footer {
background-color: midnightblue;
color: White;
padding: 1rem;
height: 50px;
}
header, nav {
margin-bottom: 10px;
flex-basis: 50%;
}
footer {
margin-top: 10px;
font-size: 15px;
}
nav {
background-color: White;
color: Black;
padding: 1rem;
height: 20px;
display: flex;
gap: 120px;
padding: 20px;
font-size: 23px;
}
.sidebar1, .sidebar2 {
flex-basis: 10%;
background-color: White;
color: Black;
}
.sidebar2 {
margin-left: 10px;
}
.container1 {
display: flex;
}
.container2 {
display: flex;
flex-direction: column;
flex: 1;
}
header, nav, main, .sidebar1, .sidebar2, footer {
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.wrapper {
display: flex;
flex-direction: column;
font-weight: 600;
}