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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>GUIDE TO WEB DESIGN</title>
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<style>
body{
color:aquamarine;
font-family: Helvetica, sans-serif;
background-color: indian red
}
.book{
width: 670px;
height:700px;
margin:auto;
position: relative;
background-image: url("book background.jpg");
background-repeat: no-repeat;
background-size:cover;
background-position: bottom 0px center;
}
h1{
font-size:70px;
margin:60px;
margin-bottom:0px;
}
h3{
margin:0px 0px 90px 60px;
position: absolute;
bottom:0px;
font-size: xx-large;
font-weight:10px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
color:aqua
}
h4{
font-size:20px;
margin:60px;
margin-top:10px;
width:430px;
}
#top{
border-bottom:2px solid orange;
padding:100px 0px 5px 30px;
}
footer{
position: absolute;
bottom: 10px;
border-top:2px solid burlywood;
padding-top:0px;
width:726px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.photo{
position: relative;
top: 170px;
left: 550px;
width: 150px;
height: 150px;
background-size: cover;
}
#HASH {
display: flex;
justify-content: space-between;
}
#HASH span{
margin:10px 0px 20px 60px;
font-size: xx-large;
font-weight: bold;
}
#end{
padding-right:60px;
}
</style>
</head>
<body>
<section class="book">
<br><br>
<span id="top">THE INTERNATIONAL BESTSELLER </span>
<h1>THE ART OF HAPPINESS</h1>
<h4>A HANDBOOK FOR LIVING</h4>
<h3>THIRD EDITION</h3>
<footer>
<div id="HASH" class="blue-msg">
<span>THEJASWINI D</span>
<span id="end"><u>SEC</u></span>
</div>
</footer>
</section>
</body>
</html>
The program for designing book front cover page using HTML and CSS is completed successfully.