
Back to Basics - Feature Section with plain CSS
Design comparison
Solution retrospective
Overall, pretty happy with this as it's the first time I've written something with pure CSS in a long time. I feel like the semantics in the markup are pretty solid - images are purely decorative so have handled this with a blank alt
attribute, and have utilised sections to semantically group each chunk of information.
Initially, I tried using border-top
to add the coloured stripes to the top of the cards, but found that doing this made it curve with the border-radius
applied to the card itself. I ended up using pseudo elements to stop this from happening while avoiding shoving pointless div
s into the DOM.
If there is anything I have done redundantly in CSS, or any way I could improve how it is written for readability, please let me know!
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