TV - pregled programa demo

by Dejan Munjiza

HTML

<div class="r-row">
  <!-- D 1 -->
  <div class="r-column">
    <div class="r-day">Day 1</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
  </div>
  <!-- D 2 -->
  <div class="r-column">
    <div class="r-day">Day 2</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
  </div>
   <!-- D 3 -->
  <div class="r-column">
    <div class="r-day">Day 3</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
    <div class="r-show"><span>8:30</span>lorem ipsum</div>
  </div>
  <!-- D 4 -->
  <div class="r-column">
    <div class="r-day">Day 4</div>
    <div class="r-show"><span>8:30</span>lorem...

CSS

* {
  font-family: Arial;
}
.r-row {
  width: 100%;
  float: left;
  display: flex;
  flex-direction: row;
  justify-content: top;
  align-items: flex-start;
  flex-wrap: no-wrap;
}
.r-column {
  width: 14.25%;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: flex-start;
  background: #d2d2d2;
  border-right: 1px solid white;
}
.r-column:nth-child(odd) {
  background: white;
}
.r-column > div {
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding: 10px 20px;
}
.r-column .r-day {
  background: #e1e1e1;
  text-transform: uppercase;
}
.r-column .r-show {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #e1e1e1;
  cursor: pointer;
  transition: .2s all ease-in;
}
.r-column .r-show:hover {
  background: yellow;
}
.r-column .r-show span {
  float: left;
  background: green;
  box-sizing: border-box;
  padding: 4px 4px;
  margin-right: 10px;
  border-radius: 3px;
  color: white;
}