CSS Positioning

You may want to consult these slides.

The goal is to use the CSS position property to create a webpage that looks like the one below.

Use Google Images search to find clipart like the images in the example.

Here’s what it looks like with a window width of 800x530:

Here’s what it looks like when the window is 400x475 - notice how elements resize:

Here are recommended steps for making this happen:

1. Create a blank web page with just html, head, body, and a style tag.
2. Change the background of the page to be a sky blue and have a background image of clouds.
3. Create a div for the grass - position it at the bottom and give it an appropriate height.
4. Create a div for the “Farm Party!” banner - position it near the top center area, and style the text so that it’s red. For a bonus, use a fun custom font (like from Google Web Fonts) and give it the appearance of a black stroke.
5. For each of the images shown, search for an appropriate image on Google Image search - it doesn’t have to be the exact same. Try searches like “sheep animated gif” and if you need to, restrict the results to just “clip art”. When you find the image, create a img for it on the page.
6. Position each of the img elements appropriately. The sheep should be around the bottom left, the cow should be on the horizon, the dude should be dancing in the middle, the tree should be on the front right, and the sun should be around the upper right.
7. As a bonus, position a picture of your face on top of the dude, and watch yourself have a farm party!