The Pickup Soccer Site

Duration: 20 to 30 minutes.

In this exercise, you will create the first page of a site dedicated to listing local soccer (football, if you aren't in the US!) games - a place for folks to find pickup games at local fields where anyone can join in the game. The recreational soccer player who might not be interested in joining a formal league can find a game, and those looking for players to join their game can list the location and time for their games.

The screenshot below shows the design specs. We'll render the design first as a fixed-width, pixel-based page. Your assignment is as follows:

Open FlexibleGrids/Exercises/pickupsoccerinflexible/index.html and FlexibleGrids/Exercises/pickupsoccerinflexible/css/style.css in your editor.

Edit HTML and CSS:

Use a 960px-wide div for the container of the page;

Style the left main column as 593px; style the right sidebar column as 259px wide;

About Us

Soccer Pickup is your source for finding local recreational soccer games for adults. Leagues are great - but sometimes you just want to lace up your boots and find an informal game. Check back often to find a game near you!

Soccer Pickup: Your guide to finding a game.

A nav tag wraps an unordered list for the navigation elements. We use divs of class game to render the individual game listings.

We float the two main columns left (#maincontent, at 593 pixels wide) and right (#sidebar, at 259 pixels wide). The nav element floats right. Individual .game elements float left, with a width half that of the containing element.