Apple

<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'><style type="text/css">.bwbgthing { width:250px; height:450px; padding-top:83px; background-image:url(http://i.imgur.com/u0UTfAW.png); overflow:hidden; }.bwbgidk { position:relative; width:218px; height:327px; background-color:#fff; overflow:hidden; font-family:lato; font-weight:100; }.bwbgpic { position:absolute; left:0px; width:218px; height:327px; background-color:#222; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbgdarken { position:absolute; top:0px; left:0px; width:218px; height:327px; background-color:#000; opacity:.25; }.bwbgover { position:absolute; top:0px; left:0px; width:218px; height:327px; font-family:lato; color:#fff; text-align:center;  font-weight: 100; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out;  }.bwbgidk:hover .bwbgpic { left:-235px; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbgidk:hover .bwbgover { left:-235px; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbgwords { margin-top:20px; color:#fff; font-size:52px; line-height:100%; }.bwbgbar { position:absolute; top:0px; left:0px; width:218px; height:7px; padding:4px; font-family:lato; color:#fff; text-align:center;  font-weight: 100; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbgidk:hover .bwbgbar { top:0px; left:0px; color:#000; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbgidk:hover .bwbattery { background-color:#000; border:1px solid #000; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbgidk:hover .bwbatteryright { background-color:none; border:1px solid #000; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbgidk:hover .bwbatterybar { background-color:#000; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbgidk:hover .bwcirclefull { background-color:#000; border:1px solid #000; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbgidk:hover .bwcircleempty { background-color:none; border:1px solid #000; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbgidk:hover .triangle-down { border-top: 7px solid #000; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwcirclefull { margin-top:1px; margin-bottom:1px; width:3px; height:3px; background-color:#fff; border:1px solid #fff; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; display:inline-block; margin-right:1px; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwcircleempty { margin-top:1px; margin-bottom:1px; width:3px; height:3px; background-color:none; border:1px solid #fff; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; display:inline-block; margin-right:1px; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwprovider { line-height:15px; font-size:10px; display:inline-block; margin-left:2px; }.bwtriangle-down { margin-left:2px; display:inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #fff; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwcircle { position:absolute; left:95px; top:11px; width:30px; background-color:#fff; opacity:.7; height:4px; border-radius:30%; -webkit-border-radius:30%; -moz-border-radius:30%; display:inline-block; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }
   .bwbgidk:hover .bwcircle { top:-20px; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbattery { margin-left:3px; width:10px; height:4px; background-color:#fff; opacity:.7; border:1px solid #fff; display:inline-block; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbatteryright { width:3px; height:4px; background-color:none; opacity:.7; border:1px solid #fff; display:inline-block; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbatterybar { margin-bottom:2px; width:1px; height:2px; background-color:#fff; opacity:.5; display:inline-block; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; }.bwbgtime { text-align:center; margin-top:9px; width:218px; font-size:10px; font-weight:bold; line-height:100%; color:#000; font-family:lato; }.bwmessageheader { width:218px; height:20px; background-color:#fff; font-family:helvetica; line-height:20px; font-size:10px; border-bottom:1px solid #eee; }.bwmessageblue { width:60px; display:inline-block; color:#56c8f7; }.bwmessagebold { width:98px; display:inline-block; color:#000; text-align:center; font-weight:bold; }.picture { width: 178px; height: 90px; -moz-border-radius:    10px; -webkit-border-radius: 10px; border-radius: 10px; margin-bottom:5px; }.bwtalkbubble { width: 148px; padding:15px; background: #128cf4; -moz-border-radius:    10px; -webkit-border-radius: 10px; border-radius: 10px; color:#fff; font-family:helvetica; font-size:10px; line-height:12px; text-align:justify; }.bwtriangle-up { margin-left:5px; margin-right:133px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #128cf4; }</style>

   <!----début du code à compléter-----!>

   <center><div class='bwbgthing'><div class='bwbgidk'><div class='bwbgpic' style='background-image:url(
[code]);'><div class='bwbgdarken'></div></div><div class='bwbgbar'><div class='bwcirclefull'></div><div class='bwcirclefull'></div><div class='bwcirclefull'></div><div class='bwcircleempty'></div><div class='bwcircleempty'></div><div class='bwprovider'>Orange</div><div class='bwtriangle-down'></div><div style='display:inline-block; width:10px; margin-right:75px; '></div><div class='bwcircle'></div><div class='bwprovider'>70%</div><div class='bwbattery'></div><div class='bwbatteryright'></div><div class='bwbatterybar'></div></div><div class='bwbgover'><div class='bwbgwords'>22:57</div><div style='font-size:12px; color:#fff; line-height:100%; letter-spacing:1px; margin-left:5px;'> 23/10/2015</div><div style='margin-top:175px; font-size:23px; opacity:.5; line-height:100%;'> 〉Faire glisser pour déverrouiller</div></div><div class='bwbgtime'>22:57</div><div class='bwmessageheader'><div class='bwmessageblue'>〈 Messages</div><div class='bwmessagebold'>[NOM DU DESTINATAIRE] </div><div class='bwmessageblue'>Contact</div></div><div style='width:178px; height:251px; overflow:auto; padding:20px;'><div class='bwtriangle-up'></div><div class='bwtalkbubble'>[VOTRE MESSAGE A INSERER ICI]</div></div></div></div><div style='margin-top:8px; width:450px; text-align:center; font-family:calibri; font-size:8px; color:#777; line-height:100%; letter-spacing:4px;'></div></center>[/code]