Project 2:

From tuesday I started planning the design of the site.  From looking at sites my sister liked the look of appassionata.ie, I had a fair idea of the kind of look I wanted.  I did a sketch in my folder for the desktop and then brought that into photoshop. 

 Before I started designing every part I wanted to see How the liquid style works and what problems I might come across, so I started on the header of the site as I knew how this would look, and also this would give me a better understanding of liquid and what problems I might face.  Over the weekend I made my header and the main image div underneath.  Some of this was tricker than I thought as with percentages instead of pixels there is allot more that can go wrong and more elements can be affected.

Understanding how CSS inherits for me is the key part for making a site like this, and soon into making my site I flipped my CSS upside down so the phone media query is hit first.  The reason for this was for  any CSS3 transitions or effects.  It will be easier to add them to the bottom of my CSS in the desktop media query then to remove them from the tablet and phone.

I am currently working on a separate file testing a CSS3 transition view here, which I hope to use for the desktop version.  So in the image above instead of each "occasion div" having a footer of text, when hovered over the card will flip a display the text.