How To Create Note Box with HTML & CSS

Note Box 📒 in Html and Css


Today in this topic we will discuss about a very beautiful Note box and we create this by the help of HTML and CSS. We can use this note box both WordPress and Blogger platform.

Generally we use this type of Note box by introducing ourselves. We will provide full code in this blog. So Don't Worry. Our all Codes are 100% free to use. You can use our code in any platform.

Main Post

Now we will discuss that how we create this code. And the Process of setup is very easy you can easily set the beautiful Note Box in your WordPress or Blogger blog.

You can also easily edit this code by yourself and set your image and suitable paragraph according to your blog topic. Now we provide the Download link of the Code and also provide the whole code.


Download Note Box Code - here is Gdrive download link. Otherwise you can directly copy the whole code which will provide bellow.


/* AT-NOTEBOX -Original post Anutrickz & Redesign by wearecoderz */

.at-note { background-color: #f3f3f6; border-radius: .25rem; padding: 1.25rem 1.25rem 1.25rem 1.5rem; margin: 1rem 0 1.2rem; border: 2px solid #d5d5d8; position: relative; } .at-note:before{ content: ''; position: absolute; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA4Ij4KICA8cGF0aCBkPSJNNTIgN2MtMy4yIDAtMy4yLTMtNi41LTMtMy4yIDAtMy4yIDMtNi41IDNzLTMuMy0zLTYuNS0zYy0zLjMgMC0zLjMgMy02LjUgM3MtMy4yLTMtNi41LTNjLTMuMiAwLTMuMiAzLTYuNSAzLTMuMiAwLTMuMi0zLTYuNS0zUzMuMyA3IDAgN3YxaDUyVjd6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2YzZjNmNiIvPgogIDxwYXRoIGQ9Ik01MiA2Yy0zLjIgMC0zLjItMy02LjUtMy0zLjIgMC0zLjIgMy02LjUgM3MtMy4zLTMtNi41LTNjLTMuMyAwLTMuMyAzLTYuNSAzcy0zLjItMy02LjUtM2MtMy4yIDAtMy4yIDMtNi41IDMtMy4yIDAtMy4yLTMtNi41LTNTMy4zIDYgMCA2IiBmaWxsPSJub25lIiBzdHJva2U9IiNkNWQ1ZDgiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K); background-repeat: no-repeat; background-size: cover; top: -7px; left: 20px; width: 52px; height: 8px; } .at-note p{font-size:16px;margin-left: 29px;margin-bottom: 0;} .at-note p:before{ content: ''; width: 1.5rem;margin-left: 16px; height: 1.5rem;left: -4px; position: absolute; top: 21px; }


<div class="at-note" id="at-note">

<center><img src="#" width="100"

style="border:solid black 2px; border-radius:10px; padding:2px;" alt="No-image(plz set)"/></center>

<p><h4 style="text-align:center;">{ <span style="text-shadow:2px 2px 6px dodgerblue;">Your<span style="color:blue;">name</span>here</span> }</h4><hr />

<b>your<span style="color:blue;">name</span>here</b> You full Note here.<br /><br /><b>{ your<span style="color:blue;">name</span>here }</b> :- Your short text.<br />

<h6 style="text-align:right;">Team<br />Your<span style="color:blue;">name</span>here</h6>


<p><marquee>This code is Redesign by <a href="">wearecoderz</a></marquee></p>


Here is the Whole updated code. You can easily Copy or download the code and edit according to your blog.


The Original Copyright credits goes to Anutrickz and The Main post link- Click here . We will upload and Redesign this code with full permission.