Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card

P

@acandael

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I'm proud of using the Picture element for this challenge.

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

I had trouble getting the layout right for desktop. For some reason the Picture element wouldn't scale to 50%. The only way I could fix it was by setting the image element to 60% and the content div to 50%.

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

I could use some feedback on how to make the images responsive.

Community feedback

P

@Arnotts33

Posted

Hi!

Very nice solution :)

It is nice that you started using semantic html and how you structured it. Maybe you can try to extend it to the whole html file (section, button, ...).

Things I see that you could add or change:

  • Responsiveness
  • The category in capital letters
  • The original price centered with the discount price (you could use flexbox here)

Good job!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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