Skip to content
Submitted 5 months ago

Responsive Product Preview Card using HTML,CSS

Kofi K•150
@Kofi100
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I was proud of easily implementing the project's layout.

What challenges did you encounter, and how did you overcome them?

Hm..can't remember rn, but I think it would've been related to implementing the layout,which wasn't so difficult.

What specific areas of your project would you like help with?

Any critique on my codes and work would be appreciated. Thanks 🙏

Code

Please log in to post a comment

Log in

Community feedback

  • Marzia Jalili•8,410
    @MarziaJalili

    Awesome!

    Some areas you can amend:

    • First, for a smoother color change of the button, you could use the transition property.
    transition: background-color 0.5s;

    This ensures that the color will change after 500 milliseconds which makes it look even better.

    • Second, the font is not the same as in the design, buddy. The font name for every project is provided by the challeng in the style-guide.md file.

    • Lastly, using grid is more conside for centering:

    display: grid;
place-items: center;

    The web looks great overall, keep up the excellent work!

    😎😎😎

    Marked as helpful

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