This is a solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Users should be able to:

• See hover and focus states for all interactive elements on the page

• Solution URL: github repo link
• Live Site URL: live site link

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Desktop-first workflow

I learn how to effiecienty use transition and coursour pointer in it and how to define the spread radius in box shadow the use of object fit to stretch full image in to fi its container.

To see how you can add code snippets, see below:

      <div class="card-details">
        <span>Learning</span>
        <h5>Published 21 Dec 2023</h5>
        <h1>HTML & CSS foundations</h1>
        <p>These languages are the backbone of every website, defining structure, content, and presentation.</p>
      </div>

      <div class="card-author">
        <img class="avtar" src="./assets/images/image-avatar.webp" alt="error">
      <h3>Greg Hooper</h3>
      </div>

.proud-of-this-css {
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}

• Box-Shadow - This helped me for understanding the use of box shadow in it.
• Object-fit - This is an amazing article which helped me finally the use of object fit for the svg image in card. I'd recommend it to anyone still learning this concept.

• Frontend Mentor - @debugger-rana
• Twitter - @debuggerrana