Stats preview card using html and css. Used flexbox, no grid.
Design comparison
Solution retrospective
Well, pertaining to difficulties encountered; I still can't get the best styling for the "background-blend-mode", did a lot of research on this but didn't get the desired results. I also encountered little problems while styling the image to fit perfectly in the mobile view, but it looks like I got over that. Will really appreciate any help I can get to get the assignment a 100%, thanks.
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Canice, Congratulations on completing this challenge!
Here's two tips for you:
1.The image is almost perfect, all you miss to match the blending color is to decrese the opacity to have the image less dark use a value around
opacity: 80%
:#image-box { background-image: url(./images/image-header-desktop.jpg); background-color: hsl(290deg 77% 57%); background-blend-mode: multiply; border-radius: 0 0.5em 0.5em 0; width: 50%; opacity: 80%; background-repeat: no-repeat; background-size: cover; }
2.It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.
βοΈ I hope this helps you and happy coding!
Marked as helpful1@Canice10Posted about 2 years ago@correlucas I applied this but it didn't work tooπ₯. Really lost on this one. Thanks for the tips, I'd sure make use of them.
0 - @vanzasetiaPosted about 2 years ago
Hello, Canice! π
Congratulations on finishing this challenge! π
I agree with what @correlucas said about
id
. It is not reusable. Use single class selectors instead.For the image, I recommend making the image available on the HTML. This way, you don't need to specify
width
andheight
. After that, usepicture
element to control which image should be used based on themedia
condition.Then, use
mix-blend-mode
to create the overlay. After that, you can adjust theopacity
of the image.One more suggestion is to prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well.
I hope you find this useful!
Marked as helpful0@Canice10Posted about 2 years ago@vanzasetia I've tried using the
picture
element in previous challenges but I didn't get the best out of it. I'll use more of this in my next/future projects. Thanks for the help, I really appreciate it.0@vanzasetiaPosted about 2 years ago@Canice10
Have you tried using
picture
element for this challenge? When it is not appropriate to usepicture
element on other challenges, that doesn't mean you should avoid it. Of course, It's not always the case to use thepicture
element.Use
picture
element when there are two or more versions of the images. We should be using whatever element in the right situation.Marked as helpful0@Canice10Posted about 2 years ago@vanzasetia Okay, I'll try again. Please when do you think is best for me to try out JS challenges?
0@vanzasetiaPosted about 2 years ago@Canice10
My roadmap in Frontend Mentor was to complete all the free HTML and CSS challenges first. After that, I decided to practice some JavaScript by doing the newbie JavaScript challenges first.
The most important thing is to get feedback and make sure to focus on web accessibility.
The A11Y Project website is a good resource to learn about web accessibility. I recommend reading "Solid Start - Accessibility For Beginners" to give you an overview of what needs to be considered to create an accessible website.
Marked as helpful1@Canice10Posted about 2 years ago@vanzasetia
I should be able to follow your roadmap as well. Thanks for the tip. I just submitted another assignment now.
1
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