Skip to content
Submitted 12 months ago

Responsive Components / HTML5 + CSS ( flexbox used )

ricardodcc•110
@ricardodcc
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

I tried to create this component using Flexbox, but I could not get the cart image and can't see why... Can someone help me out? Another thing is the button that is not clickable and I can't figure out why...

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted 12 months ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Your button is clickable; however, there's an issue. To fix it, you should use cursor: pointer on the button and utilize a pseudo-selector :hover to change its background color to another color. This will provide a visual indication to users that the button is interactive when hovered over.
    • Use <del> for discounted prices.
    • Avoid redundant words in alt attributes (e.g., "image", "photo", "picture").
    • For decorative images like the cart-icon, use an empty alt attribute. Learn more here 📘. Additional insights on the alt attribute in this article 📘.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    1
    ricardodcc•110
    @ricardodccPosted 12 months ago

    Hey, @MelvinAguilar :) , thanks for the suggestions. Going to take those to improve the next ones.

    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