Scoreboard

index.html

<div class="scoreboard">
  <div class="score away">
    <h3>14</h3>
    <h5>Patriots</h5>
   </div>
  
  <div class="timeAndQuarter">
    <h2>4th</h2>
    <h3>4:43</h3>
  </div>
  
  <div class="score home">
    <h3>24</h3>
    <h5>Eagles</h5>
   </div>
</div>

scoreboard.markdown

Scoreboard

A Pen by Sam Girshovich on CodePen.

License.

style.less

@homeTeamColor: rgb(102, 255, 194);
@awayTeamColor: rgb(94, 100, 191);

* {
  font-family: Arial;
}

.scoreboard {
  display: flex;
  width: 500px;
  border-radius: 15%;
  background-color: average(@homeTeamColor, @awayTeamColor);
  height: 300px;
  justify-content: space-between;
  overflow: hidden;
}

.score {
  height: 100%;
  width: 30%;
  text-align: center;
  font-size: 30px;
}

.timeAndQuarter {
  text-align: center;
}

.home{background-color:@homeTeamColor}
.away{background-color:@awayTeamColor}