How to create a notebook design with CSS ?
In this article, we will be creating a notebook themed webpage template using simple CSS.
HTML Code: The HTML code is used to create a basic structure of the body. To create a notebook design, we use unordered list items to add text inside the lines. After that we use some CSS properties to adjust the unordered list of items inside the notebook lines.
<!DOCTYPE html><html> <head> <title>Notebook Design using CSS</title></head> <body> <br /> <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> |
CSS code: CSS properties is used to create a notebook design.
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: 1px; float: left; height: 425px; margin-left: 35px; border-left: 1px solid green; border-right: 1px solid green;} |
Combine the complete code: In this section, we will combine the above two sections of codes (HTML and CSS codes) to design notebook.
<!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:
Please Login to comment...