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

7th Project - Four Card Feature Section Master

@FrontEndHighRoller

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


It was my first time working with Grid. It was an interesting challenge, I really like different colour on the top of each container.

What I have learned

1. Box-shadow property horizontal offset(x) | vertical offset(y) | blur radius | spread radius | color

2. grid auto value grid-template-columns: auto 1fr

  • when we have a column with multiple values from top to bottom. The auto value will adjust the width of the column according to the element which has the most content inside/taking the most space and applies the width of the element to the rest of the elements in the same column

Community feedback

@FrontEndHighRoller

Posted

3. border-top property border-top: 4px solid var(--Red);

  • this will create a nice colour on the top of the box inside.
0

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