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

Fat 850

@Fahatmah

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


Finally! I finished this challenge. I really got learnings from using grid layout because the design was kinda needed to be coded using it. I want to know more about css grid layout and tips and tricks. Maybe you can put some in a comment? Thank you!

Community feedback

Lucas 👾 104,560

@correlucas

Posted

Hello Fahatmah, congratulations for your challenge solution!

You did a really good work, wrapping all the content and setting the media queries changing the font-sizes on mobile.

I look your live site and I've some tips for you:

  1. The content wrapped inside the main container isn't proper centered because your add an unnecessary margin-top inside of the .four_card_container --> margin-top: 4.5rem;, remove that and your container will be centered.

.four_card_container { margin-top: 4.5rem; }

  1. The cards box-shadow has too much opacity, you can play with opacity and blur values to create a soft box-shadow try something around box-shadow: 40px 60px 50px -47px rgb(26 33 45 / 50%);

  2. The colored-bar in each card doesn't need a border-radius, if you look the design files you'll see that the colored bar is flat. You can create these bar using an element like an <span> and use the property overflow: hidden; to force this element stay inside the card.

  3. About flexbox and grid you can learn a lots about them reading the documentation in W3 Schools, but if you want to learn it with the practice, try these games, is a really cool way to see many grid/flex properties:

  • Flexboxfroggy : https://flexboxfroggy.com/
  • CSS Grid Garden: https://cssgridgarden.com/

I hope it help you in some way, then say me what you think about. Congrats.

Marked as helpful

2

Fat 850

@Fahatmah

Posted

@correlucas Thank you for your feedback!

Yes, I forgot to remove the margin-top hehe. Thank you for the tip for the box-shadow and for the colored bar. I somewhat got a little struggle on it. And also thank you again for the grid and flexbox recommendations, this would help me a lot.

1
Lucas 👾 104,560

@correlucas

Posted

@Fahatmah you're welcome 😊

1
Divine Obeten 2,435

@Deevyn9

Posted

Hi Fahatmah, great solution here, you should add a little more margin to the top of the cards container.

Marked as helpful

1

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