Skip to content
Submitted almost 2 years ago

Product Preview Card using grid display

nzcastilan•40
@nzcastilan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Had a difficulty of changing the image from mobile view to desktop view. I first tried to use srcset but can't seem to make it work so I ended up creating a div with a background image instead.

Not sure also what is the best practice to use in this kind of scenarios. any feedback would be helpful :) Thanks!

Community feedback

  • namborghinii•220
    @namborghiniiPosted almost 2 years ago

    Looks good so far! :)

    Please add a hover effect for the button and try to center the text and icon within the button field next time.

    Marked as helpful
    1
    nzcastilan•40
    @nzcastilanPosted almost 2 years ago

    @namborghinii Thank you so much for your feedback, I've updated my code to center the text and icon plus added the hover effect as well :) Thanks!

    1
    namborghinii•220
    @namborghiniiPosted almost 2 years ago

    @nzcastilan You are welcome!! (The bottom left corner needs a radius too :))

    1

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