Blog Preview Card By Yasin Zahir

Solution retrospective
I’m proud that I built this entire layout using mostly div tags and basic HTML/CSS without any advanced frameworks. It was a great exercise in layout structure and responsive design. If I were to do it again, I’d likely try to refactor using more semantic tags and maybe explore utility-first styling or component-driven architecture to clean up the structure and improve accessibility.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges was recreating the box-shadow and depth effect from the original design. The way the image and card cast overlapping shadows was tricky. I managed to overcome it by layering multiple divs using z-index and position: absolute to fake the stacking, which gave me more control over shadow layering. It wasn’t the cleanest solution, but it worked.
What specific areas of your project would you like help with?I’d really appreciate feedback on my use of box-shadowing. I had to manually layer divs and use positioning to achieve the look, and I’m curious if there are cleaner, more efficient ways to replicate that kind of multi-depth shadow styling. Would love tips on how to better approach that kind of design in a scalable or more semantic way.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Yasin Zahir's solution.
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