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

FAQ accordion card

@KarolJaworski

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


Hey, I've encountered some problems and would be really greateful if you could help me guys.

1st issue - the box image needs to appear in front of everything else. Tried using z-index, couldn't really make it work 2nd issue - I'd like to somehow make the transition smoother when the answer block appers due to the toggle press

Community feedback

Cor-Ina 250

@CorinaMurg

Posted

Hi Karol,

#1. One idea would be to use a main::before element. (I pasted at the bottom of the message what worked for me in case you don't want to see a solution right away.)

#2. I have the same issue, and don't have a solution yet. Unfortunately, transition works with just color and background color. Hopefully someone can chime in and help.

Nice work! Corina

Possible solutions:

  1. main::before { position: absolute; content: url("images/illustration-box-desktop.svg"); left: -95px; top: 245px; z-index: 10;}
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