Mobile first approach using html,css,js

Hey @FatimahFarooq nice job on this one! 🙌 the site looks great and responds nicely. Here's some suggestions you might like to think about:

1. I prefer to avoid JS where possible. One thing that really helped me with this one was the use of the details and summary HTML elements. These have much of the functionality baked in and can be styled with a little bit CSS work.

2. This would also have the advantage of including keyboard functionality and allow the key elements to be focusable automatically. This is missing at present so I can only use my mouse to open the elements (not ideal for accessibility).

3. If you went with this approach you can also animate the opening and closing pretty simply using some code like:

details[open] summary ~ * {
	animation: sweep 0.2s ease-out;
	will-change: opacity, transform;
}

@keyframes sweep {
	0% {
		opacity: 0;
		transform: translateY(-1em);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

You also have some issues with the positioning of that pesky box image in desktop view, and you may want to have a think about how to position components overall within the viewports.

This last point is most important, I generally put a three column grid on the body and position the children elements in the center column. It's useful to get an approach that works for you as it's needed for all challenges. Let me know if you need more info on that.

But, all that aside, you've done a great job here, and positioning all those images is not easy! Nice one 👍