How to create Notes with HTML and CSS

Maangatech > Web Design > How to create Notes with HTML and CSS

Notes

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.