Blog Preview Card: A responsive page crafted using Flexbox
Design comparison
Solution retrospective
What I am most proud of is learning how to import external fonts and use variables. For now, I wouldn't change a thing.
What challenges did you encounter, and how did you overcome them?I faced a challenge in importing external fonts, along with user tips on using variables, but I managed to overcome this obstacle through my old friend Google.
What specific areas of your project would you like help with?I would appreciate it if you could analyze my HTML and CSS code and provide feedback on how I could further improve it.
Community feedback
- @sumedhakorangaPosted 6 months ago
Nice, learned a lot from your code. One thing that you missed is the functionality where the card becomes active upon hovering.
2@0xabdulkhaliqPosted 6 months agoYeah @sumedhakoranga, you said it right!
Hi there @Flavio-sv 👋,
- Your solution would be perfectly finished if you add the hover effect as a finishing touch!
- Just add the following css rules
main { transition: box-shadow .3s; } main:hover { box-shadow: 12px 13px 0px 1px #000; }
- Now your component's hover shadows has been set properly with subtle transition to present it smoother.
Hope this suggestion helpful to you!
1@Flavio-svPosted 6 months agoHi, @sumedhakoranga
Thank you for notifying me; I had completely forgotten to implement that section.
0@Flavio-svPosted 6 months agoHi, @0xabdulkhalid
Thank you for the suggestion; I wouldn't have thought to use
transition: box-shadow .3s;
.1
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