Design comparison
Solution retrospective
The biggest challenge for me on this project was all of the images and the fact that some extended beyond a div and some did not. The background images were also tricky and I used some css that I hadn't before.
As well, the animations on the accordion were tricky, getting the rotate correct and closing the sections when new ones opened.
I really appreciated looking at the front end of other people's projects, both those that implemented everything correctly (because I didn't believe it was all possible!) and those that didn't so I could see the things I needed to focus on getting right.
I would appreciate feedback on:
- the way I aligned the image
- the way I structured the divs to allow the JavaScript to do its thing.
- the opening and closing animation. I had to have a fixed height for the answers in order to animate this. I'd appreciate knowing another way to do it where I could use auto height and still get the animation.
Community feedback
- @Gurvinder-CodesPosted about 3 years ago
@placoderm for the 3rd point you can simply set the display: none for the answer and then when the click event on the question is triggered, you can toggle a class with display: block to the answer.
Hope this helps.
Peace :)
0 - @PillinPosted about 3 years ago
Hi! I hope that you are well
If you want to centered the layout vertically
you can add in main tag
height: 100vh; display: flex; align-items: center; justify-content: center;and in #card remove the margin. I hope It has been helpful.
0@placodermPosted about 3 years ago@Pillin Thank you so much!! I have never learned about vh but clearly I need to. I will be able to use this in many many of the challenges here.
Thanks for taking the time to comment. I really appreciate it.
0
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