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

Simple Product-Preview-Card Challenge Solution

@DrRuski

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Tom Golding‱ 250

@ComanderPotato

Posted

Well done with your design, you did a really good job! Only have a couple of notes in regards to the pricing, having aligned items that are connected make web designs look more appealing so if you put align-items: center; in your .price class, will horizontally align your items and make it look nicer. Changing the font-size of some of the elements could also drastically improve your design, as well as adjusting line-height for items such as your paragraph and header, rule of thumb for line-height, is the bigger the font the smaller the line height, and vice versa. Apart from that next step is learning media queries to get a fully responsive product card so good job!

1

@DrRuski

Posted

@ComanderPotato Thanks for the feedback, i do have knowledge about media queries and such so that would be the next step. Regarding the centering i did consider it but i was mainly trying to code in a way that would look like the provided design.

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