Four Card Feature Section
Here's a second project from Frontend Mentor.
If you want to see the resources for this project check here: Four Card Feature Section.
Reliable, efficient delivery
Powered by Technology
Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful
Monitors activity to identify project roadblocks
Scans our talent network to create the optimal team for your project
Regularly evaluates our talent to ensure quality
Uses data from past projects to provide better delivery estimates
Thoughts and Notes
Well this was a frustrating exercise. Getting the three columns working on the "desktop" size breakpoint was pretty difficult. I always hate to use "magic divs" because they feel like cheating. This design required one magic div with a simple mx-auto class around the middle two feature squares. After that, I had to mess with the margins a bit for the different breakpoints as well for the "Karma" feature. Otherwise, it wouldn't have the correct spacing at both breakpoints.
Points of Interest
- Magic div around middle two feature boxes
Where I Deviated
- Features are a little more square than the design
- No font here either
- Thoughts and Notes
- Fixed widths and no flexing just to make things simple
- Margin collapsing?
- Flex the right direction
- This is a Magic div.
- Boilerplate layout classes
- Help me @eleventy
- Basic content pre-styling
- Set up recap section with changelog
- Set up project section
- Set up page front matter