product preview card ( desktop state)

Community feedback

• 

  Brian Schooler•440

  @superschoolerPosted over 2 years ago

  Hi Aboyhasnoname, this is a great start! You've got all the colors and general layout right, but it's missing a good bit of CSS to look like the preview and to be responsive on mobile devices.

  If you haven't already, I'd take a look through freeCodeCamp.com's curriculum to see if it can teach you a bit more about CSS that maybe you haven't picked up or been taught yet.

  Otherwise, I'd suggest doing a bit of research on the following and trying it out with this design:

  • border-radius to curve the edges of the element
  • letter-spacing to spread out the letters in "PERFUME"
  • Remove the "text-align: center" property on all the text - the demo has it all aligned left, with the exception of the button
  • Media queries to make the image change on a smaller screen and perhaps flexbox and flex-direction: column to stack the image on top of the text on the smaller screen
  • Change the text color of the button to white
  • Change the price text to green
  • Move the price text with the strikethrough so it's spaced a bit more to the right of the green price

  Let me know if you have any specific questions I can help with!

  Marked as helpful

  0

  ---

  

  ABoyHasNoName•20

  @ABoyHas-NoNamePosted over 2 years ago

  @superschooler I actually didn't know it has to be responsive , i will make correction as soon as possible though. Thank you.

  0

  

  ABoyHasNoName•20

  @ABoyHas-NoNamePosted over 2 years ago

  @superschooler Hey scholar, made my corrections ... I believe you should be able o check it boss.

  0