Areas should be displayed in rectangular grid

[zoeames]

Story

As a user, in order to see where areas are located, I need to see the park laid out in a grid

Acceptance Criteria

Given the area data has been loaded When the application renders Then the areas should be represented to the user as a 3-3-2 grid, with the middle cell of the last row unoccupied, and each area colored with its corresponding hex value (i.e. the colorGrid value)

1	2	3
4	5	6
7		8

[daviddassau]

Rough outline of static code in index.html

<div class="container">
    <div class="row">
        <!-- 30 percent sidebar -->
        <div class="col-sm-4">

        </div>
        <!-- 3 x 3 x 2 layout -->
        <div class="col-sm-4">

        </div>
    </div>
</div>

There are only 7 "areas" in the JSON file, and 8 boxes shown above, so in the 3rd row we're going to have only 1 box to the far right.

[daviddassau]

The 7 cards, representing each "area" of the park, will be displayed dynamically on the page, using a printToDom function.

[alexsanchez728]

[GinaAntonini]

Set hex values as colors in _colors.scss

[GinaAntonini]

Data Structure: