Skip to content
Submitted almost 5 years ago

Landing page using CSS Flexbox and Grid

Anne-Sophie•245
@annesophie22
A solution to the Digital bank landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Oh my god this one was really hard - and far from being perfect.

2 questions for you :

  1. Any idea on how to add a bottom border effect on a link:hover, with the border color GRADIENT ? I tried border-image-source. It worked well on preview with VS Code live server, but now it is on Vercel, I got my link bordered on the 4 sides instead of bottom only...

  2. Any genius who could explain me how to achieve the horizontal alignment of the hero section (the one with the smartphone mockups) ? I managed to get the desired design at 1440px, but whenever your screen is bigger then the hero container get bigger too and it's crap. On the other end, if I set up a fixed max-width to the hero section, then the mockup and the background image (which are 2 different files provided with the challenge) will get aligned with the rest of the website, so I do not get this overflow effect.

I tried to get it a bit more responsive instead of having it good only for 2 resolutions. It was a really tough challenge for me !

Thanks for your answer and happy coding

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Connor Z•5,115
    @zuolizhu

    Hi Anne,

    Good work on this solution 🥳. Its getting pretty close to perfect😝!

    To answer your 2 questions:

    1. The border works properly on my browser, it only shows the bottom part. I just learned the new way to use border-image-source from your code 😆.

    There are two ways I would do for the border. Instead of using border property, I would use ::after or add another div inside the <li></li>, just under a link. And then set the background to gradient, and control the "border" thickness with height. To do so, I could add some animations to display or hide the border smoother.

    1. To get the overflow effect, you can set the mockup image to position:absolute, and control the position with left and right properties.

    By the way, the footer logo need to be white text. Otherwise it will hide in the background.

    Happy coding!🙌

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