Loading...

With divs and box model properties, you can design an online menu for a restaurant of cafe.

Divs can be great vessels of design and information. Combined 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 for each breakfast, lunch, and dinner. On each menu, list several food and drink items, include a unique background image, and utilize padding, margin and border to make your design look more visually pleasing.

Your completed assignment should contain all of the following:

a menu
  • Three menus sized at 400px by 550px are present, one for each 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).
  • Utilize padding to improve your menu designs.
  • Utilize margin to improve your menu designs.
  • Utilize border to improve your menu designs.

When you're done, save your HTML file and upload it to your Neocities account. Then submit the assignment link to your teacher. You will be graded using the following rubric:

Divs

1 point A properly sized div was used for each menu.

Background Images

1 point A background image was included on each menu.

Background Properties

1 point A background image styling property was applied to each menu.

Menu Items

1 point Several menu items are present on each menu.

Padding

1 point Padding has been utilized to improve the design.

Margin

1 point

Margin has been utilized to improve the design.

Border

1 point

Border has been utilized to improve the design.