Submitted over 3 years ago

Stats-preview-card-component-professional-coding

@GitHub-dev12345

A solution to the Stats preview card component challenge

Solution retrospective

I Complete 😁👍 my challenge and make a webpage responsive, this webpage design desktop version and mobile version. This webpage have difficult responsive css code. #html5 #css3 #100DaysOfCode

#100DaysDev

Code

Please log in to post a comment

Community feedback

David Emad•925
@DavidEmad01
Posted over 3 years ago
Very Nice Work 🤩

continue challenging and coding ✌✌
Marked as helpful
Ahmed Faisal•5,095
@afrussel
Posted over 3 years ago
Good work. Nice try. I would like to request you please take a look at my solution it may help you to find your issues
Marked as helpful
Lucas Piputto•305
@paiput
Posted over 3 years ago
Hi @GitHub-dev12345! Good job with challange!

There's a problem with the image overlay in the mobile view. A possible solution would be to set
```
.card .mainpic {
  background: 
    url(images/image-header-mobile.jpg) 
    hsl(277, 64%, 61%);
  background-blend-mode: multiply;
}
```
so you wouldn't need the <div class="overlay"></div> element.

And if you want to get rid of your accessibility issue, you just simply need to replace <div class="attribution">...</div> by <footer class="attribution">...</footer>

Hope that helps

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