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

Sunnyside agency | Responsive landing page using css grid

Martijn 400

@skorpioo

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Updated solution... For now now no questions but all feedback is welcome.

Community feedback

Benja.min 740

@BenjaDotMin

Posted

Hiya Martijn!

You can add a z-index:1 to .primary-btn. Then add z-index: -1 to your after class.

With a z-index and relative parent, the z-index:1 will act as a new scope, for the z-index:-1 (rather than the -1 sending it behind your page, it will send it behind the primary-btn) I hope this makes sense :)

0

Martijn 400

@skorpioo

Posted

@BenjaDotMin OMG.. You're amazing! Exactly.. it was sending it behind the page before. Annoying!! Didn't think about this solution. Thanks a lot!

0
Benja.min 740

@BenjaDotMin

Posted

@skorpioo Absolutely my pleasure! I have learned this the hard way too, haha - its not so obvious. Great layout by the way, I am impressed.

0
MikevPeeren 2,100

@MikevPeeren

Posted

Hey 👋

You can use :after and apply a top with a background color and a certain height.

0

Martijn 400

@skorpioo

Posted

@MikevPeeren Hey.. Thanks man.. Glad you share your knowledge, but that's what I already have. The issue is that the the :after is in front of the text. I want it to be behind the text..

0
MikevPeeren 2,100

@MikevPeeren

Posted

@skorpioo I see what you mean.

Try to make the footer have position relative with z index 1 and give the after effect position absolute with z index -1.

0
Martijn 400

@skorpioo

Posted

@MikevPeeren Yeah!! It works now. Thanks for your help Mike!

0
MikevPeeren 2,100

@MikevPeeren

Posted

@skorpioo np, make sure to make the comments as helpful if they were 😄

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