Submitted almost 2 years ago
Responsive stats preview component
@iamzaidmohammed
Design comparison
SolutionDesign
Community feedback
- @catherineisonlinePosted almost 2 years ago
Hey, for the image to match the color, I did something like this, I hope that helps, sizes might not fit your solutions but you can adapt it depending to your own code:
<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 π€©
Marked as helpful0 - @VCaramesPosted almost 2 years ago
Hey there! π Here are some suggestions to help improve your code:
- To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the
main
element.
More Info:π
- The only heading in this component is the βGet insights that help your business growβ everything else will be wrapped in a
paragraph
element.
- Along with a blank
alt tag
your βimageβ should also have aaria-hidden=βtrueβ
to fully hide it from assistive technology.
More Info:π
https://www.w3.org/WAI/tutorials/images/
- 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
- 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!ππ
1 - To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the
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