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

HTML,CSS and Javascript

Sebin CM 210

@sebzz2k2

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The desktop site is totally messed up. Feedback of any kind is accepted. Thankyou in advance :-)

Community feedback

Mike Hayden 1,005

@mickyginger

Posted

Hey @sebzz2k2, this is looking really nice!

You can ensure that the background fills the entire page by adding min-height: 100vh to the body element.

If you add position: relative to your images div, then you can position the images relative to that. So something like:

.images {
  position: relative;
}

img.desk-top {
  position: absolute;
  left: -400px;
  top: 30px
}

If you then add overflow: hidden to .acc_menu it will prevent the image from bleeding over the edge of the div.

Because you want the .box image to straddle the acc_menu and the background, you'll need to place it in main. You can then repeat the process on the main to position the .box image where you want it.

Hope that helps!

Marked as helpful

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