Sticky Note

×
Topic

Your content

Your content

×
Topic

Your content

Your content

×
Topic

rotate

Your content

×
Topic

scale

Your content



Structure
<div class="note" style="background-color:#a5d6a7;border-top:6px solid #66bb6a">
  <a class="closebtn" style="color:#66bb6a;">&times;</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>

receipt
settings_ethernet