Responsive, functional FAQ Accordion HTML/CSS only !

What are you most proud of, and what would you do differently next time?

My 5th challenge done on Frontend Mentor!

This FAQ Accordion challenge was a small and rather simple one, in the sense that it didn't require as much CSS and layouts, like some of the other full landing pages I've done. However, I was tempted to try it out anyways, as I knew it would be a test of my HTML and functional CSS skills ! This challenge was meant to be done with Javascript, but I knew it could be done with only HTML and CSS, and I gave it a go ! This was also a free challenge, meaning I did not have access to a Figma file this time around, and had to practice eye-balling the dimensions !

What challenges did you encounter, and how did you overcome them?

Functional CSS As I mentioned, this challenge was meant to be done with Javascript, but I knew it could be accomplished with just HTML and CSS, with a few tricks. I was aware that I could use the 'checkbox method' in order to accomplish this, utilising input type="checkbox", label for, and the :checked: pseudo-class, in order to simulate click events ! That being said, it's my first time actually using this trick on my own, so I had to take my time with it, and I'm happy with the end result !

Background Positioning: I had some issues trying to get the background image to properly scale with with the viewport as I tested for responsiveness, in the end, with a few tweaks using background-size, I managed to get it done.

What specific areas of your project would you like help with?

All feedback are welcome and really appreciated !