Process Page for Zen Garden

Week 10: Process page

The CSS Zen Garden page originally looks like this:

My theme of the CSS Zen Garden will be called "Small World."

I spent A LOT of time working on my Zen Garden page. I really mean it.. because I made so many changes throughout. I've decided to change my colors again. I have 3 main colors and some other random colors for the layout and background. I also used different font types, about 2-3. I definitely used a lot of images and design them on Photoshop. Headers have image backgrounds. The bullet lists also have images of an icon. All of the contents are in boxes. I also had to make the layout big enough so it can repeat if other users have different monitor size. When I make the layout large, other users won't see any cutoffs of the layout when they zoom out. It took a while for me to figure out of some of the coding to separate boxes, display in blocks and inline.. that was hard. I used gradients on the layout and reflection to make the title look better. The headers have images. I couldn't separate the "download the html and css" and the "A demonstration.." quote part. I couldn't figure it out, so I can't place it at different places. I changed the background with a white-greyish box now, instead of the yellow squiggly lines on the side. It made more sense with the box attached with the background instead of having the yellow lines lying on the side.

Here are the colors & font types I used:


Here are some of the images I used. I got them from Getty:

You will see the rest when I have it done and ready on the website! :) I am almost done!