Great layout challenges solved with Flex, Grid, CSS pseudo-elements
Design comparison
Solution retrospective
I chose to create the staggered boxes using grid-areas. I was very happy with the results, but I could have used Flexbox as well and have seen some fine examples that others have done using Flex.
I was having difficulty placing the background images using familiar methods until I found examples of using CSS pseudo-elements for this. Very clever I think. One of the code examples that helped me the most here was from <a href="https://github.com/Rock-n-Roll-CRC/social-proof-section/blob/master/index.html">Rock-n-Roll-CRC</a>
I got to 95% on this one in about 4 hours, but several more hours were spent on tiny tweeks. As always, any feedback is very welcome.
Community feedback
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