Skip to content
Submitted 10 months ago

Product preview card using HTML, CSS

Sayan De•120
@RoosterRoo
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

  1. I am unsure about the HTML markup that I have used. Would love to get suggestions on ways to improve it.
  2. For the content, it seems that justify-content does not work on elements with display block property. Would love some suggestions or insights regarding this.

Any other suggestions or advice is appreciated. Thanks.

Community feedback

  • accama muhammad•280
    @accamamuhammadPosted 10 months ago
    1. The image and the other container (text container have the same height and width)
    2. Use padding to make your content look better
    3. Use *{margin: 0, padding: 0 } (to remove all preset margins and paddings)
    4. Use row gap to instead of margin to space horizontally placed elements equally
    5. justify-content works with "display: flex"
    6. Use "Position: absolute" & "bottom: 0" to place attribution at the bottom
    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