Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Card Feature Section

@Eugene-ak

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I was able to use grid to determine my layout despite this being my first project working with css grid.

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

I have to say I faced a little challenge figuring my way around grid but I was successful in the end.

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

I have to practice more on planning layouts using grid as it serves as a better solution as compared to flexbox.

Community feedback

T

@gmagnenat

Posted

Hi, congrats on completing this challenge and using CSS Grid !

I recently did this challenge too and faced the same problem in planning then you. It helped me sketch out on a paper to visually see what I wanted to achieve with the grid columns and rows.

You could check fluid typography to handle heading sizes between large and small screen. I use this tool to calculate the clamp values : Fluid Responsive Property.

To get your solution closer to the design you could soften the box shadow. I found these value to be pretty close with a box-shadow. maybe you can adjust in your drop-shadow values?

.card {
  box-shadow: 0 15px 30px -11px rgba(131, 166, 210, 0.5);
}

I hope my comment bring you something usefull.

Happy coding ✌️

Marked as helpful

0

@Eugene-ak

Posted

Thank you @gmagnenat. I believe this will go a long way to help. Responsiveness can be quite tricky 😅

0

Please log in to post a comment

Log in with GitHub
Discord logo

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