@VCarames
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
- 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 at the bottom **are a list **, so it should be built using an
unordered List
element.
More Info:📚
MDN <ul>: The Unordered List element
- The images serve no other purpose than to be decorative; It adds no value. The
alt tag
should left blank and have anaria-hidden=“true”
to hides it from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- 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
@lukeramljak
Posted
@vcarames I really appreciate that feedback, thank you!
@VCarames
Posted
@lukeramljak
I am glad that I was able to help out!
Keep it up!
@lukeramljak
Posted
@vcarames I'd love if you could please check out the updated code, as I've updated it per your feedback. Very glad I could remove the annoying overlay - it now looks better. The spacing/sizing I can see are still off, and I should probably spend more time looking at it.
Your code looks great. I like the use of multiple media queries spanning across multiple screen sizes, as well as the use of clamp for the font sizes. Very responsive, very nice.
@VCarames
Posted
@lukeramljak
Code looks a lot better!
I would add an in between layout to make the transition from mobile to desktop layout. Since the image gets cut off during certain breakpoints (can’t tell where exactly since I’m viewing in my cellphone). Definitely play around with the layout.
Thank you!