Skip to content
Submitted almost 2 years ago

Solution of Stats Preview Card Component

Zulfa Nurfajar•70
@zulfaan
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

I should more practice like this

Community feedback

  • J.D. Browne•870
    @PeshwariNaanPosted almost 2 years ago

    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
    @elidrcPosted almost 2 years ago

    @PeshwariNaan also she have to channge:

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

    for

    <footer class="attribution">
</footer>
    0
    Zulfa Nurfajar•70
    @zulfaanPosted almost 2 years ago

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

    0
    Zulfa Nurfajar•70
    @zulfaanPosted almost 2 years ago

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

    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