html and CSS for a Taxi Kata involving Robots (the traffic kind)

Everything lives inside a div.road: you don't need to change this.

The first robot looks like this:

{% highlight html%}

You can change light-go (green) to lights-slowdown (orange) or lights-stop (red).

Other robots need a position:

{% highlight html%}

The position class comes in three flavours: four slots, six slots, or nine slots. Positions are calculated as a percentage of the full width. Specify positions using a x-of-y pattern, e.g. one-of-four, two-of-six, three-of-nine.

A taxi looks like this, and always needs a position:

{% highlight html%}

The position class comes in three flavours: four slots, six slots, or nine slots. Positions are calculated as a percentage of the full width. Specify positions using a slot-x-of-y pattern, e.g. slot-one-of-four, slot-two-of-six, slot-three-of-nine.

Use the same number of slots for taxis and robots or things will look weird.