Membuat Timeline Keren Hanya dengan CSS - Semantic Timeline

Demo

Raja Kode - Semantic adalah sebuah CSS yang SEO-friendly dan berfungsi untuk membuat sebuah timeline vertikal hanya dengan bermodalkan CSS dan HTML. Desainnya juga keren dan dapat dengan mudah di kostumisasi.

Cara Membuat Timeline dengan CSS

1. Tambahkan event list pada timeline kamu.

<ul class="timeline">
  <li class="timeline-item">
    <div class="timeline-card">
      <h4>09:00 AM</h4>
      <p>Event 1</p>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-card">
      <h4>09:00 AM</h4>
      <p>Event 2</p>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-card">
      <h4>09:00 AM</h4>
      <p>Event 3</p>
    </div>
  </li>
  ...
</ul>

2. Tambahkan CSS dibawah ini untuk mempercantik Time Line diatas.

.timeline {
  position: relative;
  padding: 1rem 2rem;
  border-radius: 12px;
}
.timeline .timeline-item {
  position: relative;
  left: -10px;
  list-style: none;
  border-left: 1px solid #fff;
  margin-left: 10px;
  padding: 0 0 1.5rem 1.5rem;
}
.timeline .timeline-item .timeline-card {
  background: #fff;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.timeline .timeline-item .timeline-card h4 {
  margin: 10px auto;
  color: #333;
}
.timeline .timeline-item .timeline-card:hover {
  box-shadow: 0 5px 5px rgba(23, 20, 29, 0.15);
  transform: translateX(-5px);
}
.timeline .timeline-item:last-child {
  padding-bottom: 0;
}
.timeline .timeline-item:before {
  content: "";
  width: 15px;
  height: 15px;
  background: white;
  border: 2px solid #278472;
  border-radius: 50%;
  position: absolute;
  left: -10px;
  top: 0px;
}