loading...
Cover image for How to build a sports odds displayer with CSS

How to build a sports odds displayer with CSS

derder56 profile image DerDer56 ・4 min read

View End Result

Today at 3:00 EST, the 2020 UEFA Champions League final will be played between Paris Saint-Germain and FC Bayern Munich. And what better way to honor this iconic game than build an odds displayer? Today, I'm going to show you how to build a sports odds displayer with CSS and HTML, using the Champions League final as an example.

So what we will be making is a nicely centered white container with an information section, an odds bar, and a label showing the teams and winning percentages. We're going to achieve this with only HTML and CSS (No Javascript). And by the way, our bar will look like this, with two mini-bars inside it showing the percentages for each team:

Bar Image

Step 1: The HTML

So our HTML is going to look like this:

  • A <div> container
  • A <div> bar
  • One <div> for each team
  • One <a> link to each team's webpage showing their winning stats, names, and logos
  • And some images to make it look nice

So our formatted <body> code ends up like:

<div class="container">
  <h1>
    Champions League
    <br />
    <img
      src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fa48de1c2-9caa-4ee4-8f4c-8baf480ecdf4.image.png"
      alt="O"
    />
    Final Odds
    <img
      src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fa48de1c2-9caa-4ee4-8f4c-8baf480ecdf4.image.png"
      alt="O"
    />
  </h1>
  <div class="bar">
    <div class="psg" title="33%"></div>
    <div class="bayern" title="67%"></div>
  </div>
  <a href="https://en.psg.fr/">
    <img
      src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fefb2974a-573d-4d0a-925e-2ac2ef4a644b.image.png"
      alt="O"
    />
    PSG ??%
  </a>
  <a href="https://fcbayern.com/en">
    ??% Bayern
    <img
      src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Ff3c60ab9-4953-4e56-85c7-e5100a77ddc2.image.png"
      alt="O"
    />
  </a>
</div>

By the way, this is how it looks without CSS (I zoomed out so you could see all of it):

Really bad looking HTML

Part 2: The CSS

Now, the first thing we need to do is find out the percentages. After a quick Google search, the results showed that Bayern's chance of winning was 67%, while PSG came up with a measly 33%. So let's declare these stats as variables inside a :root selector:

:root {
  --psg: 33%;
  --bayern: 67%;
}

Now, for the html/body, let's make a nice Champions League-style background image, and declare fonts, text colors, and hide the page overflow. Here's the code:

html,
body {
  overflow: hidden;
  height: 100%;
  font-family: Verdana, Geneva, sans-serif;
  background-image: url("https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fe404eda1-d2df-4b91-a5f4-0704a21a01d1.image.png");
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
}

This is how the background image looks:

Just an enormous image of a soccer ball

Now let's style us a white container (with a max-width of 100% so it doesn't overflow the screen on small devices) with rounded corners and a black bar (also with rounded corners):

.container {
  border-radius: 15px;
  max-width: 100%;
  padding: 50px;
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bar {
  background-color: black;
  border-radius: 5px;
  margin: 50px 0px;
  width: 100%;
  overflow: auto;
  border: 1px solid black;
}

The only problem is that there's nothing in the bar, so it's just a line:

Just imagine a black line in a white box

Let's add an info section saying "Champions League Final Odds". This will be an <h1> tag with images and styled as such:

img {
  vertical-align: -15%;
}

h1 {
  margin: 0px;
  text-align: center;
  font-size: 50px;
}

h1 img {
  height: 50px;
}

Time to style the links! These will be floated left and right, respectively, and have images next to them. The :first-of-type and :last-of-type selectors will help us with that:

a img {
  height: 15px;
}

a {
  font-size: 15px;
  text-decoration: none;
  color: inherit;
}

a:first-of-type {
  float: left;
}

a:last-of-type {
  float: right;
}

Now it's time to add colors and animations to our mini-bars. I got the colors for the teams from Team Color Codes. Anyway, here's the styling code:

.psg,
.bayern {
  font-size: 15px;
  padding: 1em 0px;
  animation-delay: 2s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.psg {
  background-color: #004170;
  float: left;
  animation-name: psg;
}

.bayern {
  background-color: #DC052D;
  float: right;
  animation-name: bayern;
}

And the @keyframe animation code, which will zoom in each team's mini-bar from their respective sides, finally using our percentage variables:

@keyframes psg {
  from {
    width: 0px;
  }
  to {
    width: var(--psg);
  }
}

@keyframes bayern {
  from {
    width: 0px;
  }
  to {
    width: var(--bayern);
  }
}

And that's it! I'll be showing the full HTML and CSS code in the next paragraph.

Thanks for reading!

The website is here and the code is here, hosted on Glitch:

I hope this helped you! Anyway, gotta go watch the game...

Bye! - DerDer56 (The game ended Bayern 1-0 PSG)

Discussion

pic
Editor guide
Collapse
justcoding profile image
hello936

Love it also

Collapse
mpfdev profile image
Matheus

Love it. Definitely going to do it.