Skip to content
Submitted over 2 years ago

Responsive Easy-bank app in React

Patrikā€¢110
@Pjurak123
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Easybank landing page
  • HTML
  • CSS
  • JS
3intermediate

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
    @brasspetalsPosted over 2 years ago

    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
    @Pjurak123Posted over 2 years ago

    @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

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