Stats preview card component with HTML CSS

Please log in to post a comment
Log in with GitHubCommunity feedback
- @AdrianoEscarabote
Hi Nikola, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
I noticed that the content is very large in higher resolutions, due to relative measurement units, prefer to use fixed measurement units in higher resolutions, for example:
.cotainer { margin: 0 auto; max-width: 1440px; }
To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); eposition mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:
img { mix-blend mode: multiply; opacity: 80%; }
You can read this content which is explaining these effects with mix-blend-mode: click here
The rest is great!
I hope it helps... 👍
Marked as helpful - Account deleted
Hey there! 👋 Here are some suggestions to help improve your code:
- To properly center your content to your page, you will want to add the following to your
Body
Element (this method uses CSS Grid):
body { min-height: 100vh; display: grid; place-content: center; }
More Info:📚
[Centering in CSS][https://moderncss.dev/complete-guide-to-centering-in-css/]
- 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.
- 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! 🍂🦃
Marked as helpful - To properly center your content to your page, you will want to add the following to your
Join 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