Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Easybank Responsive Landing Page using CSS Grid and Flexbox

Leonard 270

@leonard-ramos27

Desktop design screenshot for the Easybank landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

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

mako542b 370

@mako542b

Posted

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 helpful

0

Leonard 270

@leonard-ramos27

Posted

@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
Discord logo

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