@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:
- 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; }
-
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%);
-
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 propertyoverflow: hidden;
to force this element stay inside the card. -
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
@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.
@correlucas
Posted
@Fahatmah you're welcome 😊