Skip to content
Submitted almost 3 years ago

Stats preview card component using flex

Roshan K.C•150
@roshankcpkr
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

Hoping for feedback and suggestions.

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @roshankcpkr ,

    I have some suggestions regarding your solution :

    • Use landmarks <main> to wrap the body content (no need for section )and <footer > for the attribution . HTML5 landmark elements are used to improve navigation

    • You can use <ul> to wrap the class="comp-info".

    • 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 center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>.

    
/* width: 100vw;*/
*/ height: 95vh;*/
width: 100%; /*If you set a page width, choose ``100%`` over ``100vw ``to avoid surprise horizontal scrollbars. */
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. This also allows the body to to grow taller if the content outgrows the visible page.*/
    • To improve the image overlay effect you should use blend modes. I prefer to leave the image in html. you can use background color, Use mix- blend mode and opacity to make it more like the design.

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

    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