Blog preview card solution using CSS

Hi there, congratulations on completing this challenge. You've done a great work with this challenge! 🎉

I would like to share some of my suggestions regarding your website that might help you improve it.

• This is optional, but having a small transition would improve the box-shadow hover effect of the card.
• The heading levels should only decrease by one or if you're using an h1 in your document, then the next heading must be an h2. I noticed this issue with your document here:

<div class="card">
  <h2 class="card-title">HTML & CSS foundations</h2>
  <div class="user-details">
     <img src="assets/images/image-avatar.webp" alt="User Image" />
     <h6>Greg Hooper</h6> <!--  The heading level jumps from h2 to h6 -->
  </div>
</div>

When you're aiming to create a small text element, either use a p tag or style a heading using CSS. That might be a better option. If you wish to learn more about this, read this StackOverflow Page

Overall, you've done an impressive work. These small changes would make it more accessible and visually better.

Hope this helps you. 😃

nice shot !!! I will try using var() next time on my project as well, I really never thought about it. also, try using flexbox to play with responsiveness on your next project.

well done Modupe.