Easybank Responsive Landing Page using CSS Grid and Flexbox
Design comparison
Solution retrospective
Hi everyone!
This is my second frontendmentor challenge and this is my first attempt on making a responsive landing page. I have so much fun doing this challenge, I've learned a lot of new things but I also have a lot of struggle. I do know that this has a lot of improvement needed but I'm still very happy with what I come up.
I struggled the most with getting the intro background the mockup images responsive on the desktop design. I tried using aspect-ratio however it did not resulted to what I was hoping for, so I just stayed with using width and height properties. If anyone has suggestions or tips on how to handle responsive images especially for hero sections of the webpage, I'd highly appreciate it.
I was also not able to incorporate the changing of the fill color for the SVG icons from white to lime green on hover. If anyone knows how to do it, please let me know and I'll be very grateful.
I hope everyone a great day and onto the next challenge ~!
Community feedback
- @mako542bPosted almost 2 years ago
I usually bring the svg inline (e.g. paste the whole tag to html) - instead of bringing it as a source in the image, delete the fill property from its path and add it to the class (fill: white, and on hover fill: lime). Maybe leaving it as a image while deleting the fill property from original path of svg and pasting it in the img class would also work, i didn't try it though.
As for the hero image - it's a treaky part. With aspect ratio set, with decreasing width the height also goes down, while the section with the text gets higher, so the image doesn't cover enough height. I like result of the problem, though you could set object-fit property, so the img keeps its original aspect ratio and isn't deformed.
Marked as helpful0@leonard-ramos27Posted almost 2 years ago@mako542b Thank you so much for the info. Will definitely look more into the svg tag and the object-fit property. I appreciate it :)
0
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