Index

The over all design of the Zen Garden is to create a relaxing feeling for users to experience. The layout is set off grid (all containers) are set with different heights and widths to fully exercise css floats while the background image is set as fixed with a slow scroll relating the the content and scroll positioning. There are few design choices made with the underline bars to stretch within the boundaries of page but also add depth. The details are woven between content boxes as well as the content boxes themselves stack on one another. As for the icons and text that are in different color it is to show the hover states ( or transitions ). I want to create a 3d effect on the footer icons to that they flip like a coin revealing the opposite side ( inverse color or text describing the icon e.g. css, html, validator... ). I feel like i should either add more color to the layout or maybe emphasize on the choice already made, as far as text goes, i want to experiment a little more with it, maybe increasing some words or letters even adding glyphs.

Home Page Home Page Home Page

Index2

In this comp i attempt, i utilized the background image to set the color of the content box. Type is different but with similar characteristics. The links all work the same. The darker/ light opacity icons and links are in a default state and will transition to a darker tone or inverse in color. The icons in the middle will be seen as default(light overlay) but on hover they will perform a 3d transition effect to look like a flipping coin.

comp2