Hot As

This project was an enjoyably challenging custom build. After receiving the Photoshop file from the client, with its striking opening image, I set to work building it on top of the Genesis framework.

A number of design elements required some CSS trickery. The diagonal-line borders were an obvious candidate for the CSS3 border-image property, but the cross-browser support isn’t fully there yet, plus for this border style it was difficult getting the lines from the corner sections to join up smoothly with the lines from the sides. So I went with a repeating image covering the parent div instead.

As part of the responsive design of the site, at smaller screen sizes the horizontal navigation is replaced by the word “Menu” and a downward pointing arrow (the same as is used to indicate a drop-down menu at desktop sizes.) At the smallest screen sizes only the arrow is visible. Clicking on this brings an off-canvas menu sliding in from the right.

Having different colours to the left and right of a centered header while allowing the viewport to be an arbitrary size posed another challenge. I solved this one with the judicious use of :before and :after pseudoelement and z-indices.

One last challenge related to the slider. The client wanted that striking first image to be shown for about 60% longer than the other slides. I achieved this by adding a callback function with a timeout to the after event in the slider API.