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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Users should be able to:

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

• Solution URL: (https://github.com/MiloDevs/Blog-Preview-Card)
• Live Site URL: (https://milodevs.github.io/Blog-Preview-Card/)

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• CSS Has Selector
• CSS @font-face

• Use of :has() selector to toggle the hover state of the card when you hover the title
• Use of @font-face to import locally stored fonts.

.card:has(.card_title:hover){
    box-shadow: 10px 10px 0px 0px var(--neutral-black);
    transform: translate(0px, -3px);
    transition: all 0.3s ease-in-out;
}

Improve the responsiveness of the card element

• Webkit.org - This helped me learn how to select parents based on children using the :has() selector. With this I could style the Card based on it's child's (the title) active state

• Codeconsisely.com - This was a really helpful article that helped me learn about @font-face tags for importing local fonts

• Frontend Mentor - @MiloDevs