This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation
What I Built
After a little break I came back for this challenge, I really liked the premise and I tried to create a design that was smooth and dynamic, this is a sports page after all. Is not as responsive and accessible as I wanted it to be, but this is the best I can do with my current time constrains and all the difficult situations on my country.
Of course I always try to adhere to the challenge rules but this time I went all out with the animations, those are the star of the show, specially the scroll animation.
Demo
For this demo I recommend to always see it in the full page view, specially in a new tab (please) and of course it will be functional in desktop (the best experience) and in mobile (the most common way).
You can see the page on a new tab clicking here
Journey
I can keep improving the code with some dry principles, specially with the aforementioned scroll animation, I repeated a lot of logic in the code but I did try my best to keep it as clean and clear as possible. The design process for this submission was my favorite part, it was not easy to choose a good color scheme, but I'm glad I landed on that red, grey and cream combo and I hope you find it pretty to look at as well.
Finding some "real" cricket images was easy with my new knowledge of the Commons Creative License, and I found some good icons in a tool I discovered in a recent DEV post (I'll try to find the post to credit it in the comments). But I also made some assets like the cricket ball pattern in the schedule section and of course, the cover image on this post.
And that's all for this one. If you're participating in the challenge, I hope you have as much satisfaction from your work as I do from mine. If not, perhaps the upcoming challenge will be your time to shine.
And as always, if you have some feedback you can write a comment or send me a DM. English is my second language, so please be nice to me ❣️ Thank you for reading up to this point, and until the next time, bye!
Top comments (3)
Nice work @rafajrg21 👏! I like it.
It's great to hear that you had a fantastic time building and designing the page 😊.
I participated in the challenge too. I learned about GSAP animation and had a good time 🎉.
You can check out my work here 👀.
Yes, we can always improve our code 👍.
There are so many amazing GSAP animations out there, and I'm still learning.🚀.
Thank Jenna! Really cool submission as well 🚀
GSAP is such a good tool, specially for complex animations, hope you keep using and improving with it. 🙌🏻
Thanks for the encouragement. :-)