Design comparison
Solution retrospective
Hi, my fourth project. I have a couple of questions. How do i do the stats? And how do i make background color to my image?
Community feedback
- @correlucasPosted about 2 years ago
πΎHello @TommyShelby21, congratulations on your solution!
Nice code and nice solution! You did a good job here putting everything together. Iβve some suggestions for you:
Add the website favicon inserting the svg image inside the
<head>
.<link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">
To get closer to
overlay effect
on the photo as the Figma Design its better you usemix-blend-mode
. All you need is thediv
under theimage
with thisbackground-color: hsl(277, 64%, 61%);
and applymix-blend-mode: multiply
andopacity: 80%
on theimg
orpicture
selector to activate the overlay blending the image with the color of the div. See the code bellow:img { mix-blend-mode: multiply; opacity: 80%; }
βοΈ I hope this helps you and happy coding!
Marked as helpful0@TommyShelby21Posted about 2 years ago@correlucas Hi, thanks for the answer, but the background image is still not working :(
0 - @BenjaminNicholasWellsPosted about 2 years ago
Hey Tomas π
Regarding the stats: this is a good use case for flexbox because we only want to control the alignment of the items on one axis (in simpler terms we only care about what the stats div is doing from left to right; if we were concerned about how the stats div was interacting with content above and/or below it we would prefer the additional control that grid offers).
Currently the content within the .stats div occupies the same inline environment because the content is only separated by whitespace:
<div class="stats"> 10k+ companies 314 templates 12m+ queries </div>
Flexbox isn't going to recognise this content as 3 separate entities; they need to be contained as block elements either semantically through HTML elements:
<div class="stats"> <p>10k+ companies</p> <p>314 templates</p> <p>12m+ queries</p> </div>
Or declared as a block in CSS (although I wouldn't recommend this as a practice because it is not intuitive to whomever is reading your HTML code) :
<div class="stats"> <span>10k+ companies</span> <span>314 templates</span> <span>12m+ queries</span> </div>
span { display: block; }
Next we need to introduce a line break for each of these stats so that the stat number is positioned above the stat heading:
<div class="stats"> <p>10k+<br>companies</p> <p>314<br>templates</p> <p>12m+<br>queries</p> </div>
And finally give your .stats div the display of flex and fine-tune the typography and spacing as necessary. This code is a stable foundation for you to experiment on top of; how you configure the spacing of this .stats div can sometimes be dependent on elements around it so I'm not comfortable spelling out any particular workflow I think you should adhere to but this is the opportunity to mess around with parameters and see what affects what.
Hope that helps with the stats! I was similarly stuck with getting the colour on the image right so can't help you there I'm afraid π best of luck going forward!
Marked as helpful0
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