Submitted about 1 year ago

Product preview card component

nirglus• 270

@nirglus

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

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

@pRicard0

Posted 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

nirglus• 270

@nirglus

Posted about 1 year ago

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

Please log in to post a comment

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