Complex BG effects
A stripped down page with extra guidance
web & inline fonts
Demo 1 uses a minimal hamburger navigation to call a hidden reveal menu. The navigation is always visible yet stays out of the way. The first 3 Column layout reduces beautifully to a stacked 2 Column display, saving vertical space and creating a design that does not look like a conventional 3 Column to 1 Column page.
The overall width also maintains a proportional space on each side that perfectly frames the content. at all screen sizes. I simple Foundation style accordion layout is included allowing use of any icons.
Demo 2 is similar to Demo 1 except it has a full Magellan Style navigation menu at the top and navigation dots on the right side. The page position markers and Text, are generated automatically once you label the markers.
The first 4 Column layout reduces beautifully to a stacked 2 Column display, saving vertical space and creating a design that does not look like a conventional 4 Column to 1 Column page. This layout also has a 2 Column equalised layout so that each column remains the same height and the lower price boxes remain on the same horizontal line. A simpler Footer is also used.
Similar to Demo 2 except it uses a different and more complex footer with offset overhanging logo. The top 2 Column layout reduces beautifully to a stacked 2 Column display, saving vertical space and creating a design that does not look like a conventional 2 Column to 1 Column page.
Also this layout uses a variation of the main logo used as a mask over the pseudo background. Several other divider images are available in the warehouse folder.
Demo 4 has a cleaner more clinical look suitable for many type of applications. This demo has a lot of transparency with a fixed blurred background image with a semi transparent overlay to add texture. An arrow divider is used over the fixed background.
Also Demo 4 uses a different and more complex transparent footer with offset overhanging social icons with links. There are no tricks going on in this demo, just straight up Foundation and BWD stacks.
This demo has configured examples using DooBox's Contact Form, S4S Lister, S4S HoverBox & Joe Workman's Post Office.
In addition to the Options page is a second CMS version of this page and an extra CMSEdit page to edit this CMS page. This is setup to demonstrate how to use EasyCMS or TotalCMS for text and images. An admin page is already created and tested.
Contact for more details about the CMS Edit page including accessing the password to try it out.
The Starter Page is designed with 2 purposes. Firstly, it's a quick way start building a site with a landing page, a couple of Sections and a footer and also SEO, SiteStyles all ready to start building.
Secondly, it is a good place for new Foundation users to start exploring. The 2 main modules included, i.e. a 2 Column equalised layout and a 2 Column with text and an image with a link, are a great place to start learning. Additional notes are provided with some outline guidance on how to proceed.