Responsive Recipe Card made with HTML and Css

@DoneWithWork

Hiya! 👋

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things I like about your solution 🎉

• Responsive
• Use of semantic HTML elements
• Clear descriptive CSS classes
• Use of CSS custom properties

Things you could improve ✍️

• Add a bit of padding to your body element so the card has room to breath on smaller viewports.

• Remove the border-radius of the image on smaller viewports so it's more in line with the design.

• Remove the wrapper <div> of the image, you can style the image directly if you want.

• You can write this padding: 20px 20px 20px 20px; as padding: 20px; it's shorthand for the same thing.

• You could remove the <thead> element as it's empty.

• Try setting the font-family on the body. Other elements will inherit the font-family from their parent due to the CSS cascade. If you want to have a different font-family for the headings you can select h1, h2, h3, h4, h5, h6 and give them that font-family instead.

I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! 🌟

Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

Happy coding! 😎