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

Daniel• 110

@xBuzAx

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


Hi,

This is my second project made with frontend mentor and I am very satisfied.

Do you think I could improve something? Write, comment. I will accept any criticism :)

Community feedback

Naveen Gumaste• 10,480

@NaveenGumaste

Posted

Hay ! Daniel Good Job on challenge

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body <main class="container"></main>

-> Learn more on accessibility issues

Keep up the good work!

Marked as helpful

1

Daniel• 110

@xBuzAx

Posted

Hello, @Crazimonk

Thank you for your feedback ;) I will definitely go to the reading which and study.

1
Karishma Garg• 1,010

@krrish105

Posted

Hi @xBuzAx, Your solution looks good and responsive.

Things that can be improved:

1.In desktop layout, instead of specifying an exact width of the card, use width: fit-content. So, in future , you have to add some content then you won't have to change the width of the card.

2.In desktop layout, in .desc-middle class change your margin-bottom to 2em from 4em. I saw that after changing this, your design looked better.

  1. There are some lines of code in css that were not changing anything in your solution, like:
  • In section : paddinng: 0 2em, .desc: align-items: center, etc. Try to see these lines and remove them, so there is no extra code that is not modifying your solution in any way.

Hope this helps you. Good luck!

Marked as helpful

1

Daniel• 110

@xBuzAx

Posted

Hello @Krrish105,

Thank you very much for your objective opinion and for your guidance. I will definitely use them and try to keep them in mind.

I am very grateful.

0
P
Jessica• 880

@perezjprz19

Posted

The color for the attribution is illegible, so you might want to consider changing the color since they would not meet accessibility standards.

I would recommend using opacity and mix-blend-mode to get the color of the overlay closer to the design.

Marked as helpful

1

Daniel• 110

@xBuzAx

Posted

Hi @perezjprz19,

Thank you very much for your objective opinion and for your guidance. I was just wondering how I could get the intended effect regarding the darker purple photo.

I will definitely take advantage :)

Thank you for you suggestion.

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