Frontend Mentor | Product Preview Card coding challenge solution

Solution retrospective

Which areas of your code are you unsure of?

As much as I'm happy with the result, I know that my image should adapt to the border-radius of the main card. When trying to add a border-radius to the parent div, it would not adjust the shape of the image therefore I added a border-radius to the image itself in the media query.

Community feedback

@satyammjha

Posted about 2 years ago

Great attempt @ndrivas87. I have a few suggestions for you:-

For the border radius of image use Border-Radius: 25px 0px 0px 25px , It will set border radius of the left side of the image to 25px.
You may use transition: 0.3s ease for the button so that the change in color of the button on the hover will be smooth.
Use <br> after Gabrielle and Eau it will break the line and the title would be the same as given in the design.
You may use align-items: self-end; for the price class it will align the old price with the new price.
Use .card-info .btn {margin-top: 45px;margin-left: 32px;} . It will bring the button to the correct position.

And one last thing, change the font of the button as it was given in the style guide. Hope it helps. Happy Coding🤗✌🏻

Marked as helpful

@ndrivas87

Posted about 2 years ago

@satyammjha thanks for the feedback. I will work on those changes. Appreciate you having a look

Product Preview Card