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:
- give each section a border and padding (don't spend too much time on details you might change it soon)
- 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
- use overflow to allow scrolling if food description is too long?
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.
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:
- 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)
- 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)
- 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
- if you want to then position on the screen it using left and top
- try various levels of opacity so the full page can just be seen behind the big image