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 Landing Page

Khawar Mehfoozβ€’ 530

@Khawarmehfooz

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 frontendmentor Community! πŸ‘‹

I'm excited to share my first commit for the Easybank landing page challenge.πŸš€I've run into a couple of issues and I need help.

  • Firstly, I'm struggling to place the hero image below the navbar. Any tips or suggestions on how to achieve this would be really appreciated!

  • Secondly, I'm having trouble with the background pattern in the hero section.

Thank you in advance for taking the time to review my work. Let's make this landing page shine together! ✨

Community feedback

Erenβ€’ 720

@erenymo

Posted

Hi Khawar, great job !

  • To fix the first problem, just add these to the header class.

header { position: absolute; width: 100%; ... }

-To solve the second problem, I would do the same thing as well the mockup img. Create an img tag in hero__right div. And basically, name it id as mockup__bg and add these properties to that id in css.

#mockup__bg { position: absolute; right: -283px; top: -120px; width: 960px; }

I hope it will help you and fix your problems. Keep coding ! :)πŸ€—

Marked as helpful

2

Khawar Mehfoozβ€’ 530

@Khawarmehfooz

Posted

@erenymo Thanks alot. 😊

1
SudodoSuβ€’ 210

@SudodoSu

Posted

@Khawarmehfooz First: If you put z-index to 10 to the header. Second: Eren solved it above

I hope it helps.

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