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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
19 Aug, 2020
Like Article
Save Article