@ApplePieGiraffe
Posted
Hey, Grant Ramsay! 👋
Great job on this challenge! 👏 Your solution looks good and is responsive! 🙌
Your HTML looks pretty good! For the accordion elements, you can use the details and summary elements, which can be used to create fully functional and fairly accessible accordions right out of the box! They make creating accordions a lot easier and might be useful for your next project. If you'd like to learn more about how to use them, check out this article from MDN.
As for the images in this challenge, I placed the "background" image on the card itself (so that it wouldn't overflow over the edge of the card) and added the floating cube and the main illustration with img tags (so that I could position them in a way that they would overflow the edge of the card, which is desired). That worked out fairly well for me. 🙂 If you'd like to check out my solution for any ideas, you can do so here.
Hope you find this helpful. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful
@seapagan
Posted
Hi ApplePieGiraffe 😀
Thank you for your comment and suggestions!
I was aware that there exists a pure-HTML way to do the accordion, though not the exact details, and I have never really tried to use so thanks for the link and push in that direction. I wanted to use JS for this purely to improve my skills in 'plain' JS.
Now that I see that the details/summary tags can be heavily customised too, I'll be using that more 😁
Excellent hints on the image placement, thank you. I'll admit that probably 95% of my time and 100% of my frustration were spent trying to get the images looking good! I checked out your submission; that's outstanding work 👏 so I've pinned the link 😊
Many thanks again for your helpful comments
@ApplePieGiraffe
Posted
@seapagan
Happy to hear that was helpful! 😊 It's great that you're looking to improve your vanilla JS skills, which is always useful! 😉 Keep it up! 👍
