<style type="text/css">.cadrefont{background-color:#fff; width:700px; height:auto; margin:auto;} .cadresearch{background: linear-gradient(94deg, rgba(122,55,52,1) 75%, rgba(77,29,37,1) 100%); width:700px; height:50px; padding-top:3px;} .cadreloupe{background-color:#a5a5a5; width:300px; height:25px; margin-left:11px; margin-top:9px; padding-top:5px;opacity:0.6;} .logoPraya{float:right; margin-top:-27px; margin-right:15px;} .CouvPraya{width:700px; height:300px;} .PlaceEdit{background: transparent; width:300px; height:33px; margin-top:-80px; padding:10px;} .NatSearch{color:#b9b1b1; font-family: Vollkorn, serif; font-size: 18px; text-transform: uppercase;} .BlocPresPraya{background-color:#404040; width:700px; height:200px; margin-top:-45px;} .PicturePres{float:left; width:150px; height:150px; margin: 20px; border: 5px solid #262a30;} .BlocG{background-color:#262a30; width: 205px; height: 139px; float:left; padding: 10px; margin-top: -15px; font-family: Vollkorn, serif; font-size: 12px; text-align:justify;} .BioPraya{background:transparent; width: 202px; height:55px; overflow:auto;} .BlocD{background-color:#262a30; width: 205px; height: 139px; float:right; padding: 10px; margin-top: -51px; font-family: Vollkorn, serif; font-size: 12px; text-align:justify; margin-right: 25px;} .TitreSearch{background:transparent; width:150px; height:20px; font-family: Vollkorn, serif; font-size: 14px; text-align:center; margin:auto; text-transform: uppercase; border-bottom: 1px solid #585858;} .DescripSearch{background:transparent; width: 202px; height: 200px; overflow: auto; text-align: justify; margin: auto; margin-top: 10px;}
</style>

<!-- haut de page et image --><div class="cadrefont"><div class="cadresearch"><div class= "cadreloupe"><div style ="font-familiy: arial; color:#424242; margin-left:5px;"> Search |</div></div><div class="logoPraya"><img src="https://zupimages.net/up/20/16/6f9q.png" alt="" /></div></div><div class="CouvPraya"><img src="https://zupimages.net/up/20/16/fqur.jpg" alt="" /></div>

<!-- Titre--><div class="PlaceEdit"><div class="NatSearch">Messagerie privée</div></div>

<!-- Image de présentation/profil --><div class="BlocPresPraya"><div class="PicturePres"><img src="https://zupimages.net/up/20/16/eoh3.jpg" alt="" /></div>

<!-- Identité --> <div class="BlocG">• <b>Pseudo</b>: <i>non renseigné</i>
• <b>Connection</b>: [color=#339966]En ligne[/color]

<!-- Petite bio (assez courte) --><div class="BioPraya"><b>Biographie</b>: </br> Écrire ici et/ou mettre des smileys!</div></div>

<!-- description messagerie--><div class="BlocD"><div class="TitreSearch">Bienvenu·e·s</div><div class="DescripSearch">Bienvenu sur ma messagerie! Vous pouvez m'envoyez un message pour blabla écrivez ce que vous voulez.</div></div></div></div>

<style type="text/css">.bloc_princip{background: transparent; width:700px; margin:auto; font-family: 'Share Tech Mono', monospace; margin-top: 30px; margin-bottom: 30px;} .PlaceMessageG{background:transparent; width:600px; height:auto; margin:auto;} .ImgMessageG{clip-path: circle(50% at 50% 50%); width:70px; height:70px;} .PlaceTextG{width:400px; height:auto; background-color:#E6E6E6; float: right; margin-top: -50px; margin-right: 70px; padding:15px; overflow:auto;opacity:0.8;} .ParlotteMessageG{color:#585858; font-family: Vollkorn, serif; font-size: 12px; text-align:justify;} .TriMessageG{opacity:0.8;clip-path: polygon(0 50%, 100% 100%, 100% 0); position:absolute; background-color:#E6E6E6; width:20px; height:20px; margin-top: -40px; margin-left: 81px;}.PseudoPrayaG{color:#a5a5a5; position: absolute; width: 100px; margin-top: 61px; margin-left: -25px; text-align: center; padding: 10px; font-family: Vollkorn, serif; font-size: 12px;} .HeurePrayaG{color:#a5a5a5; position: absolute; width: 100px; margin-top: 33px; margin-left: 490px; text-align: center; padding: 10px; font-family: Vollkorn, serif; font-size: 12px;}
</style>

<!-- premier message --><div class="clearfix"><div class="bloc_princip"><div class="PlaceMessageG"><div class="PseudoPrayaG">E_Robot</div><div class="HeurePrayaG">20:43</div><div class="ImgMessageG"><img src="https://zupimages.net/up/21/08/g07p.jpg" alt="" /></div><div class="TriMessageG"></div><div class="PlaceTextG"><div class="ParlotteMessageG">Votre enquête avance-t-elle depuis que nous nous sommes quittés, inspecteur ?  [img]https://twemoji.maxcdn.com/16x16/1f46e.png[/img]  </div></div></div></div></div>

<!-- premier message --><div class="clearfix"><div class="bloc_princip"><div class="PlaceMessageD"><div class="PseudoPrayaD">VOTRE PSEUDO</div><div class="HeurePrayaD">HEURE</div><div class="ImgMessageD"><img src="VOTRE AVATAR 70*70" alt="" /></div><div class="TriMessageD"></div><div class="PlaceTextD ParlotteMessageD">VOTRE MESSAGE
</div></div></div></div></div>

<style type="text/css">.bloc_princip{background: transparent; width:700px; height:auto; margin:auto; font-family: 'Share Tech Mono', monospace; margin-top: 30px; margin-bottom: 30px;} .PlaceMessageD{background:transparent; width:600px; height:auto; margin:auto;} .ImgMessageD{overflow:hidden; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; width:70px; height:70px; float:right;} .PlaceTextD{opacity:0.8;width:400px; height:auto; background-color:#E6E6E6; float: left; margin-top: 15px; margin-left: 63px; padding:15px; overflow:auto;} .ParlotteMessageD{color:#585858; font-family: Vollkorn, serif; font-size: 12px; text-align:justify;} .TriMessageD{opacity:0.8;clip-path: polygon(100% 50%, 0 100%, 0 0); position:absolute; background-color:#E6E6E6; width:20px; height:20px; margin-top: 25px; margin-left: 493px;} .PseudoPrayaD{color:#a5a5a5; position: absolute; width: 100px; margin-top: 61px; margin-left: 507px; text-align: center; padding: 10px; font-family: Vollkorn, serif; font-size: 12px;} .HeurePrayaD{color:#a5a5a5; position: absolute; width: 100px; margin-top: 20px; margin-left: -20px; text-align: center; padding: 10px; font-family: Vollkorn, serif; font-size: 12px;}
</style>