HTML5 | CSS | Mobile First | Custom Properties | Flexbox| Responsive
Design comparison
Solution retrospective
Im proud that I was able to figure out how to change the SVG color upon hover. I'm also proud that I was able to complete this project in a day, it has been a while since I coded and I had to re-learn a lot along the way but I did it!! ✨😇
What challenges did you encounter, and how did you overcome them?One challenge I faced: SVG color change upon hover.
How I overcame this challenge: So I basically just googled but here is what I found. Instead of using the element and linking the SVG I placed the SVG directly into the HTML and deleted the Fill property on it. ( For some reason the hover state wouldn't work without me deleting it.) Then In the CSS I used the Fill property to set the color for the hover and non-hover state of the SVG. If theres a better/ easier way to change SVG color upon hover using CSS please let me know.
What specific areas of your project would you like help with?In general there are 2 things I'd like help with:
- Box Shadow: I didn't even try to use box shadow on the buttons in this project because during my previous attempts with box shadow it never came out right. I've tried reading articles on it but I end up more confused lol. So if you have any tips on how to use box shadow correctly please let me know.
- Accuracy: One thing I'm rarely able to do is get my project as close to the design as possible. I know It wont be perfect but I'd like to do better at guessing the correct measurements for spacing, font sizing and box sizing. Please let me know if there are any resources out there that might help.
Community feedback
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