Apply the same HTML elements as you did on front.html. Then also add a section element around the starters (but excluding the heading), one around main courses etc.

Now create this layout for the food items by:

  1. give each section a border and padding (don't spend too much time on details you might change it soon)
  2. make each section a specific height and width which fits nicely within the browser window and is big enough to hold two food items across and just over two down
  4. use overflow to allow scrolling if food description is too long?

In your CSS make those new sections display:none.  Use JavaScript so that if a user clicks on the Starter heading they see the new Starters section and the same for the other new sections.  Add a visual clue to the user so they know they need to click ont he headings.

Use the concept of a child element in CSS to style paragraphs inside a menu item differently (colour, font, size or something else) from normal paragraphs.

Come up with an attractive and usable way to display the specials.  Maybe a slide show or another JavaScript technique to allow one dish at a time to be displayed.

In this updated version of The Tuck Inn the larger popup image appears at the top of the page so improve that by adding more styles to your stylesheet:

  1. position the new div fixed (sticky?) which will mean it obscures some of the existing page but that's fine (you should be able to scroll the page and the image stays still)
  2. for this to work well the div should have the same width and height as the image (and all the other large images which will later be used as well - use the largest dimensions if they vary)
  3. if you have not already done this give it a nice border and padding (and maybe a background colour and a drop shadow if you want) so it looks good
  4. if you want to then position on the screen it using left and top
  5. try various levels of opacity so the full page can just be seen behind the big image