Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found

Submitted

blog-preview-card by simple css styles

@islam-heddi

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@kaamiik

Posted

for the hover effect also add this

h1:hover{
  cursor: pointer;
  color: hsl(47, 88%, 63%);
}

and also add this to change box shadow when hover over h1

main:has(h1:hover) {
  box-shadow: 16px 16px hsl(0, 0%, 7%); 
}
0

T
Grace 29,310

@grace-snow

Posted

@kaamiik no you must not do that! Never add hover effects to non interactive elements like h1s. The approach is fine but it must be on an anchor element otherwise you are indicating interactivity on a non interactive element

1
P

@kaamiik

Posted

@grace-snow Yes, you’re right. I hadn’t paid attention to this point.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord