Skip to content
Submitted over 2 years ago

Stats Preview Card Component

Chiamaka Mary-Anne Ugwu•120
@chiamaka-ugwu
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

Check this out!

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    Hello @chiamaka-ugwu ,

    I have some suggestions regarding your solution :

    • You can use <ul> to wrap the stats class="stats" . Numbers don't make sense as h1s.

    • The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. the words like companies should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

    • To improve the image overlay effect, I would prefer to leave the image in html and use blend modes. you can use background color, Use mix- blend mode and opacity to make it more like the design.

    • To center the component on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>.

    min-height: 100vh;/*using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport.Thi s also allows the body to to grow taller if the content outgrows the visible page.*/
}

    • width: 75%;Using percentages % for width can cause a lot of problem , consider using max-width to the component.

    • Remove the height height: 400px; you almost never want to set it . let the content define the height .

    • Use min-height instead on the background image half.

    • border-radius and overflow hidden to the container .

    • You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

    • Never use px for font size.

    Overall , your solution is good, Hopefully this feedback helps.

    Marked as helpful
    1
  • Karol Binkowski•1,640
    @GrzywNPosted over 2 years ago

    Great job on the challenge! Keep it up!

    Marked as helpful
    1

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