<footer>
        <div><i class="fas fa-calendar-alt"></i>today</div>
        <div><i class="fab fa-reddit-alien"></i>clients</div>
        <div><i class="fas fa-comments"></i>messages</div>
        <div><i class="fas fa-history"></i>history</div>
        <div><i class="fas fa-ellipsis-h"></i>more</div>
    </footer>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
$lists: #DD310E #01A59C #006AB5 #F29105 #3A3A3A;
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(to bottom, #c91cde 0%, #2d4271 100%), url(https://images.pexels.com/photos/1064566/pexels-photo-1064566.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1920&w=1260) no-repeat, linear-gradient(-180deg, #140ecc 0%, #1c74f7 100%);
  background-size: cover;
  background-blend-mode: hard-light;
}

footer {
  width: 750px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background-color: orange;
  
  > div {
    min-height: 88px;
    border-top: 5px solid transparent;
    background: #fff;
    color: #969696;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
    cursor: pointer;
    font-weight: bold;
    
    &:hover {
      color: #DC310E;
      background: #FCF0EE;
    }
    
    @for $i from 1 through length($lists) {
      &:nth-child(#{$i}) {
        border-color: nth($lists, $i);
      }
    }
  }
  
  i{
    font-size: 1.5rem;
    margin-bottom: 5px;
  }
}