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>
<head>
<title>Book Cover</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: white;
}
.bookpage{
width: 400px;
height: 600px;
color: black;
padding: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-image: url('bg.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.linestart{
width: 160px;
}
.bname{
font-family: 'Times New Roman', Times, serif;
font-size: larger;
text-align: center;
}
.bsub{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: medium;
position: relative;
top: 35px;
}
.edition{
color: white;
font-size: medium;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: relative;
top: 85px;
}
.foto{
position: relative;
top: 140px;
left: 256px;
width: 100px;
height: 100px;
}
.lineend{
width: 400px;
position: relative;
top: 180px;
}
.myname{
display: inline;
position: relative;
color: white;
top: 190px;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
.clg{
font-size: medium;
position: relative;
top: 155px;
left: 330px;
color: antiquewhite;
}
</style>
</head>
<body>
<div class="bookpage">
<h4 style="color: white;"> DATA SCIENCE INSIGHT</h4>
<div class="linestart">
<hr>
</div>
<div class="bname">
<h1 style="color: white;">Python Data Science Essentials</h1>
</div>
<div class="bsub">
<p style="color: white;">A practitioner's guide covering essential data science principals tools and techniques</p>
</div>
<div class="foto">
<img src="rp_photo.png" width="140" height="150">
</div>
<div class="lineend">
<hr>
</div>
<div class="myname">
<p>Rohith Prem S</p>
</div>
<div class="clg">
SEC
</div>
<div class="edition">
Third Edition
</div>
</div>
</body>
</html>
The program for designing book front cover page using HTML and CSS is completed successfully.