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

Reponsive EasyBank Landing page using Boostrap Grid

#bootstrap
Aayush Juyalβ€’ 290

@aj12-houdini

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


This was a really fun and challenging task. I found constructing the reponsive navbar a bit difficult and also I was unsure on how to build the underline on hover effect on the nav bar items. I wanted to know how you guys approach to build such a website. Do you guys build it first on the mobile and then move on to the larger screens or do you build it on the large screens and then move on to the smaller screens? Overall it was a really great challenge.

Community feedback

Shuaibβ€’ 640

@JustShuaib

Posted

Hi Aayush. I really love your solution and how detailed it is. It is a job well done I must say! For the underline on the nav bar items, you could add an after pseudo element to each link item and then use position absolute to properly place it (or at least that's what I did 😁). Then you should probably add transition effects on the links to give it a nice transition feel. Also, for the hover effects,I think the lime green is closer to the design than the cyan. I was confused about this at first tooπŸ˜‚.

Marked as helpful

1

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