To design a book front cover page using HTML and CSS.
Clone the GitHub repository.
Create a Django Admin interface.
Write the HTML code with relevant CSS properties.
Choose the appropriate style and color scheme.
Validate the HTML code.
Publish the website in the given URL.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #423d3d;
}
.bookpage {
width: 400px;
height: 600px;
padding: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-image: url(Endersgame.jpg);
background-size: cover;
position: relative;
}
.insight {
color: rgb(255, 255, 255);
}
.booktitle {
color: rgb(82, 163, 184);
font-family: 'Papyrus';
font-size: 30px;
text-align: center;
position: relative;
top: 30px;
}
.subtitle {
font-family: Tahoma;
font-size: large;
text-align: center;
position: relative;
top: 40px;
}
.author
{
font-family: 'Cloister Black', Times, serif;
position: absolute;
bottom: 10px;
right: 10px;
font-size: 20px;
}
.mypic {
position: relative;
top: 260px;
left: 310px;
width: 150px;
height: 150px;
border-radius: 50%;
background-size: cover;
}
</style>
<title>Book Cover Page</title>
</head>
<body>
<div class="bookpage">
<div class="booktitle">
<h1>Ender's Game</h1>
</div>
<div class="author" style="color: rgb(194, 119, 33);">
SATHYA
</div>
<div class="mypic">
<img src="passport.jpg" width="110" height="150" alt="">
</div>
</div>
</body>
</html>
The program for designing book front cover page using HTML and CSS is completed successfully.