cover-page-design

AIM:

To develop a website to display the cover page design of a book

Design Steps:

Step 1:

Design the following book cover page using HTML and CSS.Create a new Django project using "django-admin startproject"command.

Step 2:

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.

Step 3:

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.

Step 4:

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.

Code:

<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;Third

Edition

                    <div class="bottomhr"><hr></div>
                <div class="author"><h3>&nbsp;&nbsp;Ben Frain &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Packt></h3></div>
                
            </div>
            </div> 
            
        </body>

Output:

Result:

Thus successfully designed a web page to display a book cover page design.

maha712 / cover-page-design Goto Github PK