[html]
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<center>
<style type="text/css">
@-webkit-keyframes light {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@-moz-keyframes light {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes light {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
#basebg {height: 577px; width: 299px; position: relative; background-image:url(http://i.imgur.com/gPmFPNP.png)}
.baselight {height: 15px; width: 15px; position: absolute; left: 221px; top: 12px; background-color: #76EB00; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); -o-filter: blur(3px); filter: blur(3px); -webkit-animation: light 2s ease-in-out infinite; -moz-animation: light 2s ease-in-out infinite; animation: light 2s ease-in-out infinite;}
.base1 {height: 466px; width: 260px; position: absolute; left: 19.5px; top: 55.5px; background-color: transparent; overflow: hidden}
.base1s {height: 466px; width: 260px; position: absolute; background-image: url(http://i.imgur.com/CV8ZmDi.png); z-index: 2}
.base1sa {position: relative; top: 190px; opacity: 0.7; background-color: #000; z-index: 3; width: 120px; height: 22px; line-height: 22px; font-family: 'PT Sans Narrow'; color: #fff; -webkit-border-radius: 5%; -moz-border-radius: 5%; -ms-border-radius: 5%; -o-border-radius: 5%; border-radius: 5%; font-size: 12px}
.base1 .base1s {left: 0px; top: 0px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}
.base1:hover .base1s {left: -260px; top: 0px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s;}
.base2 {height: 466px; width: 260px; background-image:url(http://i.imgur.com/htB43t9.png); position: absolute;}
.base1 .base2 {opacity: 0; transform:scale(0.7); -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s;}
.base1:hover .base2 {opacity: 1; transform:scale(1); -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}
.base2t {width: 253px; height: 20px; padding-right: 7px; position: absolute; color: #fff; background-color: #1C1C1C; font-size: 10px; text-align: right}
.base2tc {font-family: 'PT Sans Narrow'; color: #fff; font-size: 10px; width: 260px; height: 20px; line-height: 20px; position: absolute; text-align: center; top: 2px}
.base2n {padding: 7px 0px 7px 0px; width: 260px; background-color: #fff; color: #1c1c1c; font-family: 'Roboto', arial; font-size: 15px; position: absolute; top: 20px; letter-spacing: -0.7px}
.base2msg {width: 240px; border-color: transparent; border-style: solid; border-width: 5px; padding: 5px; height: 366px; background-color: transparent; position: absolute; top: 65px; overflow: auto}
.base2msg::-webkit-scrollbar {width: 0px}
.lftmsg {min-height: 50px; box-shadow: 2px 2px 10px #CFCFCF; font-family: arial; color: #1c1c1c; text-align: justify; padding: 9px; margin: 10px 0px 0px 10px; width: 150px; float: left; background-color: #fff; font-size: 9px; line-height: 95%}
.rtmsg {min-height: 50px; box-shadow: 2px 2px 10px #CFCFCF; font-family: 'Roboto'; color: #1c1c1c; text-align: justify; padding: 10px; margin: 10px 10px 0px 0px; width: 150px; float: right; background-color: #FFFED2; font-size: 9px; line-height: 95%}
</style>
<div id="basebg">
<div class="baselight"></div>
<div class="base1">
<div class="base1s">
<div class="base1sa"><i class="fa fa-envelope-o"></i> 1 New Message</div>
</div>
<div class="base2">
<div class="base2t"><i class="fa fa-wifi"></i><i class="fa fa-signal"></i></div>
<div class="base2tc">12:45PM</div>
<div class="base2n">First Last <img src="http://placehold.it/30" style="-webkit-border-radius: 50%; margin-left: 3px"></div>
<div class="base2msg">
<div class="lftmsg">
<img src="http://placehold.it/20" style="float: left; padding: 0px 5px 2px 0px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus. Etiam vitae nunc porta, mattis erat non, fermentum augue. Mauris iaculis sed nisi in fermentum. Donec non turpis gravida, aliquam sem vitae, consequat sem. Praesent at quam tellus. Nullam nec lacus ante. Mauris pellentesque rutrum consectetur. Cras porta nulla non sagittis dignissim.</font></div>
<div class="rtmsg">
<img src="http://placehold.it/20" style="float: right; padding: 0px 0px 2px 5px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus.</font>
</div>
<div class="rtmsg">
<img src="http://placehold.it/20" style="float: right; padding: 0px 0px 2px 5px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus.</font>
</div>
<div class="lftmsg">
<img src="http://placehold.it/20" style="float: left; padding: 0px 5px 2px 0px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus. Etiam vitae nunc porta, mattis erat non, fermentum augue. Mauris iaculis sed nisi in fermentum. Donec non turpis gravida, aliquam sem vitae, consequat sem. Praesent at quam tellus. Nullam nec lacus ante. Mauris pellentesque rutrum consectetur. Cras porta nulla non sagittis dignissim.</font></div>
</div>
</div>
</div>
</div>
</center>
[/html]