<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><div class="wrap-phone"><div class="credit"><a href="http://terrible.forumactif.org/" target="_blank">Momo Phone</a></div><div class="cadre-phone"><div class="haut-phone"><div class="points"><span></span><span></span><span></span><span></span><span></span></div><div class="heure">9:41 AM</div><div class="batterie"><i class="fa fa-battery-full" aria-hidden="true"></i></div><div class="messages"><i class="fa fa-chevron-left" aria-hidden="true"></i> Messages</div><div class="nom">GINETTE</div><div class="details">Details</div></div><div class="mid-phone"><div class="mid-inner"><div class="mid">
<bulle>WSH WSH</bulle>
<bulle-rep>WSH WSH CV</bulle-rep>
<bulle-rep>J'AI PERDU TA THUNE</bulle-rep><!--
--></div></div></div><div class="bas-phone"><i class="fa fa-camera" aria-hidden="true"></i><div class="reponse">Message</div></div></div><cercle></cercle></div>

<style>.wrap-phone {width: 250px;height: 450px;border-radius:25px;margin: auto;position: relative;background-color: #444;border: 1px solid #2f2f2f;font-family: 'Roboto', sans-serif;}.cadre-phone {width: 220px;height: 340px;background-color: #fff;margin: 50px auto 15px;}.haut-phone {background-color: #f1f5f8;height: 50px;padding-top: 1px;box-sizing: border-box;border-bottom: 1px solid #fff;box-shadow: 0 1px 0 #e6e6e6;}.haut-phone div {width: 32%;display: inline-block;vertical-align: top;font-size: 10px;}.haut-phone div:nth-child(4),.haut-phone div:nth-child(5),.haut-phone div:nth-child(6) {margin-top: 10px;}.points, .messages {padding-left: 4px;box-sizing: border-box;}.points span {display: inline-block;height: 5px;width: 5px;border-radius: 50%;background-color: #000;margin-right: 1px;margin-top: 4px;}.heure, .nom{text-align: center;}.batterie, .details {text-align: right;width: 30%!important;}.messages, .details {color: #0055f4;}.mid-phone {height: 260px;position:relative;overflow:hidden;width:100%;}.mid-inner{overflow-x: hidden;overflow-y: scroll;height:100%;width:110%;}.scrollbar{text-align:justify;height:100%;width:100%;}bulle, bulle-rep {display: block;width: 70%;background: #e5e4ea;border-radius: 10px;padding: 8px;margin: 0 10px;font-size: 12px;position: relative;}bulle:after, bulle-rep:after {content: "";width: 0;height: 0;border-style: solid;border-width: 10px 10px 0 0;border-color: transparent #e5e4ea transparent transparent;position: absolute;bottom: 4px;left: -7px;}bulle-rep {background: #48bbfc;margin-left: 15%;color: #fff;}bulle-rep:after {border-width: 10px 0 0 10px;border-color: transparent transparent transparent #48bbfc;left: initial;right: -7px;}.bas-phone {background-color: #f1f5f8;height: 30px;margin-top: 1px;padding: 7px 5px;box-sizing: border-box;border-top: 1px solid #fff;box-shadow: 0 -1px 0 #e6e6e6;color: #abaaaa;}.reponse {width: 55%;background: #fff;color: #ccc;font-size: 13px;border: 1px solid #ccc;border-radius: 5px;padding: 0 6px;display: inline-block;margin: -2px 10px;vertical-align: top;position: relative;}.reponse:after {content: "Envoyer";right: -48px;position: absolute;font-size: 11px;top: 1px;}.credit {position: absolute;width: 100%;text-align: center;text-transform: uppercase;font-size: 8px;letter-spacing: 3px;margin-top: 20px;}.credit a {color: #ccc!important;text-decoration: none!important;}cercle {display: block;height: 30px;width: 30px;background: #2f2f2f;border-radius: 50%;margin: auto;}</style>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div class="lgcell"><div class="cellbg"><div class="celltop"><div style="float:left;"><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-wifi"></i></div>15:08<div style="float:right;"><i class="fas fa-battery-three-quarters"></i></div></div><div class="cellheader"><div style="float:left;"> Edit</div>Contacts <div style="float:right;"><i class="fas fa-plus"></i></div></div><div class="cellcont"><div class="celf"><div class="cellimg"><img src="https://www.zupimages.net/up/19/09/bv2e.jpg"/></div><div class="cellid">Prénom Nom<div><a href="#"><i class="fas fa-info"></i></a></div></div></div><div class="celf"><div class="cellimg"><img src="https://www.zupimages.net/up/18/51/d1ft.png"/></div><div class="cellid">Prénom Nom <div><a href="#"><i class="fas fa-info"></i></a></div></div></div><div class="celf"><div class="cellimg"><img src="https://www.zupimages.net/up/19/06/jepo.jpg"/></div><div class="cellid">Prénom Nom <div><a href="#"><i class="fas fa-info"></i></a></div></div></div><div class="celf"><div class="cellimg"><img src="https://www.zupimages.net/up/19/09/bv2e.jpg"/></div><div class="cellid">Prénom Nom <div><a href="#"><i class="fas fa-info"></i></a></div></div></div><div class="celf"><div class="cellimg"><img src="https://www.zupimages.net/up/18/51/d1ft.png"/></div><div class="cellid">Prénom Nom <div><a href="#"><i class="fas fa-info"></i></a></div></div></div><div class="celf"><div class="cellimg"><img src="https://www.zupimages.net/up/19/06/jepo.jpg"/></div><div class="cellid">Prénom Nom <div><a href="#"><i class="fas fa-info"></i></a></div></div></div><div class="celf"><div class="cellimg"><img src="https://www.zupimages.net/up/19/09/bv2e.jpg"/></div><div class="cellid">Prénom Nom <div><a href="#"><i class="fas fa-info"></i></a></div></div></div><div class="celf"><div class="cellimg"><img src="https://www.zupimages.net/up/18/51/d1ft.png"/></div><div class="cellid">Prénom Nom <div><a href="#"><i class="fas fa-info"></i></a></div></div></div><div class="celf"><div class="cellimg"><img src="https://www.zupimages.net/up/19/06/jepo.jpg"/></div><div class="cellid">Prénom Nom<div><a href="#"><i class="fas fa-info"></i></a></div></div></div></div><div class="cellback"><div class="cellhead"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><div style="float:right">86%<i class="fas fa-battery-three-quarters"></i></div></div><div class="cellhour">15:08<span>mardi 26 mars</span></div></div></div></div><div class="lgcred"><a href="#">Nayden pour Thiercelieux</a></div>

<style>.lgcell {display:block; background-image: url(https://www.zupimages.net/up/19/13/o092.png); width: 300px; height:500px; background-size: cover; margin: auto;}.cellback {background-image: url(https://www.zupimages.net/up/19/13/h7u2.png); background-position:center; background-size: cover;height:356px; width:202px; border-radius: 3px; z-index:99;-webkit-transition: all 0.4s ease-out;transition: all 0.4s ease-out; position:absolute;top:0; pointer-events: none;}.cellbg:hover .cellback{transform:scale(1.5); opacity: 0;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.cellbg {height:356px; width:202px; background: #FFF; margin:49px; margin-top:77px; position:absolute; border-radius: 3px; overflow:hidden;}.cellhead {font-family: Raleway; font-weight:600; color: #fff;text-shadow: 1px 1px rgba(0, 0, 0, 0.1); font-size: 12px; padding:5px; padding-right:10px;}.cellhead i {margin-left: 5px;}.cellhour {height:70%; text-align:center;flex-wrap: wrap; justify-content: center;align-items: center; display:flex; font-family: Poiret One; color: #fff;text-shadow: 2px 2px rgba(0, 0, 0, 0.1); font-size:50px;}.cellhour span {font-size:12px; font-family: Quicksand; display:block; margin-top:-160px;}.celltop {padding:5px;text-align:center;flex-wrap: wrap; justify-content: center;align-items: center;font-size:10px; font-family: Raleway; font-weight:800;}.celltop div:first-child {margin-right:-30px;}.celltop i {font-size:5px; margin-right:1px;}.celltop i:last-child {font-size:9px;margin-left:4px;}.cellheader {background: #fff; padding:5px;line-height:30px; border-bottom:1px solid #ececec;text-align:center;flex-wrap: wrap; justify-content: center;align-items: center; font-size:12px; font-family:Raleway; font-weight:700; padding-top:0px; padding-bottom:0px;}.cellheader div {color: #f1604b; font-weight:600; cursor: crosshair;}.cellheader div:first-child {margin-right:-15px;}.cellcont {height:305px; overflow:auto;}.cellcont::-webkit-scrollbar{width: 5px;}.cellcont::-webkit-scrollbar-track{background: #F9F9F9;} .cellcont::-webkit-scrollbar-thumb{background:#D2D2D2; border-radius: 5px;}.celf {display:flex;background: #fff;}.cellimg img {width:40px; height:40px; border-radius: 100%; margin-top:5px; margin-left:10px;}.cellid {border-bottom: 1px solid #D2D2D2; width:100%; margin:7px; margin-bottom:4px; padding-top:10px; margin-right:3px; font-family: Roboto; font-size:12px; font-weight:600; color: #363636;}.cellid div {float:right; margin-top:-3px;}.cellid i {background: #fff; font-size:8px; padding:4px 6.5px; border-radius: 100%; color: #f1604b; border:1px solid #f1604b; margin-right:2px;display:flex;}.lgcred {text-align:center; text-transform: uppercase; font-size: 6px; margin-top:10px;}.lgcred a {text-decoration: none; font-family: Raleway;}</style>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" /><link rel="stylesheet" href="https://dl.dropbox.com/s/axo5cb7j1z40abe/candycane.css" /><div class="candycane"><input type="radio" name="candycane" id="cc0" checked/><input type="radio" name="candycane" id="cc1"/><input type="radio" name="candycane" id="cc2"/><input type="radio" name="candycane" id="cc3"/><input type="radio" name="candycane" id="cc4"/><div class="cbody"><div class="ctitle"><svg viewBox="0 0 130 200" width="100%" xmlns="http://www.w3.org/2000/svg"><path fill="var(--bckg3)" d="M60,-15.4C67.7,4.1,56.8,33.7,36.1,48.5C15.4,63.2,-15.2,63.2,-34.5,48.8C-53.7,34.5,-61.6,6,-54,-13.5C-46.3,-33,-23.2,-43.4,1.5,-43.9C26.2,-44.4,52.3,-34.9,60,-15.4Z" transform="translate(62 100)" /></svg><div class="ctitleenv"><strong>00:00</strong><span>vendredi 23 Avril</span></div></div><div class="ccont"><div class="cc1"><div class="cctit">Mensajes</div><div class="ccenv"><div class="ccmessage"><img src="https://i.imgur.com/riOFeSn.png"/><strong>Max gros cul</strong><p>répare ma console stp y a 1 pb de batterie promis je t'embête plus après ;)))</p></div><div class="ccmessage ccmessnew"><img src="https://i.imgur.com/riOFeSn.png"/><strong>Contact name</strong><p>Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje.</p></div><div class="ccmessage"><img src="https://i.imgur.com/riOFeSn.png"/><strong>Contact name</strong><p>Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje.</p></div><div class="ccmessage"><img src="https://i.imgur.com/riOFeSn.png"/><strong>Contact name</strong><p>Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje.</p></div><div class="ccmessage"><img src="https://i.imgur.com/riOFeSn.png"/><strong>Contact name</strong><p>Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje. Mensaje.</p></div><!-- Añade más mensajes antes de esta línea --></div></div><div class="cc2"><div class="cctit">Contactos</div><div class="ccenv"><div class="ccsubtit">A-B-C</div><div class="cccontact"><img src="https://i.imgur.com/riOFeSn.png"/><strong>Contact name</strong><span>Status, or occupation.</span></div><div class="cccontact"><img src="https://i.imgur.com/riOFeSn.png"/><strong>Contact name</strong><span>Status, or occupation.</span></div><div class="ccsubtit">D-E-F</div><div class="cccontact"><img src="https://i.imgur.com/riOFeSn.png"/><strong>Contact name</strong><span>Status, or occupation.</span></div><div class="cccontact"><img src="https://i.imgur.com/riOFeSn.png"/><strong>Contact name</strong><span>Status, or occupation.</span></div><!-- Añade más contactos antes de esta línea, o subtítulos si los necesitas --></div></div><div class="cc3"><div class="cctit">Calendario</div><div class="ccenv"><div class="ccsubtit">January 2020</div><a href="#" class="cclosed"><strong>Thread name</strong><span>With whom, where and when.</span></a><div class="ccsubtit">February 2020</div><a href="#"><strong>Thread name</strong><span>With whom, where and when.</span></a><!-- Añade más links antes de esta línea, o subtítulos si los necesitas --></div></div><div class="cc4"><div class="cctit">Calendario</div><div class="ccenv"><div class="ccimgs"><img src="https://i.imgur.com/smhOnR0.png"/><img src="https://i.imgur.com/NgytdSg.png"/><img src="https://i.imgur.com/NgytdSg.png"/><img src="https://i.imgur.com/S1mryVa.png"/><img src="https://i.imgur.com/tsrVruv.png"/><img src="https://i.imgur.com/smhOnR0.png"/><img src="https://i.imgur.com/NgytdSg.png"/><img src="https://i.imgur.com/NgytdSg.png"/><img src="https://i.imgur.com/S1mryVa.png"/><img src="https://i.imgur.com/tsrVruv.png"/><!-- Añade más imágenes sobre esta línea --></div></div></div></div><div class="cbottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="var(--bckg2)" fill-opacity="1" d="M0,96L80,85.3C160,75,320,53,480,74.7C640,96,800,160,960,170.7C1120,181,1280,139,1360,117.3L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg><div class="cicons"><label for="cc1"><em class="far fa-envelope"></em></label><label for="cc2"><em class="far fa-address-book"></em></label><label for="cc3"><em class="far fa-calendar-alt"></em></label><label for="cc4"><em class="far fa-images"></em></label></div></div></div><label for="cc0" id="ccstop"></label></div><a href="http://necromancercoding.tumblr.com/" class="ncredit">NC</a><style> .candycane { --bckg1: #eee; --bckg2: #fff; --bckg3: rgba(255, 255, 255, .85); --bckg4: #f8f8f8; --bckg5: #eaeaea; --accent1: #392634; --accent2: #e03e4f; --bradius1: 30px; --bradius2: 10px; --border1: 1px solid #ddd; --border2: 1px solid #ccc; --deco: #e0e0e0; --title: var(--accent1); --text: #666; --button: #fff; --shadow-d: 1px 1px rgba(0, 0, 0, 0.15), -1px 1px rgba(0, 0, 0, 0.15), 1px -1px rgba(0, 0, 0, 0.15), -1px -1px rgba(0, 0, 0, 0.15); }.candycane .cbody {background-image:url("https://cdn.discordapp.com/attachments/445256464550854657/833310112164741150/Sans_titre-3iujhb.png")}</style>

<!--DEBUT-->
<div class="bubble"><nom>Nom prénom</nom>
Bonjour Michel, je t'écris un message</div>
<!--FIN-->

<style>.bubble {position: relative; margin:auto; background: #f2f2f2;border-radius: .4em;width:200px;padding:10px;} .bubble:after {content: '';position: absolute;left: 0;top: 90%;width: 0;height: 0;border: 10px solid transparent;border-right-color: #f2f2f2;border-left: 0;border-top: 0;margin-top: -10px;margin-left: -10px;} nom{color:gray;font-weight:bold;} </style>

<!--DEBUT-->
<div class="bubble3"><hay>Nom prénom</hay>
Je te réponds, Micheline</div>
<!--FIN-->

<style>.bubble3 {position: relative; margin:auto; background: #f2f2f2;border-radius: .4em;width:200px;padding:10px;} .bubble3:after {content: '';position: absolute;right: 0;top: 90%;width: 0;height: 0;border: 10px solid transparent;border-left-color: #f2f2f2;border-right: 0;border-top: 0;margin-top: -10px;margin-right: -10px;} hay{color:skyeblue;font-weight:bold;}</style>