Turn it in!
Divs can be great vessels of design and information. With background images, background colors, padding, margins, and borders, you can craft just about anything online that could be made with print design. So to practice these techniques, you are going to create online menus for your own restaurant.
You will create three menus. Using divs that are 400px wide by 550px tall, make one menu each for breakfast, lunch, and dinner. On each menu, list several food and drink items, include a unique background image, and use padding, margin, and border to make your design look more visually pleasing.
Your completed assignment should contain all of the following:
- Three menus sized at 400px by 550px for breakfast, lunch, and dinner.
- A unique background image is included on each menu.
- A CSS property has been added to each background image (background-repeat or background position).
- Padding is used to improve the menu designs.
- Margin is used to improve the menu designs.
- Border is used to improve the menu designs.
When you're done, save your HTML file and upload it to your GitHub repository and submit the assignment link to your teacher. You will be graded using the following rubric:
| Divs |
|---|
| A properly sized div was used for each menu. |
| Background Images |
| A background image was included on each menu. |
| Background Properties |
| A background image styling property was applied to each menu. |
| Menu Items |
| Several menu items are present on each menu. |
| Padding |
| Padding has been used to improve the design. |
| Margin |
| Margin has been used to improve the design. |
| Border |
| Border has been used to improve the design. |
