Skip to content
Submitted almost 3 years ago

Stats preview card

Richard Marks•240
@Richard2957
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

This is my second go at an FEM project, and I enjoyed doing it. It took me about 4-5 hours of coding, plus I had to do some homework. Hardest thing was the sizing of the image. I realised I couldn't use an <img> tag because the picture has to change on a media query (yes, could have used Javascript I guess), so instead I used background: url("./images/image-header-mobile.jpg") ; background-color: var(--accent); background-size:cover; background-blend-mode: multiply;

which seems to work. But hard to know whether I got it right when it resizes.

Also enjoyed getting the capitalisation of the stats (10k and 12M) right using CSS and not just changing the HTML.

Community feedback

  • Richard Marks•240
    @Richard2957Posted almost 3 years ago

    Thanks Aakash, I'll look at those.

    Interested to know how long you think a project like this should take?

    0
  • Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    Hi! Richard, First I appreciate your work, you did good, even you did it in few hours. I have noticed some issues.

    1. Your Card is too wide. (Resize it to according to screen to make it look good)
    2. You have used border-radius which is not really need.
    3. It is ok you added border radius, but look at the corner of the card. Border radius of image totally changes the look. You can make it perfect by giving border radius to the card at top right and bottom right with same value and one more things. use overflow: hidden; to make your card smooth at the corners.

    Suggestion

    You did it in few hours, I appreciate it but what you achieve ? I mean still some work is pending. There is absolutely no problem that you made it fast as you can, but I would suggest you do every project with patience and high quality priority.

    I hope you understand.

    Good Luck

    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