Football Shoe Page

The webpage consists of a page talking about the Adidas F50s - Lamine Yamal edition, showing its features and a buy section

Comment

Introduction

I’m a 14-year-old student in Grade 9 who is really enthusiastic about coding and web design. I enjoy creating new things through code and exploring how design and technology work together. For this hackathon, I built a modern, animated product webpage for the Lamine Yamal F50s — a football boot concept that represents speed, control, and creativity. I wanted to challenge myself to design a professional, visually appealing website using only HTML and CSS, without JavaScript. I currently know HTML, CSS, and Python, and I’m also learning bits of JavaScript to expand my skills further. This project allowed me to apply what I’ve learned while experimenting with animations, layouts, and responsive design.

Concept & Design Explanation

The Lamine Yamal F50s website is a one-page, HTML-and-CSS-only concept built to showcase the speed, style, and innovation behind the new F50 football boots. The design focuses on a clean, futuristic look with a dark neon theme, inspired by energy, motion, and Yamal’s explosive playing style. Smooth scroll animations, gradient effects, and glowing pink highlights create a dynamic and modern feel, matching the premium and fast nature of the product.

Design Choices

I used a scroll-based layout with floating visuals and animated text to make the experience feel active and alive. The “Features” section uses alternating image-text blocks for rhythm and balance, while the product customization box lets users interact by choosing shoe colors and sizes. The header image and glowing effects build a strong first impression, and the call-to-action “Pre-Order” button stands out in the final section to drive engagement. The whole site is fully responsive and lightweight, focusing on smooth visuals without any JavaScript.

Inspiration

I was inspired by modern product websites such as Apple and Lacoste Heritage, which use clean layouts and smooth scrolling animations to tell a visual story. I really liked how their designs feel alive and interactive, so I wanted to create something similar while also learning more about CSS animations. Watching multiple tutorials and experimenting with different styles helped me understand how animation can make a product webpage more engaging and professional. My goal was to make my site look sleek and premium while also showing off creativity and motion.

What it does

The webpage serves as an informative and interactive showcase for the Lamine Yamal F50s shoes. It highlights the key features of the product—like the ultra-light design, grip technology, and perfect fit—using visual sections and motion effects. Visitors can explore the design, scroll through animations, and even customise their shoes by choosing a colour and size. Finally, they can pre-order the shoes directly through the “Buy” section, making the website both visually appealing and functional.

How I built it

I built the entire webpage using HTML and CSS only, without any JavaScript. I focused on learning how to use the view() property in CSS to trigger animations when elements appear on the screen. I also experimented with transitions, gradients, and drop shadows to add more depth and energy to the visuals. The structure was designed carefully using CSS grids and media queries to ensure that the page looks good on all screen sizes. This project allowed me to improve my understanding of front-end design and creative layout building.

Challenges I ran into

Throughout the process, I faced several challenges. At first, I struggled with understanding how to properly align elements using margins, padding, and grid layouts, which caused layout bugs and overlapping sections. Some animations also didn’t work the way I expected, so I had to test and adjust them multiple times. I overcame these issues by researching online, watching tutorials, and experimenting through trial and error. In the end, all the debugging and refining helped me gain more confidence in building animated websites from scratch.

Built With

Share this project:

Updates