Design comparison
Community feedback
- @VCaramesPosted almost 2 years ago
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 helpful1@lukeramljakPosted almost 2 years ago@vcarames I really appreciate that feedback, thank you!
0@VCaramesPosted almost 2 years ago@lukeramljak
I am glad that I was able to help out!
Keep it up!
0@lukeramljakPosted almost 2 years ago@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.
0@VCaramesPosted almost 2 years ago@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!
1 - The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a
- @catherineisonlinePosted almost 2 years ago
Hey, for the image, I did something like this, I hope that helps:
<div class="image-container"> img class="main-image" src="images/image-header-mobile.jpg" alt=""> </div> .image-container { display: inherit; position: relative; width: 100%; border-radius: 0 10px 10px 0; background-color: hsl(277, 64%, 61%); } .main-image { width: 100%; height: 100%; position: relative; background-size: cover; border-radius: 0 10px 10px 0; mix-blend-mode: multiply; opacity: 0.75; }
IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩
0
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