Design comparison
SolutionDesign
Solution retrospective
Any Information is welcomed
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Abdulbasit, congratulations for your new solution!
You're having trouble with the overlay effect you can fix that using
mix-blend-mode
and placing the component in the center, see the code fixes below:Give the body the proper alignment:
body { display: flex; font-family: "Inter", sans-serif; background-color: hsl(233, 47%, 7%); font-size: 15px; min-height: 100vh; align-items: center; justify-content: center; }
Proper overlay effect:
img { mix-blend-mode: multiply; opacity: 0.8;}
Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/stats-preview-card-vanilla-css-custom-design-text-animation-RfGBFlMpwK
π I hope this helps you and happy coding!
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