The phone is the main menu.
Hover over the "slide to unlock" symbol to open up the main screen and reveal the menu items - just like a real iphone!
Also, like a real iphone, it will lock itself again, closing the main screen after a set period.
The phone is not an image. It is a collection of divs. There are images in it, however:
With the exception of the wallpaper (a free download), all the other images were made in photoshop.
The "slide to unlock" screen is made with transparent text over a background animated to produce the backlit effect - just like a real one!
The slide to unlock screen operates the main screen by way of CSS; the hover state of the "slide to unlock" div commands the main screen by way of a sibling selector (~).
It is important to note that to work, the affected sibling must come after the commanding sibling in the HTML code. In this case, the "slide...etc" screen appears before the main screen in the HTML document but is placed before by the CSS. Cool, hey.
I reckon the coolest thing about it is that the hover state which opens the main screen endures after the hover ceases. That's done using matching pairs of transition properties on the siblings and pseudo classes.
Sounds easy when you say it quick but it takes a bit to get your head around.