Meet Landing Page Animation

Solution retrospective
I added animation upon page opening and scroll. Next time I would try to add more complex animations and make it smoother.
What challenges did you encounter, and how did you overcome them?I had difficulty with positioning the header images offscreen. In the design they are slightly cut off on the sides. I also had a bit of issue making section 2 texts have the same margins as the one in the design.
What specific areas of your project would you like help with?I placed section 2 under main. Would putting it under footer be valid too?
When using media query, should I add "screen and"? Does that hinder or help accessibility?
Currently I have to go back and adjust every margin and padding as needed when changing from mobile to tablet to desktop in the media query. Is there a way to only change margin and padding once, and have it adjust by itself?
I had to add extra divs in the html for animation purposes. Please let me know if there's better ways to do that. If there's foundations I'm missing, any mistakes or accessibility pitfalls I'm making, please let me know as well.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on yinnie's solution.
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