0% found this document useful (0 votes)
3 views6 pages

Page

The document contains HTML and CSS code for a simple bookstore website. It features a header with navigation links, a section displaying a list of books with titles, authors, and prices, and a footer. The CSS styles enhance the layout and appearance of the website elements.

Uploaded by

thepsyforge
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
0% found this document useful (0 votes)
3 views6 pages

Page

The document contains HTML and CSS code for a simple bookstore website. It features a header with navigation links, a section displaying a list of books with titles, authors, and prices, and a footer. The CSS styles enhance the layout and appearance of the website elements.

Uploaded by

thepsyforge
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/ 6

BOOKSTORE

SUBMITTED BY VARNIT JAIN

ROLL NO 2300290120277

CS3D

COMPUTER SCIENCE DEPARTMENT

HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Bookstore</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- Header Section -->


<header>
<h1>My Bookstore</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<!-- Main Content -->


<section class="book-list">
<div class="book">
<img src="https://via.placeholder.com/150" alt="Book Image">
<h3>Book Title 1</h3>
<p>Author: Author Name</p>
<p>Price: $10</p>
</div>
<div class="book">
<img src="https://via.placeholder.com/150" alt="Book Image">
<h3>Book Title 2</h3>
<p>Author: Author Name</p>
<p>Price: $15</p>
</div>
<div class="book">
<img src="https://via.placeholder.com/150" alt="Book Image">
<h3>Book Title 3</h3>
<p>Author: Author Name</p>
<p>Price: $20</p>
</div>
</section>
<!-- Footer Section -->
<footer>
<p>&copy; 2024 My Bookstore. All rights reserved.</p>
</footer>

</body>
</html>

CSS CODE

/* General body styling */


body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

/* Header Section */
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}

header h1 {
margin: 0;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
text-decoration: none;
color: white;
font-size: 18px;
}

nav ul li a:hover {
text-decoration: underline;
}

/* Book List Section */


.book-list {
display: flex;
justify-content: space-around;
margin: 20px auto;
max-width: 1000px;
}

.book {
background-color: white;
padding: 15px;
text-align: center;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.book img {
width: 150px;
height: 150px;
margin-bottom: 10px;
}

.book h3 {
margin: 10px 0;
}

/* Footer Section */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}

You might also like