I myself am a football player, and knowing that the World Cup is an event that happens every 4 years, I thought I'd make like a showcase of the teams and players that will participate, as it will be the last world cup for the two best players of all time - "Lionel Messi" and "Cristiano Ronaldo".
The website originally was gonna have a countdown of how many "days/hours/minutes/seconds" are left to the world cup starting - and with it's a show case of the teams that will participate in the "World Cup 2022" and a beautiful poster which shows some of the players that will participate and a tribute to "Diego Maradona" one of the best football players of all time!
Originally I was going to use HTML/CSS/SCSS/JS but due to family matters I could not work on the website more than I wanted and I had to remove some parts that I wanted to integrate, but because I didn't use JS and challenged myself to do all the animations using @keyframes on CSS/SCSS.
There was a lot of positioning challenges, as there were too many layers on top of each other and some sticking out of the "card container" which I had to hide, and I had to play a lot with "z-index" trying to layer them out perfectly.
This is my first hackathon and I'm proud of being among all of these other projects, and also I'm really proud of the UI I created which everything was created as I go.
I learned a lot about positioning, @keyframes, animations, layer positioning, gradients, on how to manipulate all of these and still have a beautiful responsive outcome.
I will definitely take my time and implement the starter idea of having a countdown and I will add all the enhancements on the "card container" which again due to family matters I could finish to what I wanted to"