Anime FC

An interactive web experience where anime heroes face off on the soccer field. Built 100% with pure HTML and CSS, without a single line of JavaScript.

Comment

Inspiration

The inspiration for Anime FC came from a simple but exciting question: What if the most iconic anime heroes settled their rivalries on a soccer field? I wanted to combine my passion for anime and sports into a single, visually engaging web experience. The main challenge I set for myself was to build this entire interactive project using only HTML and CSS, pushing the boundaries of what's possible without a single line of JavaScript.

What it does

Anime FC is an interactive web demo that allows users to:

  • Explore 3 different teams based on the universes of Naruto, Dragon Ball, and One Piece.
  • Switch between teams using a fluid, CSS-powered tab system.
  • View player cards with a 3D flip animation on hover, revealing character stats on the back.
  • Toggle between a dark and a light theme with a functional theme switcher icon.
  • Interact with micro-animations, such as a goal-scoring effect on the cards and an animated soccer field.

How I built it

This project is a showcase of modern, advanced CSS techniques. Everything you see, from the team selection logic to the theme switcher, is handled by CSS.

Key technologies and techniques used:

  • The Checkbox Hack: This is the core "engine" of the site, used to manage the state of the active team tab and the light/dark theme switcher.
  • CSS Variables (Custom Properties): Used extensively for theme management, allowing the entire page's color palette to change instantly.
  • 3D Transforms: perspective, transform-style: preserve-3d, and rotateY were used to create the signature 3D card flip effect.
  • Advanced Selectors: The general sibling combinator (~) and the :checked pseudo-class are the foundation of all the site's interactivity.
  • Animations & Transitions: @keyframes, transition, and clip-path were used to add life and polish to every element, from the bouncing ball to the smooth appearance of the player cards.
  • Flexbox: For creating a robust, responsive layout that works on all screen sizes.

Challenges I ran into

The biggest challenge was managing state without JavaScript. Creating a tab system and a theme switcher that "remember" the user's choice required a careful and precise HTML structure to allow the CSS sibling selectors (~) to work correctly. Debugging the selector logic to target the right elements was a major learning experience.

What I learned

Through this project, I gained a much deeper appreciation for the power and flexibility of modern CSS. I learned how to create complex, stateful-feeling interactions using clever selectors and structure. I also focused on professional practices like code organization, accessibility (a11y), and creating a high-quality README.md file. This hackathon taught me that with the right techniques, the line between a static page and an interactive experience can be beautifully blurred, even without JavaScript.

Built With

Share this project:

Updates