<main>
  <div id="news">
    <p>News</p>
    <div class="notice__box js-noticeList">
      <ul>
        <li class="notices"></li>
        <li class="notices"></li>
        <li class="notices"></li>
        <li class="notices"></li>
      </ul>
    </div>
  </div>
  
  <div id="about">
    <p>About</p>
  </div>
  
  <div id="pickup">
    <p>Pickup</p>
  </div>
  
  <div id="information">
    <p>Information</p>
    <div class="notice__box js-noticeList">
      <ul>
        <li class="notices"></li>
        <li class="notices"></li>
        <li class="notices"></li>
        <li class="notices"></li>
      </ul>
    </div>
  </div>
</main>
* {
  margin: 0;
  padding: 0;
}
p, li {
  font-family: 'Overlock SC', cursive;
  font-size: 1.2rem;
  color: #fff;
}
ul {
  li {
    list-style: none;
  }
}

p {
  margin-bottom: 10px;
}

#news {
  background: #ffccd8;
  width: calc(100% - 20px);
  height: 180px;
  padding: 10px;
  
  .notice__box {
    .notices {
      width: calc(100% - 20px);
      height: 2rem;
      line-height: 2rem;
      color: #fff;
      padding-left: 20px;

      &:first-of-type {
        background: #dcb5d5;
      }

      &:nth-of-type(2) {
        background: #f896a8;
      }

      &:nth-of-type(3) {
        background: #e5c194;
      }

      &:last-of-type {
        background: #e1b0a7;
      }
    }
  }
}

#about {
  background: #a8e2f6;
  width: calc(100% - 20px);
  height: 180px;
  padding: 10px;
}

#pickup {
  background: #bee6cc;
  width: calc(100% - 20px);
  height: 180px;
  padding: 10px;
}

#information {
  background: #ffe5b8;
  width: calc(100% - 20px);
  height: 180px;
  padding: 10px;
  
  .notice__box {
    ul {
      display: flex;
      
      .notices {
        width: 25%;
        height: 100px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        
        &:first-of-type {
          background: #dcb5d5;
        }
        
        &:nth-of-type(2) {
          background: #f896a8;
        }
        
        &:nth-of-type(3) {
          background: #e5c194;
        }
        
        &:last-of-type {
          background: #e1b0a7;
        }
      }
    }
  }
}
View Compiled
let notice = ['Spring', 'Summer', 'Autumn', 'Winter'];
let n = 0;
let i = 0;
let targetParent = Array.from(document.querySelectorAll('.js-noticeList'));

targetParent.forEach(function () {
  let targetList = Array.from(targetParent[n].querySelectorAll('li'));
  
  targetList.forEach(function () {
    if (i == notice.length) {
      i = 0;
    }
    
    targetList[i].innerHTML = notice[i];
    i++;
  });
  
  n++;
});

External CSS

  1. https://fonts.googleapis.com/css2?family=Overlock+SC&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.