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

flyo dark theme landing page

Sajal 150

@sajalsirohi

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


In the section "foot" of my code, how do I make it go underneath the top section as given in the design? I tried using the Z-index, but it is still not working. Any help would be really appreciated.

Community feedback

@simeon4real

Posted

First, I recommend not using IDs to style. Secondly, to fix the sign-up box not cutting across the footer properly, add:

   .info-box {
         position: relative; 
      }

You forgot to add the bg-curvy for both mobile and desktop versions. Also you didn't add the quote photo to the reviews section.

Edit: also add: border: none; to your input form

2

Sajal 150

@sajalsirohi

Posted

@simeon4real Thank you so much for your help. Yes I will add them but I was so stuck on this, so I wanted this to get over with. Thank you so much again.

Also, is it recommended to always add the position:relative tag for all the divs?

0
P
Matt Studdert 13,611

@mattstuddert

Posted

Awesome work on this challenge, Sajal! A great next step would be to try resolving the accessibility issues. You can generate a new report when you've done it to check that they're sorted. Keep up the great work! 👍

0

@simeon4real

Posted

You are welcome,Don't forget to upvote my feedback. Thanks.

Edit: For your question, You need to add position: relative to the parent container when you move it.

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