How to create a notebook design with CSS ?

Last Updated : 10 Oct, 2024

A notebook in web design refers to styling elements to mimic the appearance of a physical notebook, featuring lines, margins, and textures. By utilizing CSS properties like borders, backgrounds, and box shadows, you can design a realistic notebook interface, enhancing the visual appeal of web pages or applications.

In this article, we will be creating a notebook-themed webpage template using simple CSS.

Approach:

HTML Structure: Uses <h2> for the title, a <div> for vertical lines, and <ul> for items.
Body Dimensions: Sets fixed width and height for the notebook, centering content with margin: 0 auto.
Header Styling: Styles the <h2> element with green color and centers the text for visual appeal.
List Item Design: Applies border and padding to <ul>, removing default styles for a clean notebook look.
Vertical Lines: Utilizes a <div> to create green vertical lines, enhancing the notebook's realistic appearance.

Example: Here we are following above-explained approach.

html

<!DOCTYPE html>
<html>

<head>
    <title>Notebook Design using CSS</title>

    <style>
        body {
            width: 480px;
            height: 450px;
            margin: 0 auto;
        }

        h2 {
            color: green;
            text-align: center;
            letter-spacing: -2px;
        }

        .listItemClass {
            color: #858585;
            font-size: 21px;
            padding: 0;
            width: 500px;
            border: 2px solid #cecece;
        }

        .listItemClass li {
            list-style: none;
            border-bottom: 2px dotted #cecece;
            text-indent: 20px;
            height: auto;
            padding: 10px;

        }

        .listItemClass li:hover {
            background-color: #f5f5f5;
        }

        .verticalLines {
            width: 2px;
            float: left;
            height: 425px;
            margin-left: 35px;
            border-left: 1px solid green;
            border-right: 1px solid green;
        }
    </style>
</head>

<body>
    <h2>Geeks For Geeks</h2>

    <div class="verticalLines"></div>
    <ul class="listItemClass">
        <li>Courses</li>
        <li>Contribute</li>
        <li>Practice</li>
        <li>Internships</li>
        <li>Jobs</li>
        <li>Articles</li>
        <li>Profiles</li>
        <li>Placements</li>
        <li>Tutorials</li>
    </ul>
</body>

</html>

Output:

How to Create a 4-Column Layout Grid with CSS?

Slash_IT

Improve

Article Tags :

How to create a notebook design with CSS ?

Approach:

Similar Reads

Thank You!

What kind of Experience do you want to share?