Simple card styled by CSS

Community feedback

• 

  Pawn•320

  @CryptoPawn

  Posted over 3 years ago

  Hey! Great job with this challenge, the final product looks very good. I'd like to offer some suggestions to improve the code.

  • You have two divs with classes ´bg-1´ and ´bg-2´ which seems to be unused so they can be removed for a cleaner code.
  • I'd recommend studying Semantic HTML for better SEO optimization. In your code ´<div class="card">´ could, for example, be replaced with ´<section class="card">´.
  • For better accessibility, images should be described within the ´alt´ attribute.
  • I personally don't like ´box-shadow´ and would use ´filter: drop-shadow()´ in this situation. The filter version looks a lot smoother.
  • If you would like to center the card in exactly the middle of the website you could add following the code:

  main {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  To end on a more positive note. You used variables and pseudo-elements in an excellent way. Your code is easy to read, understand and is well structured. Keep it up and I hope to see more from you! :)

  01

  Marked as helpful
• 

  CodeWithPedro•160

  @codewithpedro

  Posted over 3 years ago

  Hi Hanna,

  I checked your solution on git and saw the preview site and they looked really good. I had the similar problem with adding the icon over an image during the hover state. I found the solution using w3school example. But going over your code I saw how you can instead add an image with a class in background-image instead of the img source. Great job!

  https://www.w3schools.com/howto/howto_css_image_overlay.asp

  01

  Marked as helpful
• 

  Shashree Samuel•8,860

  @shashreesamuel

  Posted over 3 years ago

  Hey good job completing this challenge, keep up the good work

  Your solution looks great however I think that your card needs some margin from the top using margin-top, secondly the box-shadow is supposed to be subtle hence try decreasing the value of the box-shadow a little bit.

  I hope this helps

  Cheers Happy coding 👍

  00