FMCC Recipe Page

Hey, amazing job. Congrats on completing this challenge!

A few tips!

HTML:

• I like the fact that you used <figure/> as a container for the <img/>.
• It would be better to divide your page into sections using <section/> element and give each one a unique id instead of using a <div/>, this would give it a better semantic meaning. Example of sections could be Ingredients, Instructions...etc.

CSS:

• You can import multiple fonts in one @import statement like this @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Young+Serif&display=swap");
• Set the font-size: 16px for the whole document and then use rem for any other font-size like <h1/>, <h2/>. Also, your document's font size is set to 11px which way too small, make it 16px or 14px at least.
• Change the color of the text in the document to stone-600 as this is much closer to the design that the one's you used.
• Change the list-style of the Ingredients to square at least that's how I see it. It's too small.
• Add a line-height: 1.5 or margin-top & margin-bottom for list items as this looks bigger in the design.

Great job with the HTML layout, there are some duplicates in the CSS that could be cleaned up.