Description
Task 1
In this task you will be adding another content row to the page. The content row should contain the following:
- You should create a reservation form for the user to reserve a table. The reservation form should contain a field using radio that enables the users to specify the number of guests (1-6).
- The form should contain fields to specify the date and time of the reservation. The fields should contain appropriate placeholder information and font-awesome icons to identify the purpose of the fields. Use the input-group addons for adding the icons.
- The form should contain a button named Reserve to initiate reservation of the table.
- The form should be enclosed inside a card with the heading “Reserve a Table”. The card should occupy 8 columns and centred in the row for small to extra-large screens. For extra-small screens, the card should span the entire row.
Task 2
In this task you will be formatting the content in the second row of the page. The formatting should result in the following:
- Format the content of the second column with the media class together with the media object class. Use the png image file provided for you in the img folder. The image should displayed to the right of the content description. See figure below.
- Add a badge with the word “NEW” to the content as shown in the figure below.
Task 3
In this task you will be adding a block-sized button to the Jumbotron to the right of the restaurant logo:
- The block-level button and the restaurant logo should share the right six columns of the row. The restaurant name and description can now be reduced to occupy the left six columns. Use the small button (btn-sm).
- Clicking on the button should take you down to the form for reserving a table.
Task 1
- The new content row is correctly formatted and includes the reservation form and the
“Reserve a Table” card header.
- The form contains the radios to enable specification of the number of guests.
- The form includes a date field with the font-awesome icon included
- The form includes a time field with the font-awesome icon included The form contains a reserve button.
Task 2
- The content in the row has been correctly formatted using the media class
- The image is displayed to the right of the content using the correct media-* classes and at the correct position.
- The badge is correctly displayed in the second row.
Task 3
- The Reserve Table button is correctly included in the Jumbotron and is a block size button.
- The button is correctly enclosed inside a div with the correct column specification.
- The reserve button when clicked takes us to the form. The link in the button should be set up correctly to take us to the form.
