<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">Jeudi, 13 Janvier</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:var(--gradient1); 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:var(--gradient1); background:#fff; border:1px solid #ccc} .msj i{color:var(--gradient2); 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>nom prénom</b></div></div><div class="bodymens"><div class="aquiSeAgreganMensajes"><div class="modul-mensaje">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="modul-mensaje">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </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: var(--gradient1); 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>