The container has a grid layout with 2 columns.
The image is inserted as the background of a <figure> element and has parallax scrolling applied to it.
The text is inserted in an <article> element which has an optional link.
At screen widths below the break point the text is given a transparent background and moves on top of the image. It can then be vertically aligned at the top, center or bottom.
The Parallax Split widgets on this page have their maximum width set to 1600px and the height set to 800px.
The image was cropped to half that size - 800px square - before importing into EverWeb.
Flip
Images can be flipped using Keynote. Crop the image square and drag it onto a slide in Keynote. Flip the image horizontally, take a screenshot of it and then crop it to the same size as the original.
In this example the image has been moved to the right column by checking a box to switch the item positions.
The same image is used except it was flipped before importing into EverWeb.
The three key things about an intuitive navigation system is that it tells you where you are in the website and where you can go next.
The ubiquitous "hamburger" navigation fails us in all these respects and actually takes up more of the visitor's time to navigate the site. Several popukar websites have found that NOT using a "hamburger" navigation increased their navigation clicks by 30%.
A Solution
This type of "progressive" navigation can hold as many links as you need but only displays the first few. How many will depend on the browser/device screen width and the maximum width settings of the links.
The remaining links are hidden and are displayed in a dropdown opened by a tab at the far right of the navigation.
Styles
There's a lot of options for styling the tabs to make them easier to use. The text color and the background color can be set for the links, the hover state, the dropdown tab and the current page.
The horizontal tabs can have a separator with controls for width and color. There is a separate set of controls for styling the dropdpwn separators.
Current Page
The current page indicator is really an essential for a navigation to show visitors where they are in the site in the absence of a breadcrumbs navigation. Showing the currrent page is an option turned on simply by checking a box.
Icons
When viewed on wider set browsers and device screens, the dropdown icon is a chevron down created using an SVG so that the color can be changed.
On mobile phones in portrait mode where only one or two tabs will be seen, the dropdown tab icon is switched to the familiar three horizontal bars.