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

Supervisor

Monitors activity to identify project roadblocks

Team Builder

Scans our talent network to create the optimal team for your project

Karma

Regularly evaluates our talent to ensure quality

Calculator

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
Changelog
  • 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