Modèle de messagerie

<center><div id="commtemplate">
<div style="float:left; width:150px;">
<!-- ICON PERSONNAGE --><img src="URL ICON 100x100" class="compersoicon" /><div class="blocstatut">statut</div><!-- ZONE CONTACTS --><div class="bloccontactcom"><div class="contacttitre">contacts</div><div class="listcontact">
<!-- CONTACT #1 --><div><img src="URL ICON 100x100" class="iconcontact"/> contact
<a href="#">www</a></div>
<!-- CONTACT #2 --><div><img src="URL ICON 100x100" class="iconcontact"/> contact
<a href="#">www</a></div>
<!-- CONTACT #3 --><div><img src="URL ICON 100x100" class="iconcontact"/> contact
<a href="#">www</a></div>
<!-- CONTACT #4 --><div><img src="URL ICON 100x100" class="iconcontact"/> contact
<a href="#">www</a></div>
<!-- CONTACT #5 --><div><img src="URL ICON 100x100" class="iconcontact"/> contact
<a href="#">www</a></div>
</div>
</div>
</div>
<!-- HEADER CONVERSATION --><div class="blocchatcom"><div class="titreconvo">Conversation avec surnom/prénom</div><!-- ZONE DE CONVERSATION --><div class="zoneconvo">
<div class="bubbleleft"><div style="padding:8px;"><div class="nomheure"><div style="float:left;">nom</div><div style="float:right;">00:00</div></div>
TEXTE ICI</div></div>
<div class="bubbleright"><div style="padding:8px;"><div class="nomheure"><div style="float:left;">nom</div><div style="float:right;">00:00</div></div>
TEXTE ICI</div></div>
<!-- ZONE DE CONVERSATION -->
</div>
</div>
</div>
</center>

<center>
<div class="pannonces"><!-- ID PERSONNAGE --><div class="pannboxleft"><img src="URL ICON 100x100" class="pannicon"/><br/>PSEUDO<br/><a href="URL DE VOTRE SUJET SNS"><i class="fa fa-envelope" aria-hidden="true"></i></a></div><!-- MESSAGE PERSONNAGE --><div class="pannmsg"><div class="panntime">jour - 00:00</div>
Le message de votre e-mail
</div>
</div>
</center>