Skip to content
Submitted about 1 year ago

Product preview card component

nirglus•270
@nirglus
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

In first I was using vh and vw for height and width, because I'm used to work with them. But as soon as it started to mess up the card component, I changed the sizes to pixles and it solved my problems. It was a good practice. If you have any tips or reviews to add, feel free to do it :)

Community feedback

  • P. Ricardo•2,370
    @pRicard0Posted about 1 year ago

    Yoo! Congratulations finishings the project!

    I have some tips for you...

    • You can add a transition when the mouse is over the button to give it a smoother color change.
    • You can add line-height to the paragraph to get closer to the original design.
    • Instead of using div for the prices... you can use em and s. This way your HTML becomes more semantic. The <em> tag is used to define emphasized text. The <s> tag specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line through it.
    Marked as helpful
    0
    nirglus•270
    @nirglusPosted about 1 year ago

    @pRicard0 Hello there, thank you for the useful tips! I've updated the solution and used some of them.

    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