Track your favorite teams in style with a Modern Football Leaderboard built using HTML & CSS
This project features:
-
🏆 Clean and modern leaderboard design
-
📊 Dynamic ranking display for football teams
-
🎨 Customizable styles (colors, logos, fonts)
-
📱 Responsive layout for desktop & mobile
Why this project?
Leaderboards are a fun way to display rankings, scores, and performance. With this football-themed project, you can practice front-end development while building something that looks great and is useful for real sports fans.
You can easily adapt it for tournaments, school competitions, or even eSports teams.
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
Here’s the HTML/CSS code for the project 👇
<!-- Created by CodingPorium,2025. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Team Leaderboard | CodingPorium</title> <style> /*Import Poppins Font*/ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); body { font-family: poppins, sans-serif; background: #f0f2f5; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } ::selection { background: royalblue; color: white; } .leaderboard { width: 90%; max-width: 700px; background: white; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); overflow: hidden; } .leaderboard-header { background: royalblue; color: white; text-align: center; padding: 20px; font-size: 1.5rem; font-weight: 600; } table { width: 100%; border-collapse: collapse; } th, td { padding: 15px; text-align: center; font-size: 1rem; } th { background: #f7f9fc; color: #333; } tr:nth-child(even) { background: #f9f9f9; } tr:hover { background: #eaf4ff; } .rank { font-weight: bold; color: royalblue; } </style> </head> <body> <div class="leaderboard"> <div class="leaderboard-header">🏆 Team Leaderboard</div> <table> <thead> <tr> <th>Rank</th> <th>Team</th> <th>Points</th> <th>Wins</th> <th>Losses</th> </thead> <tbody> <tr> <td class="rank">1</td> <td>Man United</td> <td>45</td> <td>15</td> <td>2</td> </tr> <tr> <td class="rank">2</td> <td>Liverpool</td> <td>38</td> <td>12</td> <td>5</td> </tr> <tr> <td class="rank">3</td> <td>Arsenal</td> <td>35</td> <td>11</td> <td>5</td> </tr> <tr> <td class="rank">4</td> <td>Chelsea</td> <td>30</td> <td>9</td> <td>8</td> </tr> <tr> <td class="rank">5</td> <td>Juventus</td> <td>25</td> <td>8</td> <td>9</td> </tr> </tbody> </table> </div> </div> </body> </html>
✨ With just a few lines of code, you’ve built your own football team leaderboard page for this year! Keep practicing and soon you’ll be building bigger and more powerful projects.
Thanks for reading, do subscribe our YouTube channel to support us in providing more awesome projects with free source code!
Post a Comment