Responsive Card Component w/ Hover Animation CSS

Community feedback

• 

  darryncodes•6,390

  @darryncodesPosted almost 3 years ago

  Hi Christian,

  Really decent solution, nice work with this one!

  I'd recommend reviewing your accessibility and html report it's a good habit to get into:

  • i'd swap <div class="container"> with <main class="container"> so your document has one man landmark. info on semantics
  • consider having a <h1> in your design info on heading structure
  • your <span> tags should not have p-tags nested in them, here is some useful information

  Overall though a really good design aesthetically!

  Marked as helpful

  1
• 

  Éric Férole•420

  @Eric-FerolePosted almost 3 years ago

  Hi Christian, nice work. You forgot your alt attribute on your img tag, it's important for accessibility and SEO. I saw you use a div to make your overlay. It's perfectly good. But most will use the pseudo element ::before to make that kind of effect.

  For the structure I would suggest you to learn BEM methodology. Super easy to learn and it will help you to structure your class. Also, read about HTML 5. You could make your HTML structure more accessible with tag like <footer> instead of using a div with a class footer.

  Hope it helps. Keep up !

  Marked as helpful

  1

  ---

  

  Christian Lam•20

  @ui-AuxilaryPosted almost 3 years ago

  @Eric-Ferole Thanks for the advice!

  0