How to build a sports odds displayer with CSS

#css #html #tutorial #webdev

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:

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):

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:

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:

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);
  }
}