Skip to content
Submitted 7 months ago

Four Card Feature Section

Eugene Amedior•140
@Eugene-ak
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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

  • Gwenaël Magnenat•1,270
    @gmagnenatPosted 5 months ago

    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 Amedior•140
    @Eugene-akPosted 5 months ago

    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

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