Romeo's phone

<style>.fond {width: 275px; height: 528px; background-image: url('http://img110.xooimage.com/files/d/e/a/fondiphone-4c140c7.png');} #tactil {width: 217px; height: 384px; position: relative; top: 72px; background-size: auto 100%; background-position: center; overflow: hidden;} #tactil:hover .accu {opacity: 0; -webkit-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in;} #tactil:hover .bbas {top: 40px; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;} #tactil:hover .bhaut {top: -40px; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;} #tactil:hover .fondmessage {opacity:1; -webkit-transition: all 0.7s ease-in; -moz-transition: all 0.7s ease-in; -o-transition: all 0.7s ease-in; transition: all 0.7s ease-in;} .accu {width: 217px; height: 384px; position: relative; background-color: rgba(15, 15, 15, 0.7); -webkit-transition: all 0.5s ease-in;  -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;} .hiphone {width: 217px; height: 14px; background-image: url('http://img110.xooimage.com/files/d/4/e/hautiphone-4c14202.png'); text-align: left; background-position: center;} .biphone {background-image: url('http://img110.xooimage.com/files/4/f/8/biphone-4c1476a.png'); width: 217px; height: 15px; background-position: center; position: absolute; top: 365px;} .opera {color: #FFFFFF; font-size: 8px; font-family: sans-serif; position: absolute;  top: 2px; left: 33px; } .bhaut {width: 25px; height: 4px; border-radius: 5px; background-color: #6b6b6b; position: absolute; top: 5px; left: 98px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;} .bbas {width: 25px; height: 4px; border-radius: 5px; background-color: #6b6b6b; position: absolute; top: 10px; left: 98px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;} .clock {color: #FFFFFF; font-size: 50px; font-family: sans-serif; position: relative; font-weight: 100; margin-top: 40px;} .date {color: #FFFFFF;  font-size: 12px; font-family: sans-serif; font-weight: 100; position: relative; margin-top: 10px;} .notifs { width: 95%; border-top: 1px solid #1a1a1a; border-bottom : 1px solid #1a1a1a; position : relative; margin-top: 10px; text-align: left;} .imgno {position: absolute; width: 17px; height: 17px; background-image: url('http://www.macobserver.com/imgs/teaser_images/messages-icon.png'); background-size: 17px; top: 10px;} iname {color: #FFFFFF; font-size: 10px; font-family: arial; font-weight: bold;} itime {color: #676767; font-size: 9px; } itexto {color: #FFFFFF; font-size: 10px; font-weight: 100; font-family: arial;} islide {color: #676767; font-size: 9px;} .notification {width: 185px; text-align: left; left:20px; top: 8px; position: relative; line-height: 12px; margin-bottom: 12px;} .fondmessage {width: 217px; height: 384px; position: absolute; top:-0px; background-position: center; background-image: url('http://img110.xooimage.com/files/7/8/5/fondmessage-4c148f7.png'); opacity: 0; -webkit-transition: all 0.3s ease-in;  -moz-transition: all 0.3s ease-in;  -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;} .opera2 {color: #000000; font-size: 8px; font-family: sans-serif; position: absolute;  top: 2px; left: 33px; } .time2 {color: #000000; font-size: 8px; font-family: sans-serif; position: absolute; top: 0px; left: 98px; } .contact {position: relative; top: 16px; font-size: 14px; color: #000000;} .zonetxt {width: 217px; height: 318px; position: absolute; top: 39px; overflow: auto; text-align: left;} time3 {line-height: 10px; font-size: 9px; color: #676767; text-align:center; font-family: arial; margin-top: 5px;} .texto {max-width: 140px; background-color: #e6e5ed; border-radius: 10px; position: relative; text-align: left; margin: 5px; padding: 5px; font-size: 11px; font-family: arial; color: #000000;}</style>


<center><div class="fond"><div id="tactil" style="background-image: url('https://40.media.tumblr.com/08a57015eb96700cfbcb7aaae2801dd8/tumblr_nuuiiy88d61rqnw16o1_400.jpg');"><div class="accu"><div class="hiphone"><div class="opera">O2-UK 4G</div><div class="bhaut"></div></div><div class="clock">00:00</div><div class="date">Day, Month, 00</div><div class="notifs"><div class="imgno"></div><div class="notification"><iname>Nom Contact</iname> <itime>now</itime><br /><itexto>extrait de message ici.. </itexto><br /><islide>slide to view</islide></div></div><div class="biphone"><div class="bbas"></div></div></div><div class="fondmessage"><div class="opera2">O2-UK 4G</div><div class="time2">00:00</div><div class="contact">Nom Contact</div><div class="zonetxt"><center><time3>iMessage <br />Day 00 month 00:00</time3></center><div class="texto">votre message ici ...</div></div></div></div></div></center>