To develop a website to display the cover page design of a book
Design the following book cover page using HTML and CSS.Create a new Django project using "django-admin startproject"command.
Define urls.py and views.py for the website .Allow host access and add the app name under installed apps in settings.py.And the static dirs in the settings.py.
Create a templates folder under the app folder followed by a folder under templates with the app name followed by html file named bookdesign.html. Create a static folder under static create images folder and insert the images that need to be displayed.
Write HTML and CSS code in the file save it and run the app using python manage.py makemigrations and python manage.py migrate commands .Run the Server using "python3 manage.py runserver 0:80" command.
<title> Responsive Web Design with HTML5 and CSS</title> <style> h1{ color:white; } .bookpage{ width: 400px; height: 650px; background-color: black; background-position: center; margin-left: auto; margin-right: auto ; padding: 5px; background-image: url('/static/images/dna.jpg'); background-size: cover; background-repeat: no-repeat; }
.toptext{
color:white;
padding-left: 10px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
.tophr{
color:#e36f2f;
width: 180px;
}
hr{
color:#e36f2f;
}
.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; } .author{ color:white; font-family: Arial, Helvetica, sans-serif; display: inline; font-size: 24px; position:relative; line-height: 20px;
}
.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: 20px; } .bottomhr { color:#e36f2f; width: 400px;
} img { width: 90px; height: 100px; margin-right: 20px; vertical-align: bottom; } .edition { color:#e36f2f; font-family: Arial, Helvetica, sans-serif; font-size: 22px; line-height:bottom;
}
</style>
</head>
<body>
<div class="bookpage">
<div class="toptext"> EXPERT INSIGHT</div>
<div class="tophr"><hr></div>
<div class="booktitle"><h1> Responsive Web Design with HTML5 and CSS </h1></div>
<h3 class="sub-text">Develop future proof responsive websites</h3>
<h3 class="sub-text">using latest HTML and CSS designs</h3>
<div class="footer">
<h2 class="edition"> Third
<div class="bottomhr"><hr></div>
<div class="author"><h3> Ben Frain Packt></h3></div>
</div>
</div>
</body>
Thus successfully designed a web page to display a book cover page design.