Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component

@SadeeshaJayaweera

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


It was bit harder when i was trying to add an icon to the button which is shopping cart. Which i haven't done before. However, able to add that after watching a youtube tutorial.

Please check my code and provide improvements i will be so pleased for your contribution. Thanks a lot.

Community feedback

@chinh1402

Posted

Congrats on finishing the challenge 🎉, I have some suggestions for you to improve the design of the card

  1. The challenge has a style-guide, you should follow its layout instruction because when the FEM try to take the image of your solution, it won't look good To actually design on a 1440px layout, You should follow these steps: press f12 to enter inspect mode, then use Ctrl + Shift + M (for Edge). On the top part you will see 2 numbers, Change the first number to 1440px then press enter, Now, you should be able to design on 1440px resolution
  2. The Montserrat font is easily legible, I think it is supposed to be applied on the description part of the page; while Fraunces should be used for the heading... Cause this is a perfume product, Faunces will give that soft and elegent feeling when reading while Montserrat is too bulky.
  3. You should add your card with border-radius to smooth out the edges
  4. The button has an icon that is too close to the text. You should add some more margin for them

Hope you find my suggestions useful

Happy coding ✌

Chinh.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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