Design comparison
Solution retrospective
Hi, everyone! :) The most difficult part for this one was to place the box illustration. I solved it by wrapping the illustrations in a <div> and adding the "overflow: hidden" on that element instead of the card and positioning the box element as an absolutely positioned element in relation to the card. If you have another idea of how to do this and improve any other part of my solution, I would appreciate it very much. I learn a lot from other people's comments. Thank you all!
Community feedback
- @buneeIsSloPosted over 2 years ago
Hey! @Kristina225, Amazing work on this challenge, your webpage responds very well.
I took a look at your code and noticed that you used
<div>for the accordion, in case you didn't know, using the<details>and<summary>tags would have made the challenge much easier to solve and you wouldn't need any JS.Also, you're missing the drop shadow, use this:
box-shadow: 0px 50px 40px 0px rgba(0, 0, 0, 0.2);Hope this helps :)
Marked as helpful1@Kristina225Posted over 2 years ago@buneeIsSlo thank you, that helps a lot! I didn't know about the <details> and <summary> tags. I also often forget about the box-shadow in the projects. I will fix it now and check out the <details> and <summary> tags to see how I would use them in future projects. Thank you again!
1
Please log in to post a comment
Log in with GitHub
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