Stats Preview Component with Pure CSS

Replace<div class="card">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

To center .card on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

For the color of the image, give .image-container a background-color of soft violet. give the img mix-blend-mode: multiply; opacity: 0.8; width 100%.

Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hey there! 👋 Here are some suggestions to help improve your code:

• Do not forgot to check your FEM report, to see what is incorrect and update your code with it right after you submit your challenge.

• To properly center ✅ your content to your page, you will want to add the following to the body (this method uses CSS Grid):

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

More Info:📚

[Centering in CSS][https://moderncss.dev/complete-guide-to-centering-in-css/]

• For improved accessibility 📈 for your content, it is best practice to use rem for your font-size and other property value. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

• The header is not needed and being used incorrectly. The “Get insights that help your business grow.” Is a heading in this component so it should be wrapped in a heading element.

• The statistics at the bottom are a list, not a table. So it should be built using an unordered List element.

More Info:📚

MDN <ul>: The Unordered List element

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎄🎁