Challenge Scoreboard Example

by Dejan Munjiza

HTML

<div class="scoreboard-title">
  Scoreboard Example
</div>

<div class="container">
  <div class="row">
    <div class="left">
      <div class="name title">Company</div>
      <div class="name"><img src="http://www.clipartbest.com/cliparts/acq/oq6/acqoq6kKi.png"/> Rocket Science</div>
      <div class="name"><img src="http://www.clipartbest.com/cliparts/acq/oq6/acqoq6kKi.png"/> Rocket Science</div>
      <div class="name"><img src="http://www.clipartbest.com/cliparts/acq/oq6/acqoq6kKi.png"/> Rocket Science</div>
      <div class="name"><img src="http://www.clipartbest.com/cliparts/acq/oq6/acqoq6kKi.png"/> Rocket Science</div>
    </div>

    <div class="center">
      <div class="scrolly title">
        <div class="scrow">1</div>
        <div class="scrow">2</div>
        <div class="scrow">3</div>
        <div class="scrow">4</div>
        <div class="scrow">5</div>
        <div class="scrow">6</div>
        <div class="scrow">7</div>
        <div class="scrow">8</div>
        <div class="scrow">9</div>
        <div class="scrow">10</div>
      </div>
      <div class="scrolly">
        <div class="scrow">
          <div class="progress" style="width:60%;">60%</div>
        </div>
        <div class="scrow">
          <div class="progress" style="width:33%;">33%</div>
        </div>
        <div class="scrow">
          <div class="progress" style="width:20%;">20%</div>
        </div>
        <div class="scrow">
          <div class="progress" style="width:50%;">50%</div>
        </div>
        <div class="scrow">
          <div class="progress" style="width:66%;">66%</div>
        </div>
        <div class="scrow">
          <div class="progress" style="width:100%;">100%</div>
        </div>
        <div class="scrow">
          <div class="progress" style="width:100%;">100%</div>
        </div>
        <div class="scrow">
          <div class="progress" style="width:80%;">80%</div>
        </div>
        <div class="scrow">
          <div class="progress"...

CSS

.scoreboard-title {
  font-size: 24px;
  text-align: center;
  width: 100%;
  padding-bottom: 20px;
  color: #888;
}

.container {
  width: 100%;
}

.row {
  width: 100%;
  float: left;
  display: block;
  border-bottom: 1px solid gray;
}

.left {
  width: 20%;
  float: left;
}

.center {
  width: 70%;
  float: left;
  overflow-y: scroll;
  box-sizing: border-box;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
}

.right {
  width: 10%;
  float: right;
}

.scrolly {
  width: 1000px;
  float: left;
}

.scrow {
  display: block;
  width: 99px;
  float: left;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  overflow: hidden;
}

.name, .number {
  border-bottom: 1px solid #888;
}

.name img {
  width: 15px;
  height: 15px;
}

.name:nth-child(2n+2), .scrolly:nth-child(2n+2), .number:nth-child(2n+2) {
  background: #eee;
}

.title {
  background: #888 !important;
  color: white;
}

.progress {
  margin-left: -100%;
  display: block;
  float: left;
  background: lightgreen;
  border: 1px solid white;
  box-sizing: border-box;
  animation: progressanimation .5s ease-in forwards;
}

@keyframes progressanimation {
  0% { margin-left: -100%; }
  100% { margin-left: 0%; }
}