cover's Introduction

Ex.06 Book Front Cover Page Design

Date:30.11.2023

AIM:

To design a book front cover page using HTML and CSS.

DESIGN STEPS:

Step 1:

Create a Django Admin project.

Step 2:

Create an app in the Django interface.

Step 3:

Create a folder named 'static' in the app folder.

Step 4:

Create a new HTML file in the static folder.

Step 5:

Write the HTML code with relevant CSS properties.

Step 6:

Choose the appropriate style and color scheme.

Step 7:

Insert the images in their appropriate places.

Step 8:

Publish the website in the LocalHost.

PROGRAM:

<title> Front cover page </title> <style> .bookpage{ height:700px; width:500px; margin-left:35%; background-image:url(back.jpg); padding:10px; background-size: cover; } .hr1{ width:200px

        }
        .booktitle{
            margin-top: 30px;
            color:blue;
            padding:5px;
            font-size: xx-large;
        }
        .subtitle{
            color:rgb(186, 226, 43);
            font-size: large;
        }
        .mypic{
            position: relative;
            top:90px;
            left:390px;
            height: 80px;
            width: 90px;
        }
        .hr2{
            padding-top: 130px;
        
        }
        *{
            color:fuchsia;
        }
        .ed{
            position:relative;
            top: 110px;
        }
        .author{
            font-family: 'Trebuchet MS';
            font-size: large;
        }
        .pb{
            position: relative;
            left:420px;
            top:-40px;
            font-size: x-large;
        }
    </style>
    <body>
        <div class="bookpage">
        <div style="color:rgb(43, 217, 226)">INSIGHT </div>
        <div class="hr1"><hr ></div>
        <div class="booktitle"><h1> DATA SCIENCE AND ITS USES</h1></div>
        <div class="subtitle">Complete Guide To Master Data Process,Mining,Data-analytic</div>
        <div class="mypic"><img src="photo.png" height="140px" ></div>
        <div class="ed">SPECIAL EDITION</div>
        <div class="hr2"><hr ></div>
        <div class="author">JANANI</div>
        <div class="pb"> <h2>SEC</h2></div>
    </div>
    </body>
</head>