Skip to content
Submitted about 3 years ago

Design Stats Preview Card Using Semantic HTML and CSS

Reemy•20
@1reemy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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
    @dovelmPosted about 3 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

    <div> <img> </div>
    Marked as helpful
    1
    Reemy•20
    @1reemyPosted about 3 years ago

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

    0
  • Kobinamd•110
    @KobinamdPosted about 3 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
    0
  • Reemy•20
    @1reemyPosted about 3 years ago

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

    0

Please log in to post a comment

Log in with GitHub

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