HTML, CSS

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Hi, Vernerk! Congrats on submitting your first solution! 🎉

  The desktop version looks great, and I really like the fadeIn animation on the card as well as the attribution! They're both very smooth and are a great touch to the solution. 🙌

  The error in your report is happening because your .hero-image technically shouldn't be a section, as it has no heading, and isn't standalone content. Change it from section to div, and your error will be gone. Here's a great article about how to section your HTML. It's a bit long, but totally worth taking a look at. I still refer back to it.

  The mobile layout has some issues. Generally, I would avoid giving your card a set height or max-height, and let the content determine the height instead. I think many of the issues here are because the .hero-image div is empty. If you use a picture element inside the .hero-image div to display the image rather than setting it as the background-image, it may help. It will also allow you to get the image coloring just right, as you need both mix-blend-mode: multiply, which you used correctly - excellent job, and a slight opacity set on the image.

  Hope this helps, and happy coding! 😄

  1

  ---

  

  vernerk•75

  @vernerkPosted over 3 years ago

  @brasspetals Thank You for the feedback and the mentioned issues...really appreciate it. The picture element point made me face-palm for sure...like why did I even wanted to include the pictures as background-images...not sure :D but thank you again!

  1