Skip to content
Submitted 3 months ago

Responsive product preview card

Carlos Santana•260
@cacesasa
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

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

I'm happy that I was able to finish this challange with no mayor hurdles.

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

Nothing that I can think of this time.

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

I'm open to comments and suggestion that will help me to improved as a developer. Thanks

Community feedback

  • Rastislav Hepner•180
    @raswondersPosted 3 months ago

    I like your solution, namely how you solved image responsiveness with bg. I was just wondering was there particular reason you went with span instead of div in here?

     <div class="image-container">
        <span class="background-image" role="img" aria-label="Gabrielle Essence Eau De Parfum image"></span>
 </div>
    1
    Carlos Santana•260
    @cacesasaPosted 3 months ago

    @raswonders Thank you, the reason I used span is because is an inline tag instead of blog, since I'm using a background image, I needed a way to described the image for accessibility purpose. The span does not hold the image itself, just the accessibility information, the image is hold by the div image-container. I hope that explanation help.

    1
    Rastislav Hepner•180
    @raswondersPosted 3 months ago

    @cacesasa that's cool, thanks for clarifying.

    1
  • Bernardina Maldonado•10
    @btlmaldonado530Posted 3 months ago

    Nice solution. I really don't have any advice on how to improve your design. It looks more like the solution than mine did.

    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