Skip to content
Submitted 3 months ago

Four cards on an adaptive grid

clickglue•440
@clickglue
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?

Use of Utopia adaptive font size, implemented flexible spacing. Found easy solution to get a 1-2-1 grid with an additional div. Used simple solution to direct style on DIV's to implement different colors.

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

Adaptive grid was not easy. Googled to find solution.

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

Proper use of flexible spacing and margins.

Community feedback

  • Thomas•490
    @TomSifPosted 3 months ago

    Honestly, I'm not very well placed to give advice given my level, there are several things that I don't understand yet, in particular the use of utopia, which from what I understand allows you to make the font size responsive. I see that the code is well organized and readable, I like the idea of ​​a separate css file to reset the whole thing to default. On the other hand, you might have stuck more to the design, I see small padding problems around the icons, which are not all at the same level, I tried to understand why but I didn't find out why some had margins and not others. You could have also added meta description and meta keywords tags for SEO. Otherwise, overall, congratulations for the quality of the work :)

    Marked as helpful
    1
    clickglue•440
    @clickgluePosted 3 months ago

    Thank you, you are rigjy and i should pay more attention to these elements @TomSif

    1

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