Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Solution of Stats Preview Card Component

@zulfaan

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I should more practice like this

Community feedback

@PeshwariNaan

Posted

Hello Zulfa - Nice work on completing the challenge, it looks great.

If you want get the color effect to the image add mix-blend-mode: multiply; to the img element styling. You already have the background of the image div set to the purple color so this should be all you need.

Also you should get familiar with media queries and you can change the orientation of the flexbox from row to column. You can check out my solution if you want to see how I did it.

One last thing is to get rid of your 'landmark' warnings above is just wrap your body code with the <main> element like this:

<body>
   <main>
     ....all your html body code here
   </main>
</body>

This will get rid of that error.

I hope this helps and happy coding.

0

elidrc 80

@elidrc

Posted

@PeshwariNaan also she have to channge:

<div class="attribution">
</div>

for

<footer class="attribution">
</footer>
0

@zulfaan

Posted

@PeshwariNaan Hello, this is really helpful. I tried and get the color effect.. Thank you!

0

@zulfaan

Posted

@elidrc aah I see, I forgot about the <footer>. Thank you!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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