Header - 3D Image Overlay

The hero image is inserted in three different sizes - one for each device type - and are inserted in the background.
The overlay items are a text block and a 3D image which can animate in.
Images
The images used in this demo are 1600px, 1200px and 800px wide respectively. The smallest image will download fast on a phone and give retina quality in portrait mode.
Logo
The logo is optional and has controls for setting the image width and its position in relation to the top/bottom and left/right of the image.
Overlay Items
The text block background has controls to adjust the background color and its opacity, the padding, item spacing and border radius.
The optional link is configured to open an internal page and can be aligned left, center or right.
The skewed image has controls for adding a border and/or a box shadow.
Animation
There is a checkbox to turn on the optional animation of the text block and overlay image. Each item has a control for setting both the animation time and delay in seconds.
Navigation
The menu is created using the RGL Overlay Navigation widget. It is inserted below the image on the EverWeb design canvas and is set to overlay the item above it.
Testing
Responsive pages must be properly tested before publishing. Opening it in a desktop browser and reducing the width or using the browser's responsive mode doesn't propely test a responsive layout.
The iOS Simulator is free and very easy to use and allows testing pages in all the current iPad and iPhone models.