first project using HTML and CSS.

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 3 years ago

  Hey there,

  Here's a list of things you could to improve:

  1. Your card looks super small and hard to read. Not sure why you set a width of 280px on your card and on your image, but this is the source of your problem. You should also center it.

  2. More semantic markup: instead of div you could use main for your box. I'd also avoid using class names that are referring to styles("bold900, etc"), try to be more descriptive of their content instead. And instead of a tags, you could use buttons where its appropriate.

  3. Background image: there are 2 separate background images for desktop and mobile devices, use them both with adding media queries. Also, I'd suggest using background-size: contain. I noticed you uploaded one of the background images in your css folder(not sure, why) and then both of them again in the images folder. Perhaps you should get rid of the incorrect one :)

  4. And finally: there's a box-shadow on the card itself that you missed.

  I hope this helps, good luck! :)

  Marked as helpful

  0
• 

  Hafizan Adli•1,190

  @hafizanadliPosted over 3 years ago

  To position the card in the middle of the screen you can set body min-height to 100vh, and then centering box element using flex

  body { min-height:100vh; display: flex; justify-content:center; align:items:center; }

  Marked as helpful

  0