Design comparison
Solution retrospective
I'm proud that was able to do most of it without major issues. It shows to me that, although I still have a lot to learn, I am improving little by little.
What challenges did you encounter, and how did you overcome them?I think that one the challenges involves making the box-shadow of the card bigger and change the color of the text whenever you hover the ''HTML and CSS foundations'' text. Changing the color is a piece of cake, but I couldn't find a way to make the box-shadow of the card bigger. Unfortunately, I didn't manage to overcome this challenge, at least for now.
What specific areas of your project would you like help with?I would like to know how could I make the box-shadow of the card bigger when hovering over the ''HTML and CSS foundations'' text. This text was an 'H1' tag directly inside a 'main' tag, so I though using this line below would work.
main > h1:hover main{
}
But it seems to me that the 'hover' pseudo-class can't affect parents.
Community feedback
- @Divino-AlonsoPosted 5 months ago
Olá, @teixeirabrenno! Primeiramente, parabéns pelo seu progresso. Vejo que seu código foi bem estruturado, quanto ao html e css.
1 - @cristianccggPosted 5 months ago
Hi @teixeirabrenno. To make the box shadow bigger you just need to use the pseudoclass "hover" over the "main" which is the main container. Check the code-pen link I am attaching where I just made an example using your code. I hope it helps. Good job by the way.
main:hover{ box-shadow: 12px 12px 8px black; }
https://codepen.io/cristianccgg/full/mdYGOGp
0@teixeirabrennoPosted 5 months ago@cristianccgg
Thanks for the help. I thought I was supposed to make the shadow-box bigger only when hovering over the <h1> tag, but it could be possible that the intention of the design was to make the shadow-box bigger when hovering over the main container.
0
Please log in to post a comment
Log in with GitHubJoin 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