stats preview card component

Greetings! you have done a great job 😎

📌 Some accessibility and semantics recommendations for your HTML

• To improve the semantics of your HTML, you can change your <div class="attribution"> to a <footer class="attribution">
• The attribution should go outside the main
• In your styles, you have put Body instead of body. In theory, this has no effect, but it is preferable for it to be body

📌 Some suggestions

• You can use object-fit: cover in your img, this will make the image fill the entire container maintaining its aspect ratio. More info
• If your parent-container already has a margin, the padding of your body is unnecessary
• Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-family: var(--main-font);
    font-weight: var(--main-font-weight);
    background-color: var(--Very-dark-blue);
    /* padding: 3rem; */
    flex-direction: column;
    gap: 20px; /* Separate the main from the footer */
}

• With these changes you no longer need a margin-bottom in your parent-container nor a margin-top in the footer

Hey 👋 Good job on finishing the challenge! To answer your question, you can switch body property height: 100% to min-height: 100vh to center the component.

Hello @J3r3mia!

Your project looks great!

Here's how you center the card:

• Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;       /*  don't use 100%, use 100vh  */
    display: flex;
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!