HTML, CSS

Community feedback

• 

  Dan•150

  @igafshell

  Posted almost 3 years ago

  Hey Heather!

  Congratulations on completing your first challenge on Frontend Mentor! 🎉🎉

  I would suggest that you add a few details to your code:

  • You can leave the attribution, but make sure to respect the HTML5 semantics and use the <footer> tag instead of <div>. If you want, you can make it stick to the bottom by putting the following css: body {display: grid; grid-template-rows: auto 1fr; place-items: center}. This will make the card push the footer to the bottom and occupy the rest of the space, and also center horizontally and vertically the elements.
  • Set max-width: 20rem to card body to match the size of the design and also make sure to use rem instead of px. And set width: 100%; to the .img to make it fit the card.
  • Add a box-shadow attribute to the card. You can read more about this attribute in this article.
  • Add an empty <h1> to resolve the accessibility issue. Although this is just a component, you still need to put it in.

  Well, that's about it. Happy coding!

  00

  Marked as helpful
• 

  cheapliquor•30

  @cheapliquor123

  Posted almost 3 years ago

  use display type flex and align it to centre

  10