Glamup Cricket Website

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

Hello Everyone!!

What I Built

I built a cool loading animation all with HTML, CSS and a little bit jQuery and a basic structured layout for the NYRLC! This site gains the attention of the user when it loads and keep the user wondering what's coming next.
Also provided structure to the website using banner image and formatting content in card view to provide information concisely and visually appealing.

Demo

Journey

As I play cricket regularly in my life both the challenges pushed me to build something toward that, but considering the GlamUp challenge abolished me to add any HTML from file, that made me feel a little challenged. So I chose that one and thought about how I can better structure the website with just CSS and JS, that's when I first thought of showing the process of registering using interactive cards, in reality they can be clickable and take the user to next action of filling the form. Even after completing the structure and making it visually appealing, I still felt that it lacked a cricket element, that's when it hit me, I should probably add some loading animation. At first, I thought of adding a ball quitely bouncing on the bat vertically, then I thought that it would be a little bit inactive/boring.
Strangest thing happened, I was watching the highlights for India vs SA T20 World Cup Final, and that is when I felt, that I felt the most excited when I saw Jasprit Bumrah cleaning up Marco Jansen in that innings, that's when I finalised that I want the loading animation to be the stumps getting thrashed. So then I went on creating and did not stop at all. Finally was satisfied with the idea. Still had some ideas in mind such as a Cricket ball being the "scroll to top" button with some animation. But that's where I drew the line and chose to submit the entry as is.
I hope you will like it.

The above is the detailed content of Glamup Cricket Website. For more information, please follow other related articles on the PHP Chinese website!