iPhone

<meta charset="utf-8" /><link href="styleI.css" rel="stylesheet" /><title>iPhone</title>
<div class="iphone">
 <div class="idcontact">Nom Prénom</div>
 <div class="messages">
 <div class="time">Date</div>
 <div class="mIB">Message reçu Message reçu Message reçu
 <div class="time">Heure</div>
 </div>
 <div class="mS">Message envoyé Message envoyé Message envoyé
 <div class="time">Heure</div>
 </div>
 </div>
</div>

.idcontact{
  position: absolute;
  top: 110px;
  right: 77px;
  width: 100px;
  height: 22px;
  z-index: 5;
  color:black;
  font-weight:bold;
  font-family: Arial, Calibri, sans-serif;
  font-size: 13px;
  text-align: center;
  padding: 1px;
}

.mIB {
  border-radius: 10px;
  background-color: rgb(229, 228, 233);
  position: relative;
  float: left;
  width: 70%;
  z-index: 4;
  color:black;
  font-family: Arial, Calibri, sans-serif;
  padding:10px;
  margin-bottom:15px;
}

.mS {
  border-radius: 10px;
  background-color: rgb(39, 157, 255);
  position: relative;
  float: right;
  width:70%;
  z-index: 4;
  color:white;
  font-family: Arial, Calibri, sans-serif;
  padding:10px;
  margin-bottom:15px;
}

.messages {
  position: absolute;
  left: 25px;
  top: 136px;
  width: 215px;
  height: 310px;
  z-index: 3;
  overflow:auto;
  padding: 10px;
}

.iphone {
background-image:url(iphone.png);
z-index:1;
position:relative;
width:285px;
height:590px;
margin-left: auto;
margin-right: auto;
}

.mS .time {
position: absolute;
bottom: -15px;
right: 10px;
color: silver;
font-size: 9px;
font-style: italic;
font-family: Arial, Calibri, sans-serif;
}

.mIB .time {
position: absolute;
bottom: -15px;
left: 10px;
color: silver;
font-size: 9px;
font-style: italic;
font-family: Arial, Calibri, sans-serif;
}

.time {
text-align: center;
color: silver;
font-size: 10px;
font-style: italic;
font-family: Arial, Calibri, sans-serif;
margin-bottom: 5px;
}

http://i300.photobucket.com/albums/nn26/Celcius_06/iphone_zpsywqrdadg.png

<div style="background-image:url(http://i300.photobucket.com/albums/nn26/Celcius_06/iphone_zpsywqrdadg.png);z-index:1;position:relative;width:285px;height:590px;margin-left: auto;margin-right: auto;">
<div style="position: absolute;top: 110px;right: 77px;width: 100px;height: 22px;z-index: 5;color:black;font-weight:bold;font-family: Arial, Calibri, sans-serif;font-size: 11px;text-align: center;padding: 1px;">NOM PRENOM</div><div style="position: absolute;left: 25px;top: 136px;width: 215px;height: 310px;z-index: 3;overflow:auto;padding: 10px;"><div style="text-align: center;color: silver;font-size: 10px;font-style: italic;font-family: Arial, Calibri, sans-serif;margin-bottom: 5px;">DATE</div> INSERER ICI LE CODE MESSAGE ENVOYE OU REÇU</div>
</div><center>© <a href="design-test.superforum.fr">Celcius</a></center>

<div style="border-radius: 10px;background-color: rgb(39, 157, 255);position: relative;float: right;width:70%;z-index: 4;color:white;font-family: Arial, Calibri, sans-serif;padding:10px;margin-bottom:15px;text-align:left;">MESSAGE ENVOYE MESSAGE ENVOYE MESSAGE ENVOYE<div style="position: absolute;bottom: -15px;right: 10px;color: silver;font-size: 9px;font-style: italic;font-family: Arial, Calibri, sans-serif;">Heure</div>
</div>

<div style="border-radius: 10px;background-color: rgb(229, 228, 233);position: relative;float: left;width: 70%;z-index: 4;color:black;font-family: Arial, Calibri, sans-serif;padding:10px;margin-bottom:15px;text-align:left;">MESSAGE REÇU MESSAGE REÇU MESSAGE REÇU MESSAGE REÇU MESSAGE REÇU<div style="position: absolute;bottom: -15px;left: 10px;color: silver;font-size: 9px;font-style: italic;font-family: Arial, Calibri, sans-serif;">Heure</div>
</div>