Skip to content
Submitted over 2 years ago

Product preview card

Adarsh•1,640
@adram3l3ch
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

Feedbacks will be appreciated :)

Community feedback

  • Josh Javier•830
    @joshjavierPosted over 2 years ago

    Hi Adarsh!

    Nice work on your solution. I really like the subtle hover transition you added to the Add to Cart button. :)

    In terms of accessibility, I noticed that you filled in a value for the button icon's alt text. This is repetitive since the button already contains actual text ("Add to Cart"). You can fix this by using an empty alt text (alt=""), which is the best practice according to WCAG. This should also fix the accessibility issue in your solution's report.

    I also noticed that the card gets cut on mobile view because you set a height to the <body> element. You can replace this rule with min-height: 100vh so that the body element can expand beyond 100vh when the content can't fit. You can also add a padding of 1-2em to the <body> element to give the card a little more breathing room.

    Happy coding!

    Marked as helpful
    4
  • Julio Velezmoro•220
    @LakorthusPosted over 2 years ago

    Great work here!

    Marked as helpful
    2
  • Zakaria•60
    @zakariabelassriPosted about 2 years ago

    Good job @adram3l3ch almost matching the design.

    Marked as helpful
    0
  • Yehan Nilanga•670
    @Yehan20Posted about 2 years ago

    Hey it looks really nice , good job good luck for the rest of the challenges

    Marked as helpful
    0
  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Adarsh, congratulations for your new solution!

    Great solution and great design, also a clean code!

    My only advice for you is about the overflow: hidden you've used to round the borders for the image, note that after 300px the text content start to crop because the overflow maybe is a better choice in this case is to use border-radius to round the image and don't have the text content cropping.

    Congrats!

    👋 I hope this helps you and happy coding!

    Marked as helpful
    0
  • Carlos Naveda•10
    @CarlosNavedaPosted about 2 years ago

    Hello @Adarsh, plz can you tell me how do you swipe between image desktop and mobile?
    in your code i don't see the import of the image mobile. thx a lot, good work!

    0
    Sidi-Ali•50
    @Sidi-AliPosted about 2 years ago

    @CarlosNaveda You can use a picture tag. https://www.w3schools.com/tags/tag_picture.asp

    0
    Carlos Naveda•10
    @CarlosNavedaPosted about 2 years ago

    @Sidi-Ali Thx I fixed it in my code.

    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