Skip to content
Submitted 3 months ago

Responsive product card

BekzodIsakov•100
@BekzodIsakov
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 challenges did you encounter, and how did you overcome them?
  1. Most elements have different margin-bottom is mobile viewport. I had to use media-query for each element separately which caused code repetition. Instead I replaced it with sass mixin and a loop to apply style properties passed as mixin arguments. I couldn't use hard coded arguments since each element can accept different styles

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 3 months ago

    Hi!

    Interesting work. You have clean html structure and neat code organization =) But why did you need an overlay for the picture, f you don't mind me asking?

    1
    BekzodIsakov•100
    @BekzodIsakovPosted 3 months ago

    Thanks! @Alex-Archer-I . I used it to darken the image with backdrop-filter as given in the design. After your question, I started doubting my solution and found out that I could've simply used filter property for the image element which I either didn't know or forgot

    1
    Alex•3,130
    @Alex-Archer-IPosted 3 months ago

    @BekzodIsakov

    Oh, yeah, I wanted to tell about filter but decided to ask first, just in case! That's cool that you pay attention to details =)

    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