<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Sans:300,400,600,700&lang=en" />
<style>.whtelfond{width:230px; height:356px; padding-top: 50px; padding-bottom: 50px;} .whtelverr{background-repeat: none; width:202px; height: 304px; margin-left:2px; padding-top: 50px;} .whtelheure{font-size:20px; margin-left:5px; float:right; font-size:50px;} .whtelnotif{border-radius:2em; background:black; opacity:0.7; height:50px;color:white; text-align:left;} .whtelimg{width:40px; float:left; padding-left:15px; padding-top:5px;} .whtelmsg{opacity:0; transition: 0.7s; transform: all; background:Gainsboro; width:202px; height: 354px; margin-left:1px;margin-top:-372px; color:black} .whtelmsg:hover{opacity:1; position:relative; z-index:2} .whtelnom{ color:black; width:100%; font-size:20px; height:20px;text-align:left;} .whtelfin1{height:26px; margin-top:295px;} .whtelfin2{background:white;margin-left:5px; margin-top:-14px;height:15px; width:192px; border-radius:1em;} .whtelzone{width:127px; margin-top:-262px;overflow:auto; max-height:280px;text-align:justify;font-size:12px;} .whtelimg2{width:45px;margin-top:-262px; margin-right:10px;} .whtelsign{text-align:center;color:black;font-family:verdana;font-size:8px;}</style>

[center]<div class="whtelfond" style="background-image: url(https://i.imgur.com/HiqXjze.png); font-family:PT Sans;"><div class="whtelverr" style="background-image: url(IMAGE FOND ICI); "><div class="whtelheure" style="color:darkorchid;">[b]12:30[/b]</div><div class="whtelnotif" style="margin-top:210px;"><img src="IMAGE MUSIQUE ICI" class="whtelimg" /><br/><span style="margin-left:10px;">Artiste - [i]Titre[/i]</span></div></div>
<div class="whtelmsg"><img src="https://i.imgur.com/93obeYi.png" style="width:202px;"/> <div class="whtelnom" style="background:darkorchid;">< [b]NOM ICI[/b]</div><div class="whtelzone" style="background:darkorchid; float:left; margin-left:10px; border-radius:10px 0px 10px 10px; clear:both;"><div style="margin:5px;">MESSAGE ICI</div>
</div><img class="whtelimg2" src="IMAGE CARREE ICI" style="float:right;"><div class="whtelfin1" style="background:darkorchid;"><br/><div class="whtelfin2">Répondre</div></div></div></div><div class="whtelsign">(c) Jealy</div>[/center]

<center><div id="fondcell" alt="background"><span alt="heure" id="heure">00:00</span>
<div alt="pseudo" class="pseudocell">Pseudo ici</div>
<div alt="iMessage" class="imessage">iMessage<br>Aujourd'hui</div>
<div class="fondsms"><div alt="mess" class="texto">Hey tu fais quoi ce soir ? Ca te dirait de prendre un verre en ville ? Au Sly comme l'autre jour ?</div>
<div alt="mess" class="reptexto">Oué carrément omg ! Quelle heure ?</div>
</div>
</center>

<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

<style type='text/css'>.vtel{background-image: url(https://i.imgur.com/xA5has3.png); width: 350px; height: 600px; margin: auto; text-align: center;}.vpseudo{font-family: Lato, sans-serif; font-size: 13px; color: black; font-weight: bold; padding-top: 80px; padding-bottom: 5px;}.vbg{width: 240px; height: 357px; margin-left: 52px; padding-top: 8px; overflow: auto;}.vm1{width: 180px; background-color: #007dfd; float: right; color: white; font-family: Lato, sans-serif; font-size: 10px; text-align: justify; margin-right: 5px; padding: 5px 8px; margin-bottom: 8px; border-radius: 15px; position: relative;}.vf1{width: 0; height: 0; border-right: 4px solid #007dfd; border-bottom: 4px solid #007dfd; border-top: 4px solid transparent; border-left: 4px solid transparent; position: absolute; bottom: 6px; right: 0px;}.vm2{width: 180px; background-color: #E6E5EB; float: left; color: black; font-family: Lato, sans-serif; font-size: 10px; text-align: justify; margin-left: 5px; padding: 5px 8px; margin-bottom: 8px; border-radius: 15px; position: relative;}.vf2{width: 0; height: 0; border-left: 4px solid #E6E5EB; border-bottom: 4px solid #E6E5EB; border-top: 4px solid transparent; border-right: 4px solid transparent; position: absolute; bottom: 6px; left: 0px;}/*fait par vercors sur bazzart, merci de ne pas vous l'approrier*/</style>

<div class="vtel"><div class="vpseudo">Pseudo</div><div class="vbg"><div class="vm1"><div class="vf1"></div>message envoyé ici. message envoyé ici. message envoyé ici.</div>
<div class="vm2"><div class="vf2"></div>message reçu là. message reçu là. message reçu là.</div>
</div></div>

<div class="vm2"><div class="vf2"></div>message reçu.</div>

<div class="vm1"><div class="vf1"></div>message envoyé.</div>