Stats preview card

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

• To get the image to look like the FEM example, you are going to want to use the mix-blend-mode along with the multiply value and include a opacity with the value of 0.8.

Code:

img {
  opacity: 0.8;
  mix-blend-mode: multiply;
}

• The images serve no other purpose than to be decorative; It adds no value. The alt tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

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

More Info:📚

MDN <ul>: The Unordered List element

Your CSS Reset is being underutilized. To fully maximize it, you will want to add more to it.

Here are some examples that you can freely use:

Josh Comeau Reset

Eric Meyer Reset

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

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

Happy Coding! 🎄🎁