@VCarames
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
-
It is best practice to use, Classes for your naming convention as classes are reusable, making them ideal for CSS styling. IDs on the other hand, are not reusable and are mainly used for JavaScript.
-
The statistics at the bottom are a list, so it should be built using an
Unordered List
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.
-
This challenges requires the use of two images 🎑 for different breakpoints. The
Picture
element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture>
<source media="(min-width: )" srcset="">
<img src="" alt="">
</picture>
More Info:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/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 theMultiply
value and include aOpacity
with the value of 0.8.
Code:
img {
opacity: 0.8;
mix-blend-mode: multiply;
}
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 🍂🦃