Skip to content
Submitted almost 3 years ago

Stat preview card component with flexbox

Mohammad Ebrahimi•250
@moheb2000
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

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?

Community feedback

  • Abdellah el aajjouri•190
    @abdellahelaajjouriPosted almost 3 years ago

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

    Marked as helpful
    1
    Mohammad Ebrahimi•250
    @moheb2000Posted almost 3 years ago

    @abdellahelaajjouri Thanks🌸🌸🌸

    1
  • Abdo Achhoubi•330
    @abdoachhoubiPosted almost 3 years ago

    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
    1
    Mohammad Ebrahimi•250
    @moheb2000Posted almost 3 years ago

    @abdoachhoubi Really thanks. About centering element with flexbox, if height of screen become smaller, content in the box doesn't show completely. I don't know how to fix this issue but until finding a solution, I don't center my elements in the page. ❤️❤️❤️

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

    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
    0
    Mohammad Ebrahimi•250
    @moheb2000Posted almost 3 years ago

    @PhoenixDev22 Thanks a lot 🌺🌺🌺 I will use your advices

    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