Submitted almost 2 years ago

Frontend Mentor - Product preview card component solution

@ashwanipydev

A solution to the Product preview card component challenge

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😊

Code

Please log in to post a comment

Community feedback

Aimal Khan•2,260
@Aimal-125
Posted almost 2 years 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
Gift Richard•520
@fibonacci001
Posted almost 2 years 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

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