Skip to content
Submitted 4 months ago

Stats Preview Card Solution

Uche Ofatu•260
@Macnelson9
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

What are you most proud of, and what would you do differently next time?

I am most proud of myself for completing this challenge. I had to go upskill my HTML and CSS knowledge, but it was definitely worth it.

What challenges did you encounter, and how did you overcome them?

I think the challenge I encountered was how the image was to stack on the stats component in the mobile view, but I was able to do that using flex direction: column-reverse.

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 4 months ago

    Hi there!

    Congrats, it's look cool =) Glad to see your progress!

    That's great that you find this overlay thing. I suppose you can make it with pseudo-element as well (it's spare you from unnecessary tag). Do you already familiar with pseudo-elements? I mean ::before and ::after.

    Oh, and speaking about unnecessary tags - you can get rid of .container div and use main instead.

    Keep going, you doing great =)

    Marked as helpful
    1
    Uche Ofatu•260
    @Macnelson9Posted 4 months ago

    @Alex-Archer-I Oh I think I have to go study the pseudo elements a little bit and practice using them. Thank you for your suggestions and corrections. I'm super glad!

    1
    Alex•3,130
    @Alex-Archer-IPosted 4 months ago

    @Macnelson9

    Yeah, sure, that's not mandatory, but when you mastering them it'll be super helpful =) I even use them to create simple buttons (like "X" for close button or "hamburger") without loading extra images.

    Marked as helpful
    0
    Uche Ofatu•260
    @Macnelson9Posted 4 months ago

    @Alex-Archer-I Oh okay then. I'll definitely learn how to use them.

    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