Split Overlay

The hero image is almost obligatory for a website page header. With so many websites using this feature it pays to grab the visitor's attention by using a unique design feature.
Grid
This hero image has three layers - the image, a transparent grid overlay and a split overlay with variable color and opacity.
The grid has 3 columns and three rows and has an h1 heading, a text block and an optional CTA style link.
Images
The images are inserted using the HTML5 <picture> element in two sizes - the larger one for browser/device screen widths above the break point and the other for smaller screens. Since the image is covered by a semi transparent layer, the quality doesn't have to be that great. The images used in the demo were reduced to 1200px and 800px wide before importing into EverWeb.
Overlay
The grid overlay has three columns. Each of the three items in it have controls for column start, column span and vertical align. All the items become horizontally centered and the image becomes full height to fill the viewport on mobile phones in portrait mode.
Polygons
The left and right polygon overlay divs are created using a clip path. The angle where they meet can be adjusted from zero to 50. A value of 50 creates a vertical line and zero sets it to run from the top left to the bottom right of the image.

Cosmic Traveler - Roddy McKay

Midnight Train - Roddy McKay

Peace River - Roddy McKay

Audio MP3 Player

The player container has the audio player and a text block for track title/artist name. The player slides out on click
Player Options
There is a text field to show info inside the player when it is open. This can be used to display track or copyright info.
The player color options are black, gray, blue, red, orange & green. The initial volume can be set using a slider. Volume bars can be turned on by checking a box and the number of bars to show can be adjusted up to a maximum of 10. There is a checkbox to show/hide the progress time.
Container Options
The container is centered with a maximum width setting and has controls for background color and opacity, border radius and to add top/bottom padding to increase the height.
The text can use a Google hosted font with a web safe fallback and has controls for font size and color. There is an option to add a botom border for use as a separator when a number of players are stacked.
Wrapper Options
The wrapper has controls has controls for background color and opacity and to adjust the vertical spacing from the items above and below.
Players can be stacked with vertical spacing as shown or be stacked tight with a separator to give the appearance of a playlist player.