Design comparison
Solution retrospective
Hello, Frontend Mentor coding community. This is my solution for the Stats Preview Card.
Please leave any feedback and help me to improve my solution.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @Deolabest, Congratulations on completing this challenge!
Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:
If you want to add the same effect of the design for the image overlaying it with
purple
there's a shortcut that is by usingmix-blend-mode
with the modemultiply
and with an opacity aroundopacity: 82%
, also add to the div containing theimg { mix-blend-mode: multiply; opacity: 82%;}
✌️ I hope this helps you and happy coding!
0@DeolabestPosted about 2 years ago@correlucas Thanks. I tried this option but it didn't cover the whole image.
1 - @SatellitePeacePosted about 2 years ago
Hello @Deolabest you did a wonderful job so congrats
- to get the purplish overlay on the image you can use a CSS property called mix-blend-mode and set its value to color
.image { display: block; height: 450px; mix-blend-mode: color; }
-
Also instead of wrapping your solutions ina bunch of div why not use HTML5 semantic tags like section and article
-
for example, you can wrap your images in a figure container like so
<figure class="image"> <img src="images/image-header-desktop.jpg" alt="Office Staff" class="imagedesktop"> <img src="images/image-header-mobile.jpg" alt="Office Staff" class="imagemobile"> </figure>
- you can also wrap your contents in an HTML article tag
I hope this helps
0@DeolabestPosted about 2 years ago@SatellitePeace Thanks. I really need to improve the wrappings.
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