Submitted about 4 years ago

Four card feature section using html, css and flexbox

swethalakshmi22• 135

@swethalakshmi22

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I would like to know about any suggestion for improvement.

Community feedback

Chandrashekar Dasari• 15

@chandrasd

Posted about 4 years ago

Looks great! as @gretagr pointed out, It would be nice have it responsive. Also the shadow around the cards should be more subtle like in the design.

Try this out for card's shadow:

box-shadow: 0px 20px 56px -6px rgba(153,153,153,1);

Chandrashekar Dasari• 15

@chandrasd

Posted about 4 years ago

If you want to experiment with CSS properties without rewriting in codebase to see what it looks like, checkout this website. https://www.cssmatic.com/box-shadow

Saved me lot of time experimenting with CSS props 😄

swethalakshmi22• 135

@swethalakshmi22

Posted about 4 years ago

@chandrasd I did make it responsive and changed the box-shadow. It looks same as the design. I will use the website on my next project Thanks.

Greta• 340

@gretagr

Posted about 4 years ago

Hi, your desktop version looks really nice! Do you plan to make it responsive? This would definitely improve your project :)

swethalakshmi22• 135

@swethalakshmi22

Posted about 4 years ago

I did make it responsive with media queries for width=800px and width=375px

Greta• 340

@gretagr

Posted about 4 years ago

Ohh, ok, I see now. I think the changes for 800px breakpoint are too subtle, they don't change anything in terms of responsiveness, - the blocks still does not fit on the screen. And the 375px breakpoint is too small even for some phones.

swethalakshmi22• 135

@swethalakshmi22

Posted about 4 years ago

@gretagr Oh ok, I'll try to update it.

Please log in to post a comment

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