Telefono indice.

<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>