Skip to content
Submitted over 1 year ago

Responsive Recipe page built using HTML & vanilla CSS

Leonardo Mendes•70
@Choconaldo
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I care for the details, and the result is that it's very close to the original Figma design.

What challenges did you encounter, and how did you overcome them?

Working on HTML tables is not as easy as I thought.

What specific areas of your project would you like help with?

Making it as close as pixel perfect as I can.

Code

Please log in to post a comment

Log in

Community feedback

  • Talika Bajaj•670
    @Talika-Bajaj

    Hi @Choconaldo, Your project is very detail-oriented and looks similar to the design.

    I'd like to suggest something that will make it even better: You have set the image style as follows:

    .header-img { height: 171px; object-fit: cover; }

    However, I think if you set the height to 300px and remove the object-fit property the image would appear perfectly on the mobile design unlike how it is appearing now.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord