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

Responsive Easy-bank app in React

#react
Patrikā€¢ 110

@Pjurak123

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


I had some trouble with the border-bottom on navigation items (links), for some reason, the linear gradient on the border-bottom does not work.

If anyone knows how to fix that I would appreciate it. :)

Community feedback

Anna Leighā€¢ 5,135

@brasspetals

Posted

Hi, Patrik! šŸ‘‹

I believe you need border-image in order to use a gradient (see code below). You're also only having the border apply to screens 1440px and higher, so you could probably drop that media query down to min-width: 960px, when it changes over from the mobile menu.

border-bottom: 3px solid transparent;
border-image: linear-gradient(to right, var(--clr-primary-lime-green), var(--clr-primary-bright-cyan));
border-image-slice: 1;
0

Patrikā€¢ 110

@Pjurak123

Posted

@brasspetals

Hi, Anna!

thank you very much, now it works.

Also thank you for the advice on the media query stuff.

Happy coding :)

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