Skip to content
Submitted about 1 year ago

Responsive page of product preview

Alejandro•50
@ahenao10
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

Community feedback

  • devusexu•130
    @devusexuPosted about 1 year ago

    For better semantics of HTML, here's my suggestion and links to docs on MDN

    1. You can use picture for RWD image
    2. You can use figure and figcaption to contain the image and the info

    For the effect of perfume, you can use text-transform: uppercase & letter-spacing so that you won't have to edit the HTML by yourself

    Marked as helpful
    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