Want to display live match scores on your website? This Football Scoreboard Project is built using HTML and CSS and provides a clean, modern way to showcase football scores.
Features:
-
🏆 Stylish scoreboard design with team names and scores
-
⏱️ Match timer display
-
🎨 Modern UI with gradients, shadows, and bold typography
-
📱 Fully responsive and mobile-friendly
Why this project?
Scoreboards are a must-have for sports websites, tournaments, and fan projects. With just HTML and CSS, you can build a visually appealing football scorecard that’s easy to customize for any game or event.
You can change the team names, score, or colors to match your favorite clubs and competitions.
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>Simple Football Scoreboard | CodingPorium</title> <style> /*Import Poppins Font*/ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); *{ margin:0; padding:0; box-sizing: border-box; font-family: poppins, sans-serif; } body{ background: linear-gradient(135deg, #0d1b2a, #1b263b); color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; } .scoreboard{ background: #1e3a5f; padding: 30px; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.6); text-align: center; width:350px; } .title{ font-size: 1.8rem; font-weight: 700; margin-bottom:20px; color:#f9d342; text-transform: uppercase; letter-spacing: 1px; } .teams{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .team{ flex: 1; font-size: 1.3rem; font-weight:600; } .score{ font-size: 3rem; font-weight:700; margin:0 20px; color:#00ff9d; } .time{ margin-top: 15px; font-size:1.2rem; color:#ff5e5e; font-weight: 500; } </style> </head> <body> <div class="scoreboard"> <div class="title">Football Scoreboard</div> <div class="teams"> <div class="team">Team A</div> <div class="score">2-1</div> <div class="team">Team B</div> </div> <div class="time">⏱ 69:06</div> </div> </body>✨ With just a few lines of code, you’ve built your own version of this project! 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