a stats preview card using CSS and HTML
Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello , congratulations for your new solution!
Your solution is good done, but you can choose a simple way to build it, you don't really need to use
position absolute
in this challenge. You can useGRID
to create the component with 2 column, replace the widthas
max-width: 1110px(it's the container size) and
display: grid/
grid-template-column: 1fr 1fr`(this means that your component will have two columns with 50% of the container width each thats 550px).To add the exact same purple overlay effect for the image, matching the design files you can use,
filter
,background-blend-mode
ormix-blend-mode
(the best choice in my opinion). See the code belowimg { mix-blend-mode: multiply; opacity: 0.8;}
π I hope this helps you and happy coding!
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