Notepad

Example

♡ Text here.

♡ Text here.

How to make a typeable notepad:

<div class="image-container"> <img src="PASTE NOTEPAD IMAGE URL HERE" alt="image"> <div class="overlay-text"> <p>TEXT HERE.</p> <p style="text-align:left;">TEXT HERE.</p> <p style="text-align:left;">TEXT HERE.</p> </div></div> <style> .image-container { position: relative; display: inline-block; } .image-container img { display: block; width: 100%; height: auto; } .overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: none; color: #7130D3; padding: 0px 0px; font-size: 16px; text-align: center; } </style>

How to change the notepad's color

If you want the original color version, no changes to the code above is needed.

If you'd like any of the colors below, where it says:

<img src="PASTE NOTEPAD IMAGE URL HERE" alt="image">

Change this to:

<img class="notepadcolor" src="PASTE NOTEPAD IMAGE URL HERE" alt="image">

And then underneath < style > add:

.notepadcolor{ filter: hue-rotate(-10deg); }

And replace the degrees with the number underneath the color you'd like it to be.

Daily planner

Movies / TV Shows and Books Trackers

Character Collection Trackers

Recipe Sheet / Habit Tracker / Notepads