<html lang="en">
<head><meta charset="UTF-8">
<title>Sticky Note</title>
</head><body><div id="sticky">
<p contenteditable="true">You can put your notes here on this sticky note.</p>
<a href="#">Download Free PSD</a>
</div>
</body></html>@font-face {
@font-face {font-family: 'oregon';
src: url('https://www.cubby.com/p/_e939efc427224b5a87963bf13ab03b3e/Oregon+LDO+DemiBold.ttf');
font-weight: normal;
font-style: normal;
}
body {background: #ede3ce url('https://www.cubby.com/p/_c488f81e47b948aebe086308048d8554/bg.png') 0 0 repeat;
}
#sticky {background: #f0e598 url('https://www.cubby.com/p/_b86b98db653e4291897b90c015ed6da8/bg_paper.png') 0 0 repeat;
position: absolute;
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
width: 230px;
height: 253px;
top: 50%;
left: 50%;
margin: -126px 0 0 -115px;
box-shadow: 0 5px 7px rgba(0,0,0,0.2);
box-shadow: 0 5px 7px rgba(0,0,0,0.2);
box-shadow: 0 5px 7px rgba(0,0,0,0.2);
padding: 10px;
}
#sticky:before {
content: '';
position: absolute;
display: block;
width: 130px;
height: 30px;
background-image: url('https://www.cubby.com/p/_a26c0707472f4aeba6de3680f8106655/tape.png');
top: -15px;
left: 50px;
}
p, a {
font-family: 'oregon', sans-serif;
}
p {text-align: center;
font-size: 24px;
}
a {font-size: 18px;
text-decoration: none;
color: #6b824f;
display: block;
text-align: center;
margin-top: 70px;
}
a:hover {
color: #000;
}