Exercise
========

Task 1
------

Using a CSS framework or your own 12-column CSS code, create a single, responsive HTML file that builds the small and large layouts shown below:

.. figure:: ../_static/week06/task_01_small.png
    :alt: Layout with five rows in a 12 column grid. Row 1: Cell "Logo here" 8 wide, Cell "Menu" 4 wide. Row 2: Cell "Main Menu" 12 wide. Row 3: Cell "Content" 9 wide, Cell "Side notes" 3 wide. Row 4: Cell "Footer 1" 6 wide, Cell "Footer 2" 6 wide. Row 5: Cell "Footer 3" 12 wide.

    Small Layout

.. figure:: ../_static/week06/task_01_large.png
    :alt: Layout with three rows in a 12 column grid. Row 1: Cell "Logo here" 10 wide, Cell "Menu" 2 wide. Row 2: Cell "Main Menu" 4 wide, Cell "Content" 5 wide, Cell "Side notes" 3 wide. Row 3: Cell "Footer 1" 4 wide, Cell "Footer 2" 4 wide, Cell "Footer 3" 4 wide.

    Large Layout

You do not need to provide any content, just use the text provided in the layout. It is up to you whether you also implement the cell colours.

Compress both the HTML and CSS into a single submission and submit to "Responsive Design", "Aufgabe 1".

Task 2
------

Using a CSS framework or your own 12-column CSS code, create a single, responsive HTML file that builds the small and large layouts shown below:

.. figure:: ../_static/week06/task_02_small.png
    :alt: Layout with five rows in a 12 column grid. Row 1: Cell "Logo here" 7 wide, Cell "Menu" 5 wide. Row 2: Cell "Main Menu" 7 wide. Row 3: Cell "Title" 12 wide. Row 4: Cell "Nested Grid 1" 4 wide, Cell "Nested Grid 2" 4 wide, Cell "Nested Grid 3" 4 wide. Row 5: Cell "Nested Grid 4" 4 wide, Cell "Nested Grid 5" 4 wide, Cell "Nested Grid 6" 4 wide.

    Small Layout

.. figure:: ../_static/week06/task_02_large.png
    :alt: Layout with five rows in a 12 column grid. Row 1: Cell "Logo here" 9 wide, Cell "Menu" 3 wide. Row 2: Cell "Big Image" 8 wide with 2 columns space to the left and right. Row 3: Cell "Main Menu" 2 wide and spans this and the next two rows, Cell "Title" 10 wide. Row 4 first two columns taken up by the row-spanning cell "Main Menu", the rest distributed as: Cell "Nested Grid 1" 4 wide, Cell "Nested Grid 2" 4 wide, Cell "Nested Grid 3" 4 wide. Row 5 first two columns taken up by the row-spanning cell "Main Menu", the rest distributed as: Cell "Nested Grid 4" 4 wide, Cell "Nested Grid 5" 4 wide, Cell "Nested Grid 6" 4 wide.

    Large Layout

You do not need to provide any content, just use the text provided in the layout. It is up to you whether you also implement the cell colours.

Compress both the HTML and CSS into a single submission and submit to "Responsive Design", "Aufgabe 2".