Submitted about 3 years ago

HTML and CSS (flexbox, sass) responsive component

mcz• 95

@mauCZ

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had some problems with the image and the purple filter part, i saw several ways to do it, but i use the ::after ::before pseudo-elements. Any tips is welcome.

Community feedback

hardy• 3,660

@hardy333

Posted about 3 years ago

Hey, what can I say, your html looks good and clean , you are using semantic tags, your classNames are quite organized, css also looks good. website is clean cand responsive, very impressive -- GOOD JOB.

Also one small suggestion will be to add some horizontal padding to container or margins to card - on medium screen sizes.

Have a nice day.

Marked as helpful

mcz• 95

@mauCZ

Posted about 3 years ago

@hardy333 thanks, i updated the deployment

darryncodes• 6,430

@darryncodes

Posted about 3 years ago

Hi Mcz,

Excellent solution, very responsive - well done!

like you said a few options to get the image right, you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath);
also explore background-blend-mode

All the best

Marked as helpful

mcz• 95

@mauCZ

Posted about 3 years ago

@darryncodes thanks dude

darryncodes• 6,430

@darryncodes

Posted about 3 years ago

Hi Mcz,

Excellent solution, very responsive - well done!

like you said a few options to match the image to the design, you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath);
also explore background-blend-mode

All the best

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