Skip to content
Submitted 8 months ago

Responsive Recipe page built using HTML & vanilla CSS

Leonardo Mendes•70
@Choconaldo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Talika Bajaj•650
    @Talika-BajajPosted 8 months ago

    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.

    0
    Leonardo Mendes•70
    @ChoconaldoPosted 8 months ago

    Hey @Talika-Bajaj. Thank you very much for the feedback. I understand your suggestion, but the design for the mobile version, concerning the image, is not the same as it is for the desktop. It seems that if I do what you suggest, the image will not be cropped as the mobile design asks for.

    It may look better but, in my opinion, it is not what was made on the design.

    0

Please log in to post a comment

Log in with GitHub

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