To design a book front cover page using HTML and CSS.
Create a Django Admin project.
Create an app in the Django interface.
Create a folder named 'static' in the app folder.
Create a new HTML file in the static folder.
Write the HTML code with relevant CSS properties.
Choose the appropriate style and color scheme.
Insert the images in their appropriate places.
Publish the website in the LocalHost.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Book Cover</title>
<style>
body {
margin: 0;
padding: 0;
background: white ;
font-family: 'Georgia', serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.book-cover {
width: 300px;
height: 450px;
background: linear-gradient(to bottom right, #2c3e50, #3498db);
color: white;
padding: 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 10px;
}
.book-title {
font-size: 28px;
font-weight: bold;
margin-top: 20px;
}
.book-author {
font-size: 18px;
font-style: italic;
margin-bottom: 20px;
text-align: right;
}
.book-footer {
font-size: 14px;
text-align: center;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="book-cover">
<div class="book-title">The Secret Garden</div>
<div>
<img src="https://manhassetlibrary.org/site/wp-content/uploads/FHB-collection2.jpg" style="float:right" alt="book-cover" width="200 px" height="200 px" >
</div>
<div class="book-author">by Frances Hodgson Burnett</div>
<div class="book-footer">Published 1911</div>
</div>
</body>
</html>
The program for designing book front cover page using HTML and CSS is completed successfully.
