I love the idea of having little notes scattered around a blog, almost like the tiny pieces of paper you would find on someone's desk.
This one works nicely for reminders, little thoughts, blog updates, quotes, or just random things I want visitors to notice.
You can change the colors, fonts, and text to match your own blog.
Code:
<style>
@import url('https://fonts.googleapis.com/css2?family=Schoolbell&display=swap');
.sticky-note {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 25px 22px 28px;
background: #fff6a8;
color: #3f3a2f;
font-family: 'Schoolbell', cursive;
font-size: 14px;
line-height: 1.5;
box-shadow: 3px 4px 10px rgba(0,0,0,0.12);
transform: rotate(-1.5deg);
margin: 10px 0 20px;
}
/* Folded corner */
.sticky-note::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 28px 28px;
border-color: transparent transparent #e8dc86 transparent;
}
/* Little tape */
.sticky-note::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%) rotate(2deg);
width: 65px;
height: 20px;
background: rgba(255,255,255,0.55);
}
/* Text */
.sticky-note h3 {
font-family: 'Schoolbell', cursive;
font-size: 25px;
font-weight: normal;
margin: 0 0 10px;
}
.sticky-note p {
margin: 6px 0;
}
.sticky-note a {
color: inherit;
text-decoration: underline;
}
</style>
<div class="sticky-note">
<h3>A Little about Me ♡</h3>
<p> <bold>Interests:<bold> Fashion, Formula 1, Beauty & Pop Culture
</bold></bold></p>
<p>Star sign: Pisces</p>
<p>Currently Reading: Secret History by Donna Tart</p>
</div>
No comments:
Post a Comment