Design comparison
Solution retrospective
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
What I learned
This was used mostly as practice for two things: semantic HTML and CSS positioning. I was able to create the layout I wanted without using pseudo-elements which I had been doing in the past.
Continued development
One thing I did not attempt with this challenge was to use Javascript to impact active states. Since I wanted to focus mostly on honing my CSS skills, this inherently left me at a disadvantage when it comes to getting more Javascript practice. One thing that I struggled with for the CSS portion of the project was creating the overlay on the main card image. I was not able to get it color-perfect because I used opacity properties on the element behind it (which became above it on hover), thus was unable to set the opacity in the child image (eyeball) even using the !important declaration.
Useful resources
For this I used the CSS documentation on MDN.
Community feedback
- @lucasrgtPosted over 1 year ago
Your solution looks very good, but you may improve in some points:
The shadow of the card is very dark, you need to lighten it to become more soft.
.card { background-color: var(--card-bg); padding: 1.5rem; border-radius: 1rem; max-width: 350px; box-shadow: 0rem 0rem 2rem 0rem black; // instead of black, use a lighter color, like a marine blue or so. }
Other point is the alignment of the "eth balance", you need to align it with the text above (start).
The semantic HTML looks nice tho.
Marked as helpful1 - @regina-chtPosted over 1 year ago
Hi!!! I think overall your solution is great, I'm not 100% sure I can give you the best solution to the hover opacity problem, but the way I solved it was by creating a variable color in my :root with the cyan in rgba and using that to apply the opacity value.
I hope that helps!!! :)
1
Please log in to post a comment
Log in with GitHub
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