
Let's start the tutorial.But first you may want to know how it look like,it is as cute as you think.Here.Tada.
Copy this code and paste in HTML Javascript.
<style>
.imageu{
width:260px;
border-radius:10px;
background:url(http://www.pastelpatterns.com/large/largepattern-16.png);
background-size:360px;
padding:15px;
height:200px;
box-shadow:0 0 6px #ccc;}
.boxeu{
width:250px;
border-radius:10px;
background:#fff;
background-size:360px;
padding:5px;
height:190px;
opacity:0.9;
border:1px dashed #ccc;
text-align:center;
color:#777;
overflow-x: hidden;
overflow-y:scroll;
}
<center>
</style>
<center>
<div class="imageu">
<center>
<div class="boxeu">
<center>
<textarea cols="20" name="Famous Quotes" onclick="this.focus();this.select()" rows="2" style="background: transparent; border: 1px solid#fff; height: 190px; margin: 2px; width: 220px;"><a href="http://ramadhan-liya.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jIGsDMc20DxRFjSwfG3YJA4WNZURMNMqt6IIyzkIK_O9JQZidbGEcqiPvFEN7nX7Y7yA41ZIk0qgM2yvo_NfjeARTCf7G2rbAoHtWV6NntvLsegYUxeeItvAr1Bt-jJCfHd_VVbvGrLl/s1600/banner+lia.gif" border="0" alt="Photobucket" /></a></textarea></center>
</div>
</center>
</div>
.imageu{
width:260px;
border-radius:10px;
background:url(http://www.pastelpatterns.com/large/largepattern-16.png);
background-size:360px;
padding:15px;
height:200px;
box-shadow:0 0 6px #ccc;}
.boxeu{
width:250px;
border-radius:10px;
background:#fff;
background-size:360px;
padding:5px;
height:190px;
opacity:0.9;
border:1px dashed #ccc;
text-align:center;
color:#777;
overflow-x: hidden;
overflow-y:scroll;
}
<center>
</style>
<center>
<div class="imageu">
<center>
<div class="boxeu">
<center>
<textarea cols="20" name="Famous Quotes" onclick="this.focus();this.select()" rows="2" style="background: transparent; border: 1px solid#fff; height: 190px; margin: 2px; width: 220px;"><a href="http://ramadhan-liya.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jIGsDMc20DxRFjSwfG3YJA4WNZURMNMqt6IIyzkIK_O9JQZidbGEcqiPvFEN7nX7Y7yA41ZIk0qgM2yvo_NfjeARTCf7G2rbAoHtWV6NntvLsegYUxeeItvAr1Bt-jJCfHd_VVbvGrLl/s1600/banner+lia.gif" border="0" alt="Photobucket" /></a></textarea></center>
</div>
</center>
</div>
Pastel polka dot background:




