Skip to content
Submitted over 2 years ago

Product Preview Card

Nancy Rivas•10
@ndrivas87
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

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

  • Satyam Jha•400
    @satyammjhaPosted over 2 years ago

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

    1. 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.
    2. 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.
    3. Use <br> after Gabrielle and Eau it will break the line and the title would be the same as given in the design.
    4. You may use align-items: self-end; for the price class it will align the old price with the new price.
    5. 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
    0
    Nancy Rivas•10
    @ndrivas87Posted over 2 years ago

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

    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