Skip to content
Submitted over 1 year ago

Frontend Mentor - Product preview card component solution

Ashwani Pandey•180
@ashwanipydev
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

Review my code and suggest improvements to apply it to a real-world project. I am a newbie in this field. Please help me out, and criticism is also welcome😊

Community feedback

  • Aimal Khan•2,260
    @Aimal-125Posted over 1 year ago

    In your CSS code, just give padding: 1rem; to <body> element by using media query width max-height: 500px; for small heighted screens as mine (360 X 541 pixels). And give .attribution class padding of 0.5rem so that it nicely comes down a little bit from the card component. Otherwise your card is looking great. Thumbs up! ::)

    Marked as helpful
    0
  • Gift Richard•520
    @fibonacci001Posted over 1 year ago

    hi! Pandey, Your code is functional and interactive. Good job on using the data-icon attribute and the ::before pseudo-element to create a custom button with an icon.👍 There are some minor areas where you can improve the code, here is an example:

    .product__price {
font-size: 2rem;
}

.flex-group {
gap: 1rem;
}

    Overall, your code is well-written and meets the design specifications. I hope you find my feedback helpful.

    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