Submitted about 2 months ago

Product preview card component using Sass

Carlos Pizarro• 100

@IncorrigibleSpirit

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

During this project, I reviewed some concepts related to designing responsive layouts and working with images.

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

Overall, the project was manageable.

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

I'm open for reviews and suggestions.

Community feedback

Zub04ek• 110

@Zub04ek

Posted about 1 month ago

Greetings, @IncorrigibleSpirit, you have completed this challenge with an excellent result 👍

I can only add that you can hide the unnecessary vertical scroll by removing margin from body or replacing it with margin: 0 auto;

I discovered some new concepts of using sass from your code, keep going!

Marked as helpful

Carlos Pizarro• 100

@IncorrigibleSpirit

Posted about 1 month ago

Hi there! Thank you for your suggestion. Good point! I will add it to my code using a media query. Why? On small devices, I will keep the margin.

Happy coding! @Zub04ek

Jaime• 150

@Jaimealicante83

Posted about 1 month ago

Hi Carlos,

Your solution looks very similar to the design. I would just modify a couple of things.

I have a few suggestions: I’d recommend checking the line-height of the card title as it seems to be a bit off compared to the Figma design.

You might want to consider removing the margin-top and margin-bottom on the body, as this causes the layout to be slightly misaligned vertically compared to the design.

Lastly, while the button shadow looks cool, it might be better to match it more closely with the original design.

Cheers!

Marked as helpful

Carlos Pizarro• 100

@IncorrigibleSpirit

Posted about 1 month ago

Hola, @Jaimealicante83 ! As the saying goes, life is made up of small details! I really value your feedback. I've made some subtle changes based on your comments.

Regarding the margin, I've decided to use another media query to enhance the desktop version. However, I still think it's important to keep the margin for the mobile one.

Happy coding!

Jan• 160

@Negligence

Posted about 1 month ago

The only minor thing that I've noticed is the applied color to .card-title

It's currently set to color: #000000;

and should instead use color: hsl(212, 21%, 14%);

But aside from that, it looks perfect in my eyes to be honest, great job 🙌🏻

Carlos Pizarro• 100

@IncorrigibleSpirit

Posted about 1 month ago

Hi @Negligence ! Thank you for reviewing my code and leaving your feedback. As you mentioned, that minor detail doesn't adhere to the guidelines! Sometimes I feel like adding a personal touch. LOL

Thanks anyway! :D and Happy coding!

Please log in to post a comment

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