Inspiration

As passionate fans of Valorant, we wanted to create a visually appealing and informative space dedicated to the game's diverse agents. The unique personalities, abilities, and designs of each agent inspired us to build a fanpage that celebrates their impact and gives fans a place to explore their favorite characters.

What it does

The Valorant Agent Fanpage is a static website that showcases agents from the game. It includes dedicated sections for each agent with their images, abilities, and descriptions. The page is styled to reflect the vibrant and modern aesthetic of Valorant, offering users a clean and immersive browsing experience—all built using only HTML and CSS

How we built it

We built the fanpage using only HTML and CSS. HTML was used for structuring the content, while CSS was used to design the layout, apply styling, and implement interactive hover effects. No JavaScript or external frameworks were used, emphasizing simplicity and clean front-end development.

Challenges we ran into

Designing an engaging and responsive layout without JavaScript or frameworks was a key challenge. Balancing aesthetics with usability, especially across different devices, required careful use of CSS techniques like flexbox and media queries. Managing image placement and consistent styling also took iteration.

Accomplishments that we're proud of

We’re proud of how the final design turned out—visually aligned with Valorant’s theme, cleanly organized, and responsive. Creating an interactive and visually rich fanpage with only HTML and CSS, without external tools, was a rewarding challenge that we successfully tackled.

What we learned

We deepened our understanding of HTML semantics, CSS layout techniques (like flexbox and grid), and responsive design principles. We also learned how small design elements—like hover effects, consistent font usage, and color matching—can dramatically improve user experience.

What's next for Valorant Agent Fanpage

We plan to expand the fanpage by adding more agents, integrating animations, and possibly introducing interactivity with JavaScript in the future. Features like search filters, agent comparison, and ability videos could turn this static fanpage into a more dynamic, interactive platform for Valorant fans.

Built With

Share this project:

Updates

posted an update

Hey everyone! We’re excited to share the progress on our Valorant Agent Fanpage project. We’ve built a sleek, fully responsive fanpage using only HTML and CSS that highlights the unique abilities and personalities of Valorant agents. The design captures the game's vibe with vibrant colors and smooth hover effects, all while maintaining simplicity and speed.

Next steps: We plan to add more agents, refine the design for mobile devices, and explore adding animations to make the fanpage even more interactive.

Check it out and let us know which agent you’d like to see featured next!

Valorant #WebDevelopment #Hackathon #HTML #CSS #Fanpage

Log in or sign up for Devpost to join the conversation.