Skip to content
Submitted over 1 year ago

Easybank Landing Page

Khawar Mehfoozβ€’530
@Khawarmehfooz
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

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
    @erenymoPosted over 1 year ago

    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
    @KhawarmehfoozPosted over 1 year ago

    @erenymo Thanks alot. 😊

    1
    SudodoSuβ€’210
    @SudodoSuPosted over 1 year ago

    @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

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