Submitted over 2 years ago

Design Stats Preview Card Using Semantic HTML and CSS

Reemy• 20

@1reemy

Preview site View code

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey Community!

I completed another challenge but this time it took less time to complete, which is great! I am beginning to feel more confident with using CSS to style and position HTML tags and I think I'm making progress. For this challenge I was unable to add colour to the image provided. How is this done? I would like it a lot if I could get some feedback on this and general critique of the preview card I created.

Community feedback

Dusvy_M• 390

@dovelm

Posted over 2 years ago

To create the purple effect on the image, you must put it inside a div or figure and that div is changed opacity

Marked as helpful

Reemy• 20

@1reemy

Posted over 2 years ago

@dusvimarin Thank you so much! I will apply this to my code!

Kobinamd• 110

@Kobinamd

Posted over 2 years ago

Hi Campbell, You can check out this guy's solution and then preview his code. It's much simpler

https://www.frontendmentor.io/solutions/stats-preview-card-easy-to-read-version-with-flex-box-kDIaUwSrT#comment-616bc845ef6660213e82f231

Marked as helpful

Reemy• 20

@1reemy

Posted over 2 years ago

Thank you for this tip! I will review it closely.

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