Design the following book cover page using HTML and CSS
Ensure proper HTML structure with , , and tags.
Style .bookpage with fixed dimensions, centered margins, and a background image.
Center and style book title with padding and flexbox.
Style author text (author) with appropriate font size and indentation. Add a bottom orange horizontal line (bottomhr) below author information.
Style author image (img) with fixed width, height, and margin.
Run the code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Book Coverpage</title>
<style>
h1{
color:white;
}
.bookpage{
width: 400px;
height: 650px;
margin-left: auto;
margin-right: auto ;
padding: 20px;
background-image: url("books2.pngr.jpg");
background-position: center;
background-color: black;
background-repeat: no-repeat;
}
.toptext{
color:white;
padding-left: 5px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
.tophr{
color: orange;
width: 180px;
}
hr{
color: orange;
}
.booktitle{
font-family: Arial, Helvetica, sans-serif;
padding: 10px 10px 0px 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-left: 10px;
font-size: 20px;
line-height:normal;
}
.author{
color:white;
display:inline;
position:relative;
font-family: Arial, Helvetica, sans-serif;
display: inline;
font-size: 24px;
line-height: 5px;
}
.sub-text {
color:white;
font-family: Arial, Helvetica, sans-serif;
display: flex;
line-height: 5px;
margin-right: 10px;
margin-left: 10px;
font-size: 14px;
}
.footer {
color:orange;
padding-top:180px;
}
.image {
color:white;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
margin-right: px;
}
.bottomhr {
color: red;
width: 400px;
}
img {
width: 90px;
height: 100px;
margin-right: 20px;
vertical-align:bottom;
}
.edition {
color:orange;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
line-height: bottom;
}
</style>
</head>
<body>
<div class="bookpage">
<div class="toptext"> 7 WONDERS</div>
<div class="tophr"><hr></div>
<div class="booktitle"><h1> The Taj Mahal<sub>(1632)</sub> </h1></div>
<h3 class="sub-text"> Built by Shajahan</h3>
<h3 class="sub-text"> In 2007 it was added as one of the 7 Wonders</h3>
<div class="footer">
<h2 class="edition"> VOLUME 1 <img src="shah-jahan.png"></h2>
<div class="bottomhr"><hr></div>
<div class="author"><h3> Jhon David Packt></h3></div>
</div>
</div>
</body>
Hence the output was verified sucessfully.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent