Skip to content
Submitted about 2 years ago

Stats preview

Tomas•60
@TommyShelby21
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

Hi, my fourth project. I have a couple of questions. How do i do the stats? And how do i make background color to my image?

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @TommyShelby21, congratulations on your solution!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

    img {
mix-blend-mode: multiply;
opacity: 80%;
}

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Tomas•60
    @TommyShelby21Posted about 2 years ago

    @correlucas Hi, thanks for the answer, but the background image is still not working :(

    0
  • Benjamin Nicholas Wells•230
    @BenjaminNicholasWellsPosted about 2 years ago

    Hey Tomas 👋

    Regarding the stats: this is a good use case for flexbox because we only want to control the alignment of the items on one axis (in simpler terms we only care about what the stats div is doing from left to right; if we were concerned about how the stats div was interacting with content above and/or below it we would prefer the additional control that grid offers).

    Currently the content within the .stats div occupies the same inline environment because the content is only separated by whitespace:

    <div class="stats">
  10k+ companies
  314 templates
  12m+ queries
</div>

    Flexbox isn't going to recognise this content as 3 separate entities; they need to be contained as block elements either semantically through HTML elements:

    <div class="stats">
  <p>10k+ companies</p>
  <p>314 templates</p>
  <p>12m+ queries</p>
</div>

    Or declared as a block in CSS (although I wouldn't recommend this as a practice because it is not intuitive to whomever is reading your HTML code) :

    <div class="stats">
  <span>10k+ companies</span>
  <span>314 templates</span>
  <span>12m+ queries</span>
</div>

    span {
  display: block;
}

    Next we need to introduce a line break for each of these stats so that the stat number is positioned above the stat heading:

    <div class="stats">
  <p>10k+<br>companies</p>
  <p>314<br>templates</p>
  <p>12m+<br>queries</p>
</div>

    And finally give your .stats div the display of flex and fine-tune the typography and spacing as necessary. This code is a stable foundation for you to experiment on top of; how you configure the spacing of this .stats div can sometimes be dependent on elements around it so I'm not comfortable spelling out any particular workflow I think you should adhere to but this is the opportunity to mess around with parameters and see what affects what.

    Hope that helps with the stats! I was similarly stuck with getting the colour on the image right so can't help you there I'm afraid 😅 best of luck going forward!

    Marked as helpful
    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