Notes are the common feature in websites and web applications. Notes can be used to notify the user about something special: danger, success, information or warning.
In this tutorial, I will show you how to create notes by using HTML and CSS. I will show you how to create two types of notes; Notes with square corners and rounded corners notes.
Step 1. Copy the HTML codes below to you codes. It includes rounded corners and square corners notes
<h2>Square Corners Notes</h2>
<div class="danger notes">
<p><strong>Danger!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>
<div class="success notes">
<p><strong>Success!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>
<div class="info notes">
<p><strong>Info!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>
<div class="warning notes">
<p><strong>Warning!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>
<h2>Rounded Corners Notes</h2>
<div class="danger_rounded notes">
<p><strong>Danger!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>
<div class="success_rounded notes">
<p><strong>Success!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>
<div class="info_rounded notes">
<p><strong>Info!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>
<div class="warning_rounded notes">
<p><strong>Warning!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>Step 2. Copy the Notes CSS codes below to your codes. You may add them in <head>…</head> part or in your CSS file.
.notes {
margin-bottom: 15px;
padding: 4px 12px;
}
.danger {
background-color: #ffdddd;
border-left: 6px solid #f44336;
}
.success {
background-color: #ddffdd;
border-left: 6px solid #4CAF50;
}
.info {
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
}
.warning {
background-color: #ffffcc;
border-left: 6px solid #ffeb3b;
}
.danger_rounded {
background-color: #ffdddd;
border-left: 6px solid #f44336;
border-radius: 0px 10px 10px 0px;
}
.success_rounded {
background-color: #ddffdd;
border-left: 6px solid #4CAF50;
border-radius: 0px 10px 10px 0px;
}
.info_rounded {
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
border-radius: 0px 10px 10px 0px;
}
.warning_rounded {
background-color: #ffffcc;
border-left: 6px solid #ffeb3b;
border-radius: 0px 10px 10px 0px;
}Step 3. Save and preview your work
I hope now you are able to create notes with HTML and CSS on your website. Feel free to share this post or to leave your feedback in the comment bellow.