Solution using Vanilla JS, CSS and HTML

Community feedback

• 

  Pranshu Dobhal•295

  @pranshudobhalPosted almost 4 years ago

  Hi Maya,

  To make the box-shadow look right. Check out these videos from Kevin Powell on box-shadow.

  https://www.youtube.com/watch?v=TZRSXNc0T1k

  https://www.youtube.com/watch?v=Yon4l3MUBGY

  It explains how to get that depth effect.

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hello, Maya Buser De! 👋

  Just wanted to say good job on this challenge! 👏 Your solution looks great and the accordion card works well! 👍

  I think using absolute positioning to place the floating cube in the desktop layout and the illustration in the mobile layout (like you've done) is definitely the way to go since they both overflow the accordion card and onto the background of the page. Using CSS background images to add the illustration in the desktop layout is nice, too, since you don't have to worry about it overflowing the container, then. Good work! 🙌

  Keep coding (and happy coding, too)! 😁

  0
• 

  istir•30

  @istirPosted almost 4 years ago

  It seems that your problem with gradient is caused by 'body' not being stretched out to the whole page. I would usually fix it with either setting "height: 100vh, overflow: hidden" to body or setting 'html' to "height:100%, width: 100%"

  0