@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 only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a Paragraph Element.
-
The statistics component is a list of statistics, so it should be built using an Unordered List along with a List Items Element.
-
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! 🍂🦃
Marked as helpful