A CodyHouse Landing Page

CodyHouse is a full-stack Web UI/UX website stocked full of free and well designed web templates, navigation aids, and web components. CodyHouse specializes in HTML5, CSS3 [especially animations, transitions and transforms], and jQuery based designs. One of their nifty templates is a 3D Folding Panel landing page:
cdy3d
This is a classic landing page template which guides users to several pages on a website. In this case the template was adopted to show off a number PicsofCanada.com and Pixoftoronto.com webpages featuring the City of Toronto Murals and Graffiti Sites:
cdylandingfull
The template usesa  tabular four panel layout with a header on top. It is easy to extend the tabular layout to 6, 8, 10 or more panels. An odd number of panels will work but the look of the webpage is awkward. Also panels above 4 will fall below the foldline.

Here is the Murals landing page in 4 panel layout with the header hidden:
cdy4pic
Note the Click to View More button. Also be sure to use style=’width:100%;’ in the <img> tag to insure  the images  are responsive.

Click this to unfold and display the detail content page:
cdypopout
This is a separate standalone html page that is displayed in the pop out folding panel. The transformational CSS that produces this foldout effect is not trivial. But if you go to CSSNaker, you will find free and great tutorials on CSS3 Transforms, Animations, and Transition.

The code is responsive as shown in this screenshot:
cdymob1
A large phone layout has stacked images. Here is panel foldout on iPad Mini page.

However, the panel displays two scrollbars on the rightside which I have not been able to eliminate. Otherwise the Landing Page works well. I was afraid the performance would be too slow. But if you go to the TO Murals and Graffiti webpage you will see the app is remarkably fast. In summary, 3D Folding Panel is a welcome addition to a growing collection of Landing Page designs for use in Bootstrap and Foundation Zurb websites.

Leave a Reply

Your email address will not be published. Required fields are marked *