Skip to content
Submitted over 4 years ago

Landing page created with Gatsby, hooked up with Dato CMS

jakubfiglak•400
@jakubfiglak
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

Hey, I've finished the Easybank landing page challenge. I've created this page using Gatsby (my very first Gatsby project). I added a little feature - hooked the site up with Dato CMS, where I put all the blog posts and created pages for these posts using Gatsby Create Pages. I've got some trouble styling the hero image in the header - I couldn't figure out how to show the overflow on the bottom and hide it on the top (even if I tried overflow-y: visible, hoping that it will hide under the fixed navbar, it turned into a scroll). Any tips on how to fix that?

Community feedback

  • hardy•3,660
    @hardy333Posted about 3 years ago

    Hi, website looks very nice - good job.

    Btw in which way do you use cms ?

    3
  • Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    Awesome work, Jakub. I've still not played around with Gatsby. How are you getting on with it? Also, I've never heard of Dato CMS before. It looks good!

    For the pattern, instead of setting it as a background-image on the element itself, I'd recommend adding it to a pseudo-element, like ::before and using position: absolute;. You can then play around with the z-index value of elements to get the overlap.

    I hope that helps! Let me know if you have any more questions. Your solution is looking great! 👍

    0
    jakubfiglak•400
    @jakubfiglakPosted over 4 years ago

    @mattstuddert Hey, thanks. Gatsby is a lot of fun, it has really nice image processing (Gatsby Image) out of the box, and the integration with the CMS has also been easy. There's also a ton of other stuff, which I have to look into in the future:)

    As for my question - my main problem was not with the pattern, but with the phone image, which already is positioned absolutely. And the issue is: when I set overflow: hidden on mobile and then I change it to overflow-y: visible with a media query, it gives a scroll to the whole section.

    0
    Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    @jakubfiglak ah gotcha! Sorry, I had had a long day yesterday and misread that completely! 😅 To prevent the horizontal scroll you can keep it how you had it and then just add overflow: hidden; to the .pages__MainWrapper element that wraps the whole page.

    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