Sticky Note
Structure
<div class="note" style="background-color:#a5d6a7;border-top:6px solid #66bb6a">
<a class="closebtn" style="color:#66bb6a;">×</a>
<h1>Topic</h1><hr style="border:1px solid #81c784">
<p>Your content</p>
<p>Your content</p>
</div>
Just add scale (to scale) or rotate (to rotate) with note class name
Style
<style>
.note {
padding:10px;
position:relative;
text-align:center;
min-height:160px;
width:450px;
margin-bottom:6px;
color:white;
box-shadow:0 0 4px rgba(0,0,0,0.3);
}
.closebtn {
position: absolute;
top: 0;
right: 10px;
font-size: 26px;
cursor:pointer;
opacity:0.6;
}
.closebtn:hover{opacity:1}
.note h1{margin:0}
/*To Rotate the note*/
.rotate{transform:rotate(-10deg);transition:0.3s}
.rotate:hover{transform:rotate(0deg)}
/*To scale the note*/
.scale{transform:scale(.8,.8);transition:0.3s}
.scale:hover{transform:scale(1,1);}
</style>
Process
<script src="jquery.min.js"></script>
<script>
$(".closebtn").click(function(){
$(this.parentElement).css("display","none");
});
</script>