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>
<body align="center">
<h3>
<font color="blue"><b>NITHISH KUMAR P(212221040115)</b></font>
</h3>
</body>
<meta charset="UTF-8"
name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
.bookpage{
width: 400px;
height: 600px;
color:white;
margin-left: auto;
margin-right: auto;
padding: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-image: url("image1.jpeg");
background-size: cover;
}
.insight{
color:pink;
text-align: left;
}
.hrstyle{
width:100px;
}
.author{
display: inline;
position: relative;
color:white;
top:200px;
text-align: left;
font-family:Georgia;
font-size: medium;
}
.booktitle{
font-family: 'Courier New',Courier,monospace;
font-size: medium;
text-align: center;
position: relative;
top: 30px;
color:white;
}
.id {
width:400px;
position: relative;
top:200px;
}
.pub{
font-size: medium;
position: relative;
text-align: left;
top:170px;
left:330px;
}
.ed{
color: yellow;
font-size: medium;
font-family: Verdana;
position:relative;
text-align: left;
top:95px;
}
.subtitle{
font-family:Tahoma;
font-size: large;
position: relative;
text-align: left;
top:40px;
color:yellow;
}
.mypic{
position: relative;
top: 135px;
left: 260px;
width: 100px;
height: 100px;
background-size: cover;
}
</style>
<title>Book Cover Page</title>
</head>
<body>
<div class="bookpage">
<div class="insight">
SEC INSIGHT
</div>
<div class="hrstyle">
<hr style="color: green;">
</div>
<div class="booktitle">
<h1>Computer Architecture: A Quantitative Approach</h1>
</div>
<div class="subtitle">
<b>Beyond CMOS: Hybrid Technologies and the Future of COmputer Architecture</b>
</div>
<div class ="mypic">
<img src="212221040115.jpg" width="130" height="145" alt="">
</div>
<div class="id">
<hr style="color: lightgreen;">
</div>
<div class="author">
<p><b> NITHISH KUMAR P</b></p>
</div>
<div class="pub">
SEC
</div>
<div class="ed">
<b>Extended edition</b>
</div>
</body>
</html>
The program for designing book front cover page using HTML and CSS is completed successfully.