Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats preview card component

@Mourad3rd

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@VCarames

Posted

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

  • The purpose of the Main Element is to identify the main content of your page. It is not the container of you component. After the main element, you want add a container to wrap you separate components in.

  • The statistics component is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

  • The image 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.

  • Your are missing the Source Image inside the Picture Element.

  • 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;
 
}

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃

Marked as helpful

0

@Mourad3rd

Posted

@vcarames I didn't get the main element part here so if the container is not the main element here what is the main element?

and when do I know that the image need an Alt tag or not

0

@VCarames

Posted

@Mourad3rd

Keep the Main Element where it currently is. After the Main add an “Article Element” this will now be you new container. Inside that new container, move all the components stuff inside of it

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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