Skip to content
Submitted over 3 years ago

Stats Preview Component

Elena Barden•170
@metehnay
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

i couldn't figure out how to color overlay image without lowering opacity. so image ended up with 0.5 opacity :(

Code

Please log in to post a comment

Log in

Community feedback

  • Daniel Montoya•320
    @dnewbie25

    Excellent job with the design. A simple solution to color the image is to create another <div> element that lies on top of the image. Set the height and width of that new div the same as the image, and then change the background color and opacity of that new <div> to the desired one. That way you won't need to start editing the image properties.

    Also, try to use semantic tags for the following challenges. For example a <main> tag and at least one <h1> tag. You completed the challenge, which was replicating the design, but it would be a great bonus to apply semantic HTML for people with vision impairment. Screen readers will work better when the semantic tags are used.

    Apart from that, you did a really good job!

    Marked as helpful

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