HTML and CSS to Make a Timeline

HTML for Timeline

Preview at bottom of page.

<div class="timeline-item">
  <div class="timeline-container">
    <div class="timeline-content">
      <h2><a href="https://nike.com/">Nike Website</a></h2>
      <p>January 1, 1938</p>
      <a href="https://nike.com/">
      <div class="timeline-button">
        <div class="flex-col">
          <p>More</p>
        </div>
        <div class="flex-col">
          <p class="timeline-icon-wrap"><img src="/wp-content/uploads/2020/09/arrow-right.png" class="arrow-icon" alt="Arrow Icon" /></p>
        </div>
      </div></a>
    </div>
  </div>
</div>
<div class="timeline-item">
  <div class="timeline-container">
    <div class="timeline-content">
      <h2><a href="https://nike.com/">Nike Website</a></h2>
      <p>January 1, 1938</p>
      <a href="https://nike.com/">
      <div class="timeline-button">
        <div class="flex-col">
          <p>More</p>
        </div>
        <div class="flex-col">
          <p class="timeline-icon-wrap"><img src="/wp-content/uploads/2020/09/arrow-right.png" class="arrow-icon" alt="Arrow Icon" /></p>
        </div>
      </div></a>
    </div>
  </div>
</div>

CSS for Timeline

.timeline-item {
  position: relative;
  margin: 0 auto;
}

.timeline-item a{
text-decoration:none !important;
}

.timeline-item h2{
  font-weight: 700 !important;
  font-style: normal;
  font-size: 18px;
  padding-bottom: 3px !important;
}

.timeline-item::after {
  content: '';
  position: absolute;
  width: 2px;
  background-color: #cdcecf;
  top: 15px;
  bottom: -20px;
  margin-left: -4px;
}

.timeline-item:last-child:after{
  width: 0px !important;
}

.timeline-container{
  padding: 10px 20px;
  position: relative;
  width: 100%;
}

.timeline-container::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  right: -12px;
  background-color: #905740;
  border: 4px solid #905740;
  top: 12px;
  z-index: 1;
  left: -16px;
}

.timeline-content {
  padding: 5px 30px;
  position: relative;
}

.timeline-date{
  color:#905740 !important;
  font-style:italic !important;
}

.timeline-button{
  background: #111111;
  align-items:center;
  padding: 8px 18px 8px 12px;
  display: flex;
  max-width: 125px;
  transition: 0.3s;
  margin-top:15px;
}

.timeline-button:hover{
  background: #000000;
}

.timeline-button p{
  padding-bottom: 0 !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 16px;
  color: #ffffff;
}

.timeline-button:hover .arrow-icon, .timeline-button:focus .arrow-icon, .timeline-button:active .arrow-icon {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}

.timeline-icon-wrap{
  text-align:right;
}

/* Moves Arrow Forward */
.arrow-icon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.flex-row{
  display: flex;
}

.flex-col{
  flex: 1;
}

Preview of Timeline