Faq Accordion card

Sorry for taking so long to respond, I just saw this.

I used a pseudo element and positioned it using absolute. However if I was doing it again I'd use the background property on the element itself (such as you have done) and use shorthand in the background property. If you're unfamiliar with the shorthand you can use properties such as background-orgin, background-position, background-size, etc. instead. You'll write less css with shorthand, but using the specific properties are easier to recognize what's happening right away.

Here's a link I like to reference when I need to remind myself of the shorthand for the background property: https://www.webfx.com/blog/web-design/background-css-shorthand/

Good start!

I found this challenge easier to solve by designing mobile first. There's a specific illustration used just for mobile.

First suggestion I have is switch the classes .container and .card. The 'container' will hold your 'card', and the 'card' holds the rest of the content. Also, make the first element inside the body tag a main tag instead of a div (this main tag can be your .container). This will solve one of your HTML issues in the report as well.

In managing the illustrations, try putting them in their own 'container'. I'd suggest a <figure> tag to work as a 'container' element. Put the illustration that's just a box in it's own figure element, and both of the other illustrations (mobile & desktop) in a single figure element. With the box being in it's own container it can be hidden when in mobile view and when in desktop it can be positioned aboslute within your 'card' div.

Also, that will allow you to hide the overflow of the figure element that the desktop illustration is in. Giving you the ability to crop it.

As for the shadow image, I found it easier to place that in the css as a background to the card.

Hope this helps with some of the things you want to fix! Cheers.

Thank you! Those were great tips. I have been able to do a few improvements, I have added the tags as mentioned above. I have also applied an overflow: hidden and put the shadow pattern as a background image in CSS. What would you use to position the background image right behind the graphic? Thanks again