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

Stats preview card component main 4 challenge finish, html & css :D :D

Cristianβ€’ 130

@cristiandjr

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


Good day! I finish my fourth challenge! :) :D

I await constructive criticism to improve :D

thanks for reading and your time :D

Community feedback

Naveen Gumasteβ€’ 10,460

@NaveenGumaste

Posted

Hello Cristian ! Congo πŸ‘ on completing this challenge

Let's look at some of your issues, shall we:

  • Here you used wrong font-style
 <div class="stats">
          <p><span>10k+</span> companies</p>
          <p><span>314</span> templates</p>
          <p><span>12m+</span> queries</p>
        </div>

happy CodingπŸ˜€

1

Cristianβ€’ 130

@cristiandjr

Posted

@Crazimonk It's true, brother, I got confused, I hadn't thought about it that way and I solved it with the first thing that came to my mind hahaha, thanks! :D

1
Shashree Samuelβ€’ 9,260

@shashreesamuel

Posted

Hey cshjdr good job completing this challenge. Keep up the good work.

Your solution looks good however I think the card needs to be centered in the page in addition the overlay on the image is bit purplish.

I suggest the following

  • Apply some margin on the top using the margin-top property to get it in the exact center.

  • use the mix-blend-mode to achieve the light purple overlay on the image.

In terms of your accessibility issues just change <div class=`attribution`> to <footer class=`attribution`>.

I hope this helps.

Cheers, Happy coding πŸ‘

1

Cristianβ€’ 130

@cristiandjr

Posted

@TheCoderGuru Wooow bro I didn't know "mix-blend-mode" I'm going to investigate this property!!! :D

I'm going to improve the top and centering!

Good tip the footer I forgot to change it

thank you very much brother :D

1

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