Four Card Feature Section

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  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; }

  2. 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%);

  3. 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.

  4. 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.

  22

  Marked as helpful
• 

  Divine Obeten•2,415

  @Deevyn9

  Posted almost 3 years ago

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

  10

  Marked as helpful