Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

Four Card Feature with SASS

sass/scss
Lauren Delmar•100
@lrdelmar
A solution to the Four card feature section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am really pleased with the layout and look. My main struggle was figuring out how to align the elements on the grid. Spent a bit of time at the beginning working on the SASS architecture. The code itself didn't really take me so long, I spent a lot of time doing research and looking at different ways to get the result.

What challenges did you encounter, and how did you overcome them?

I think I spent most of the time on the cards, how to make the layout and spacing work for them. I had a look at other peoples solutions which was interesting to see how it could have been done differently. Also the box-shadow was fiddly, I made a custom colour because the lightest one provided was too dark.

What specific areas of your project would you like help with?

I chose to keep everything inside the grid. I have a min height and width on the cards which made grid alignment a little trickier. I wasn't sure if there was another way to fix the height/width of the cards without affecting the grid layout. I didn't want them to grow/shrink but wondering if I could have used a different method to achieve the same results. Thought about putting the headings outside the grid but the gap was too big. Also I was assuming this would be the component within a page so it should be all in one container.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Lauren Delmar'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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License