Téléphone avec forfait illimité offert par Diavolo lui-même, il est utilisable par toutes personnes vivant au Devildom. Il ne peut cependant pas rejoindre les autres mondes - défaut de réseau compatible -. Certains modèles sont à votre entière disposition.


En-tête

Code:

<div id="phopho"><div id="bopho"><div id="curpho" style="background: url(https://via.placeholder.com/230x390)"><div id="topacio"><n>PHONE</n> <m><span class="fas fa-wifi" style="margin-right: 4px"></span><span class="fas fa-signal" style="margin-right: 5px; font-size: 8px"></span><span class="fas fa-battery-half" style="margin-right: -6px"></span></m></div>  
 <div id="tupho"><div class="bubbletext">
   <span>petit message ici</span>
   </div><div class="elpj"> Votre nom </div><div class="imu"><div class="inimu" style="background: url(https://via.placeholder.com/110)">  </div></div></div></div><div id="botxt"><txt> envoie-moi quelque chose </txt> <span class="fas fa-microphone"></span></div>  <div id="thehover" style="background: url(https://via.placeholder.com/230x390)">  
 <div class="horapmg"><span>08:21</span> 06-06-2024, Jeudi</div><div class="slide"> <span class="fas fa-chevron-right"></span>  </div></div></div></div><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>

<style>#phopho {background: url(https://i.imgur.com/SCk8HRa.png); height: 504px; width: 250px; background-size: 100%; margin: 0 auto;} #bopho {width: 230px; height: 390px; background: #fff; outline: 1px solid #e0e0e0; margin: 0 auto;position: relative; top: 56px; overflow: hidden;}#topacio {background: #ffffff40; height: 20px; position: absolute; top: 0px; left: 0px; right: 0px; z-index: 1;}#topacio n {font: 7px verdana; text-transform: uppercase; color:#fff; position: relative; top: 5px; left: 5px}#mipacio {background: #464E66; height: 45px}#topacio m {float: right; color: #fff; margin-right: 10px; margin-top: 8px;}#topacio span {font-size: 9px; margin-top: -2px} #curpho {height: 390px; position: absolute; top: 0px; left: 0px; right: 0px}#tupho {height: 360px; background: FCFCFC;}#tupho .imu {height: 139px; width: 139px; border-radius: 100px; position: absolute; top: 90px; left:40px; border: 1px solid #fff;}#tupho .inimu {width: 110px; height: 110px; border-radius: 100%; background-clip: padding-box!important; border: 15px solid #ffffff90; }.bubbletext {position: absolute; background: #ffffffc7; border-radius:25px; width: 150px; height: 50px; padding: 15px; top: 250px; left: 25px; font: 8px verdana; text-align: justify; color: #555; line-height: 110%;}.bubbletext:after {content: '';position: absolute;top: 0;left: 50%;width: 0;height: 0;border: 14px solid transparent;border-bottom-color: #ffffffc7;border-top: 0;margin-left: -14px;margin-top: -14px;}#bopho .elpj {position: absolute; top: 50px; left: 0px; right: 0px; text-align: center; color: #fff; font-family: "fashion_light"; font-weight: bold;  font-size: 15px;}#bopho #botxt {background: #ffffff40; position: absolute; bottom: 0px; height: 30px; left: 0px; right: 0px;}#bopho #botxt txt {display: inline-block; background: #fff; font: 8px consolas; color: #666; padding: 5px; position: relative; top: 4px; left: 5px; width: 180px; border-radius: 25px;}#bopho #botxt span {color: #fff; position: relative; top: 7px; left: 13px}#bopho #thehover {height: 390px; position: absolute; top: 0px; left:0px; right: 0px; background: #fff;transition:0.8s}#bopho #thehover .horapmg {text-align: center;  position: absolute; top: 40px; left: 0px; right: 0px; color: #fff; font: 8px verdana; text-transform: uppercase; letter-spacing: 1px; width: 240px;}#thehover .horapmg span {font: 40px "fashion_light"; font-weight: bold; display: block; letter-spacing: 0px; margin-bottom: -10px;}#thehover .slide { position: absolute; bottom: 20px; right: 20px; left: 20px; background: #ffffff99; height: 40px; border-radius: 25px; }#thehover .slide span {background: #fff; color: #666; position: absolute; top: 4px; left: 5px; padding: 10px; border-radius:25px; font-size: 13px; display: block; width: 10px; text-align: center;}#bopho:hover #thehover {position: absolute; left: 270px}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}@font-face { font-family: "fashion_light"; src: url('https://dl.dropboxusercontent.com/s/0wsl42bnojrx0cb/Fashion%20Fetish%20Light.ttf'); format("truetype");}
</style><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

DDD, messagerie

Code:

<div id="phopho"><div id="wopho"> <div id="curpho2"><div id="topecio"><n>PHONE</n> <m><span class="fas fa-wifi" style="margin-right: 4px"></span><span class="fas fa-signal" style="margin-right: 5px; font-size: 8px"></span><span class="fas fa-battery-half" style="margin-right: -6px"></span></m></div> <div id="tupho"> <div id="fafo"> <div id="fafotop">
 
   <div class="imugit"><div class="imugot" style="background: url(https://via.placeholder.com/80)"></div></div>
   <div class="nombredel">Nom du contact </div>
 </div>

 <div class="textos"> <txt> Un message ici </txt>
   <txt> Un autre message là blah blah et blah</txt>
 </div>  </div></div> <div id="botxt"><txt> Ecrire un message </txt> <span class="fas fa-microphone"></span></div></div></div></div><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>


<style>#phopho {background: url(https://i.imgur.com/SCk8HRa.png); height: 504px; width: 250px; background-size: 100%; margin: 0 auto;} #wopho {width: 230px; height: 390px; background: #fff; outline: 1px solid #e0e0e0; margin: 0 auto;position: relative; top: 56px; overflow: hidden;}#topecio {background: #ffffff40; height: 20px; position: absolute; top: 0px; left: 0px; right: 0px; z-index: 1;}#topecio n {font: 7px verdana; text-transform: uppercase; color:#222; position: relative; top: 5px; left: 5px}#mipacio {background: #464E66; height: 45px}#topecio m {float: right; color: #222; margin-right: 10px; margin-top: 7px}#topecio span {font-size: 9px; margin-top: -2px} #curpho2 {height: 390px; position: absolute; top: 0px; left: 0px; right: 0px; background: #f3f3f3}#tupho {height: 360px}#wopho #botxt {background: #ffffff40; position: absolute; bottom: 0px; height: 30px; left: 0px; right: 0px;}#wopho #botxt txt {display: inline-block; background: #fff; font: 8px consolas; color: #666; padding: 5px; position: relative; top: 3px; left: 5px; width: 180px; border-radius: 25px; border: 1px solid #eaeaea;}#wopho #botxt span {color: #222; position: relative; top: 7px; left: 13px} #wopho #fafo {height: 340px; background: #fff; position: absolute; bottom: 30px; left: 0px; right: 0px; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2}#fafotop {height: 160px; background: #f9f9f9; border-bottom: 1px solid #eaeaea;}#fafotop .imugit {height: 100px; width: 100px; border-radius: 100px; position: absolute; top: 10px; left:63px; border: 1px solid #eaeaea;}#fafotop .imugot {width: 80px; height: 80px; border-radius: 100%; background-clip: padding-box!important; border: 10px solid #fff;}#fafotop .nombredel {font: 13px "fashion_light"; font-weight: bold; position: absolute; top: 120px; left: 0px; right: 0px; text-align: center; color: #555}#fafo .textos {position: absolute; top: 170px; height: 160px; left: 10px; right: 10px; overflow-y: auto;}#fafo .textos txt {background: #f9f9f9; border: 1px solid #eaeaea; float: right; border-radius: 15px; padding: 10px; font: 9px verdana; color: #555; display: block; margin-top: 5px;}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}@font-face { font-family: "fashion_light"; src: url('https://dl.dropboxusercontent.com/s/0wsl42bnojrx0cb/Fashion%20Fetish%20Light.ttf'); format("truetype");}</style><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Juste des bulles de textos

Code:

<center><div style="font-size:11px;font-family:arial;margin-top:0px;margin-right:60px;color:#000000;background-color :#ededed;width:250px;height:auto;padding:5px;border-radius:15px;text-align:left"> UN TEXTE ICI</div>
<div style="font-size:11px;font-family:arial;margin-top:0px;margin-left:140px;color:#ffffff;background-color :#7FB3D5;width:200px;height:auto;padding:5px;border-radius:15px;text-align:right"> UN AUTRE TEXTE LÀ</div></center>

ps; vous pouvez changer les couleurs des bulles.