sujishankar2004 / cover-page-design

cover-page-design

AIM:

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

Design Steps:

Step 1:

clone the github repository and creat a Django admin interface.

Step 2:

write html and css code for dessigning book and execute them.

Code:

'''

<style> .bookpage { width: 400px; height: 600px; color: red; margin-left: auto; margin-right: auto; padding: 20px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; background-image: url(/static/images/back.jpg); background-size: cover; }

    .insight {
        color: brown;

    }


    .hrstyle {
        width: 100px;
    }

    .author {

        display: inline;
        position: relative;
        color: red;
        top: 190px;

        font-family: Georgia;
        font-size: medium;
    }

    .booktitle {
        font-family: 'Courier New', Courier, monospace;
        font-size: larger;
        text-align: center;
        position: relative;
        top: 30px;

    }

    .id {
        width: 400px;
        position: relative;
        top: 180px;

    }

    .pub {
        font-size: medium;
        position: relative;
        top: 155px;
        left: 330px;
    }

    .ed {
        color: blue;
        font-size: medium;
        font-family: Verdana;
        position: relative;
        top: 85px;

    }

    .subtitle {
        font-family: Tahoma;
        font-size: large;
        position: relative;
        top: 40px;
    }

    .mypic {
        position: relative;
        top: 135px;
        left: 260px;
        width: 100px;
        height: 100px;
        background-size: cover;
    }
</style>
<title>Book Cover Page</title>

SEC INSIGHT

---

Fundamentals of Web Application Development

HTML and CSS Combined with Django Architecture

---

SUJISANKAR S

SEC

Seventh Edition

'''

Output:

HTML Vlidator

Result:

the program for designing book cover page using html and css is executed successfully.