Inspiration
Barcelona isn’t just a football club — it’s a movement, a heartbeat that unites millions around the world. The phrase “Més que un club” captures that soul perfectly. This project was inspired by the club’s legacy of pride, resilience, and creativity. I wanted to design a fan page that radiates Barça’s colors and culture — using only HTML and CSS, no JavaScript.
What it does
The project is a highly interactive, CSS-only fan page dedicated to FC Barcelona. It brings the team’s identity to life through elegant motion effects, vibrant gradients, and dynamic layouts. The page showcases the Barça flag, the slogan Visca el Barça, and the legendary Més que un club with immersive visual styling that adapts beautifully across devices.
How we built it
Built the page structure using HTML5.
Designed all visuals and interactions with CSS3, focusing on transitions and keyframe animations.
Used flexbox and grid for layout organization and responsiveness.
Crafted a waving flag effect using gradient layers and smooth transformations.
Followed the authentic FC Barcelona color palette:
Garnet: #A50044
Blue: #004D98
Gold: #EDBB00
Challenges we ran into
Creating a visually engaging and animated design without JavaScript required a deep understanding of CSS animations and layering techniques. Achieving realism in the waving flag, maintaining smooth performance, and ensuring responsive adaptability were the main challenges faced during development.
Accomplishments that we're proud of
Building a visually compelling, interactive experience using only HTML and CSS felt like a true design victory. The project manages to capture the emotional essence of FC Barcelona — bold, unified, and proud — while staying minimal and accessible.
What we learned
Through this project, we explored the power of CSS as a storytelling medium. It proved that design can communicate energy, motion, and emotion without relying on complex code or frameworks. It also reinforced the importance of clean structure, color balance, and fluid transitions in front-end design.
What's next for Visca el Barça
Future updates could include adding multi-page navigation, a historical timeline of the club, player cards with hover animations, and a gallery of iconic moments. The next step is to make it a full interactive fan portal — still keeping the “no JavaScript” spirit alive as long as possible.
Log in or sign up for Devpost to join the conversation.