Skip to content
Submitted over 3 years ago

Stat preview card component with flexbox

Mohammad Ebrahimi•250
@moheb2000
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

1- I used object-fit: cover for image> Is there any better approach? 2- To colorizing image I used a violet box with low opacity. Is there a better way for this problem?

Code

Please log in to post a comment

Log in

Community feedback

  • Abdellah el aajjouri•190
    @abdellahelaajjouri

    Your card looks good , just decrease the height using max height and aligne it the content , Keep up 👌

    Marked as helpful
  • Abdo Achhoubi•330
    @abdoachhoubi

    The card is perfect 👌 but consider placing it in the center, try changing the height of the body to "100vh", and then change it's display to flex, and make the justify-content: center / and align-items: center. Take a look at my solution to learn more. https://www.frontendmentor.io/solutions/responsive-stats-preview-card-made-using-html5-and-css3--zCH01OJG

    Marked as helpful
  • PhoenixDev22•16,830
    @PhoenixDev22

    Hello @moheb2000,

    I have some suggestions regarding your solution :

    • To improve the image overlay effect you should look up blend modes. You don't need an extra div you can have the one div class="column cover", background color Use mix-blend mode and opacity to make it more like the design.

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

    body{
display:flex;
align-items: center;
justify-content: center;
width: 100%; 
min-height: 100vh;

    • Forclass="stats" , it would be better if you use an unordered list <ul> with 3 items for the stats

    • 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)

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

    Marked as helpful

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