CSS Playground

iPhone 6 drawing with CSS , without any scripts and any images. I also try to keep the HTML tags as less as possible.

Here is the HTML code

<div class="iphone">
 <div class="lock"></div>
 <div class="topBar">
 <div class="carrier"></div>
 <div class="time"></div>
 <div class="location"></div>
 <div class="battery"></div>
 <div class="apps">
 <div class="messages"><i>Messages</i><i class="notification">2</i></div>
 <div class="skype"><i>Skype</i></div>
 <div class="trello"><i>Trello</i></div>
 <div class="flipboard"><i>Flipboard</i></div>
 <div class="youtube"><i>YouTube</i></div>
 <div class="facebook"><i>Facebook</i><i class="notification double">12</i></div>
 <div class="mail"><i>Mail</i><i class="notification double">45</i></div>
 <div class="whatsapp"><i>Whatsapp</i><i class="notification">9</i><p></p></div>
 <div class="iBooks"><i>iBooks</i></div>
 <div class="paging"></div>
<div class="back"></div>

And it looks like this:


Please visit my CODEPEN.IO account to see it in action and contribute!

This is a unique website which will require a more modern browser to work!

Please upgrade today!