Skip to content
Submitted 8 months ago

Stats profile card

AlexStraton•70
@AlexStraton
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;m happy to have used grid, but I found it tricky to make it responsive with grid.

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

Responsiveness was tricky so I tried different approaches and different screen sizes but then different problems started to come up.

What specific areas of your project would you like help with?

  1. How do I add the filter on the image to make it red like in the example? Best I could do was to use the sepia filter.

  2. Why isn't grid responsive? When I used flexbox in my media query it worked, but if I used grid, the page didn't change at all.

  3. How can I get the .words-section to stay static and not sun into the image in the media query?

  4. How can I get the .grid to stack when minimizing the screen? I tried using flexbox and grid but nothing worked.

Community feedback

  • yas-avocad•380
    @yas-avocadPosted 8 months ago

    Hey!

    • For the '10K', '314', and '12+M', rather than using <span>, you should use <p> or <div> instead. <Span> is best used to target a specific part in a <p> or <div>, like what you did for making the word 'insights' purple. Then, set the same class for all of numbers (10k, 213, 12+M) class=numbers. You can do the same for the units too (companies, queries, ...) This is important because it makes your code simpler and easier to read.

    • For the image filter, I ended up adding an empty <div> under the <img> in my HTML. I nested both of them in another <div> and then styled it like this in CSS.:

      background-color: rgba(94, 0, 144, 0.8);
  width: 540px;
  height: 446px;
  position: absolute;
  opacity: .7;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  max-width: 100%;
    • Also, to make the dark background, you can add background-color: #0A0C1C under body in CSS.

    (Can't offer much help in the responsiveness, but hope these other tips help :) )

    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