Task 1: Page Template with Grid

Use CSS grid to recreate the page layout above. Have a header, left and right side bars, footer and main content area (where that expanding box resides). The main content area should be 4 times the height of the footer or header; the width of the main content area should be 4 times the width of either sidebar. Please set borders and backgrounds so the graders can clearly see the components. Also, ignore the text content in the left side bar - that is just for demonstration purposes.

Also, use flex to center your name in an H1 tag in the center (both height and width).

Task 2: Transition and Hover

Use flex to center (both height and width) a box as seen above. The box should be 60px X 60px and can be any color of your choosing. When your mouse hovers over the box, it should grow to 120px X 120px and change to a different color in .5 seconds.

Task 3: Clean and readable code

As always, it is important that your code and style are well formed.

Hunter's Website - Home Page - Photos - Secret Project