<div class="textetel">écrire ici</div>

<div class="textegauchetel">écrire ici</div>

<div class="tourtel"><div class="fondtel"><div class="fondtelcarre"></div><div class="titretel"><div class="contacttel">
Nom contact</div></div><div class="textetel">Ecrire ici</div> </div>
<div class="textegauchetel">La personnage qui répond. A enlever si pas utile.</div></div>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400&display=swap" rel="stylesheet">
 
<div class="hellohello"><div class="hdd"><div class="pantallasecund"><img class="portd" src="https://placehold.jp/213x460.png"><div class="iconoscel"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><i class="fas fa-battery-half"></i><div style="height:2px; width:27px; margin:0 auto; border-bottom:1px solid #ccc;"></div></div><div class="horario1">12:56</div><div class="imgprinc"><div class="imgpr"><img src="https://placehold.jp/120x120.png"></div><i class="fas fa-bell"></i></div><div class="mensajec"><div class="msj"><i class="fas fa-quote-left"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et dolor nisi. Donec quis elit velit. </div><div style="display:inline-flex;"><div class="llmr"><i class="fas fa-phone"></i></div><div class="envsmsj"><i class="fas fa-envelope"></i></div></div></div></div><div class="fondcel"><img src="https://placehold.jp/213x460.png"><div class="iconoscel"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><i class="fas fa-battery-half"></i><div style="height:2px; width:27px; margin:0 auto; border-bottom:1px solid #ccc;"></div></div><div class="pantprincipal"><i class="fas fa-pepper-hot"></i><br/><span class="horacel">12:56</span><br/><span class="fechacel">Jueves, 13 de Abril</span></div><div class="iconosabajo"><i class="fas fa-comment fa-pull-left"></i><i class="fas fa-camera "></i></div></div></div><div class="cellphone-gaga"></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>
 
<style>.hellohello{width:244px; height:487px; margin: 10px auto; overflow:hidden;}.cellphone-gaga{width:244px; height:487px; background:url(https://i.imgur.com/OjultUy.png); position:absolute;} .fondcel, .pantallasecund, .hdd{width:213px; height:460px; background:#000; webkit-transition: 1s;-o-transition:1s;transition: 1s; } .fondcel img, .pantallasecund .portd{width:213px; height:460px; opacity:.7} .iconoscel{position:relative; top:-451px; left:166px; font-size:7px; color:#fff; width:40px; border-bottom: px solid #ccc; padding-bottom:2px} .iconoscel i{padding:0px 2px;} .pantprincipal{position:relative; top:-420px; text-align:center; line-height:24px; color:#fff; font-family: 'Baloo Tamma 2', cursive;} .pantprincipal i{font-size:35px; padding-bottom:26px; color:#Fff} .horacel{font-size:48px; font-weight:400;} .fechacel{font-weight:400; font-size:13px;} .iconosabajo{position:relative; top:-200px; font-size:20px; text-align:right; width:170px; margin:0 auto; color:#eee;} .iconosabajo i{background:rgba(0,0,0,.4); padding:10px; border-radius:180px; border:1px solid #555; text-align:center;} .pantallasecund{opacity:.1} .horario1{color:#fff; font-family: 'Baloo Tamma 2', cursive; font-size:10px; position:relative; margin-top:-468px; margin-left:15px;} .imgpr{ width:120px; height:120px; border-radius:180px; border:6px solid #fff; margin:0 auto;} .imgpr img{width:120px; height:120px; border-radius:180px;} .imgprinc{position:relative; margin-top:70px;} .imgprinc i{color:#F99B7E; padding:10px; border-radius:180px; background:#fff; position:relative; top:-40px; margin-left:40px;} .fondcel{webkit-transition: 1s;-o-transition:1s;transition: 1s; top:-459px; position:relative;} .hellohello:hover .fondcel{margin-top:-500px; position:relative;} .hdd{position:absolute; margin-left:16px; margin-top:14px; overflow:hidden;} .hellohello:hover .pantallasecund{opacity:1;webkit-transition: 1.3s;-o-transition:1.3s;transition: 1.3s;} .mensajec{position:relative; text-align:center; margin:10px; margin-top:-15px; height:110px;} .msj{background:#fff; border-radius:10px; font-size:12px; color:#888; font-family:'Baloo Tamma 2', cursive; line-height:14px; padding:12px; border:1px solid #ccc; margin-bottom:1px;} .llmr,.envsmsj{width:86px; margin:2px; border-radius:5px;padding:4px 2px; font-size:12px; color:#F99B7E; background:#fff; border:1px solid #ccc} .msj i{color:#F99B7E; opacity:.8} .msj i{padding-right:8px;}.cred{margin:0px auto; margin-top:-5px; width:280px; text-align:center;background:#fff;border:1px solid #eee;} .cred a{text-decoration:none; color:#888; text-transform:uppercase; font-size:8px; font-family:arial; letter-spacing:2px;}</style>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400&display=swap" rel="stylesheet">
 
<div class="hellohello"><div class="hdd"><div class="partarrt"><div class="iconoscel2"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><i class="fas fa-battery-half"></i><div style="height:2px; width:27px; margin:0 auto; border-bottom:1px solid #ccc;"></div></div><div class="horario">12:56</div><div class="mmarr"><i class="fas fa-angle-left fa-pull-left"></i><img src="https://placehold.jp/45x45.png"><i class="fas fa-info-circle fa-pull-right"></i><br/><b>Bettyleg</b></div></div><div class="bodymens"><div class="aquiSeAgreganMensajes"><div class="modul-mensaje">Inserte aqui un hermoso dsad dadasd sd ad mensaje no tan largo.</div><div class="modul-mensaje">Inserte aqui un hermoso dsad dadasd sd ad mensaje no tan largo.</div></div></div><div class="hdabajo"><i class="fas fa-camera"></i><i class="fas fa-microphone"></i><div class="espaci">text a message</div></div></div><div class="cellphone-gaga"></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>
 
<style>.hellohello{width:244px; height:487px; margin: 20px auto; overflow:hidden;}.cellphone-gaga{width:244px; height:487px; background:url(https://i.imgur.com/FZF05i1.png); position:absolute;} .iconoscel2{position:relative; top:-457px; left:166px; font-size:7px; color:#fff; width:40px; border-bottom: px solid #ccc; padding-bottom:2px} .iconoscel2 i{padding:0px 2px;} .horario{color:#fff; font-family: 'Baloo Tamma 2', cursive; font-size:10px; position:relative; margin-top:-473px; margin-left:15px;} .hdd{width:213px; height:460px; background:#000; position:absolute; margin-left:16px; margin-top:14px; overflow:hidden;} .partarrt{background:#f2f2f2; height:100px; border-bottom:1px solid #eee;} .bodymens{background:#fff; height:320px; overflow:hidden;} .partarrt .iconoscel2{top:9px; color:#999!important;} .partarrt .horario{margin-top:-6px; color:#999!important;} .mmarr{ justify-content: center; margin: 6px 15px; font-size: 18px; color: #F99B7E; text-align:center;} .mmarr img{width:45px; height:45px; border-radius:180px; border:1px solid #fff; margin-left:8px;} .mmarr i{margin-top:20px;} .mmarr b{font-size:10px; display:block;font-family:'Baloo Tamma 2', cursive; color:#888;}.hdabajo{height:20px; background:#fafafa; padding:10px; border-top:1px solid #eee; color:#999; font-size:14px;} .hdabajo i{margin-left:15px;} .hdabajo .espaci{ float:right; margin-right:5px; font-size:10px; padding:5px; background:#fff; border-radius:5px; width:105px; border:1px solid #eee; margin-top:-6px;} .modul-mensaje{position:relative; top:10px; width:160px; background:#eee; margin: 0 auto; border-radius:10px; padding:10px; font-size:12px; font-family:'Baloo Tamma 2', cursive; line-height:12px; text-align:left; left:5px; margin-bottom:20px;} .modul-mensaje:after{content: "";position: absolute;bottom: -8px; left:140px; border-width: 8px 10px 0; border-style: solid; border-color: #eee transparent; display: block; width: 0; }.cred{margin:0px auto; margin-top:-5px; width:280px; text-align:center;background:#fff;border:1px solid #eee;} .cred a{text-decoration:none; color:#888; text-transform:uppercase; font-size:8px; font-family:arial; letter-spacing:2px;}</style>