Design comparison
Community feedback
- @VCaramesPosted about 2 years ago
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 helpful0@Mourad3rdPosted about 2 years ago@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@VCaramesPosted about 2 years ago@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 helpful0 -
Please log in to post a comment
Log in with GitHubJoin 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