Frontend Mentor | Four Cards coding challenge solution

@iprinceroyy

Posted almost 2 years ago

Hey @victorebegbuna, You did a good job. But this solution is not robust. I would suggest another approach which is easy:

You should first create one main container for the four cards.
Set the display property for the container to flex in mobile view. Like this .container{ display: flex; flex-direction: column; }
For desktop view, use the @media query & change the display property. @media (min-width:992px){ .container{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } }

You can see this approach in my solution. I've done it. I hope it adds to your learning, happing coding :)

Marked as helpful

imad• 3,310

@imadbg01

Posted almost 2 years ago

Greetings Victor Ebegbuna, Congratulations on completing this challenge!, the desktop version looks great, but you need to work more on mobile version, and also checked your code and i see that you're using box model to control layout which is fine for this page but things will get hard to maintain on large project, I will suggest to you is to use either Flexbox or Grid , to control The Layout wish will make your life easy.

over all you did well Happy coding and keep up the good work 👍

Marked as helpful

Lucas 👾• 104,580

@correlucas

Posted almost 2 years ago

👾Hello Victor, congratulations for you new solution, I can see that you're taking harder challenges and this is amazing. You're improving.

Overall your solution its almost done, you need only to work a bit with the design elements.

1.The colored bar inside each card isn't rounded, a quick way to do that is to use a <span> inside each card and give it a height around 8px and the specific color, this way the colored bar dont follow the border-radius of the card.

2.Work the box-shadows, the shadow is a bit strong, you need to give it less opacity and more blur. This a good value for the shadow look box-shadow: 0 0.9375rem 1.875rem -0.6875rem rgb(131 166 210 / 50%);

Use this only tool to manage your box-shadow and just drop the code, this way you can edit it without touch a line of code: https://www.cssmatic.com/box-shadow

Hope it helps Victor, keep it up!

Victor Ebegbuna• 170

@victorebegbuna

Posted almost 2 years ago

@correlucas I Am not too clear about no.1 suggestion, am I to use the <span> in the HTML or CSS and where am I to use height, is it possible to show me an example?

As for no.2, I have tried it but the shadow seems too dark compared to the original design.

Lucas 👾• 104,580

@correlucas

Posted almost 2 years ago

@victorebegbuna Hello Victor, I did that in my solution, the height should go in the css, look the code:

span {
    display: flex;
    height: 0.3125rem;
    width: 100%;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: .5s;
}

here's my solution if you want to see how I managed the <span>

https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK/hub/4-card-feature-section-vanilla-css-custom-design-glassmorphism-35MDUfOBdt

For the box-shadow so try this value box-shadow: 0px 15px 30px -11px rgba(131, 166, 210, 0.5); is the exact same for the challenge.

Then you say me if works Victor, ok?

I hope it helps you and sorry If I wasn't so clear in my last comment.

Four Cards

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community