Cara Membuat Timeline

Di bawah ini kita akan mempelajari cara membuat “timeline” yang responsif dengan CSS. Timeline biasanya digunakan untuk mengetahui histori-history yang lalu. Kali ini kita akan mencoba membuat fungsi timeline yang mungkin bisa digunakan pada website teman-teman.

Timeline

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

/*Atur backgroud 	*/  
body {
  background-image : url("https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-color:#474e5d ;
  font-family: Helvetica, sans-serif;
  width: 100%;
  height: 100%;
}

/* Garis waktu sebenarnya (vertikal ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* Garis waktu sebenarnya (vertikal ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container di sekitar konten */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* Lingkaran di timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Tempatkan container di sebelah kiri */
.left {
  left: 0;
}

/* Tempatkan container di sebelah kanan */
.right {
  left: 50%;
}

/* Tambahkan arrow ke container sebelah  kiri (menunjuk ke kanan) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Tambahkan arrow ke container sebelah  kanan (menunjuk ke kiri) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Perbaiki lingkaran untuk container di sisi kanan */
.right::after {
  left: -16px;
}

/* Konten sebenarnya */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsif timeline pada layar dengan lebar kurang dari 600 piksel */
@media screen and (max-width: 600px) {
  /* Tempatkan timeline ke kiri */
  .timeline::after {
  left: 31px;
  }
  
  /* Kontainer dengan lebar penuh */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Pastikan semua lingkaran berada di tempat yang sama */
  .left::after, .right::after {
  left: 15px;
  }
  
  /* Buat semua container kanan berperilaku seperti container kiri */
  .right {
  left: 0%;
  }
}
</style>
</head>
<body>

<div class="timeline">
  <div class="container left">
    <div class="content">
      <h2>Season 1(2013)</h2>
      <p>Anime Oregairu merupakan adaptasi dari light novel dengan judul yang sama karya Wataru Watari. Novel ini bercerita tentang dua pelajar SMA, Hachiman dan Yukino, yang dipaksa oleh guru mereka untuk bergabung di klub relawan.
Dalam klub itu, mereka harus menolong setiap orang yang datang dan meminta bantuan. Sementara Yuigahama, menjadi anggota ketiga yang masuk secara sukarela dalam klub tersebut.
Secara garis besar, cerita ini menggambarkan situasi sosial yang dihadapi remaja di lingkungan sekolah serta masalah psikologis dalam interaksi mereka.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>Season 2(2015)</h2>
      <p>Anime season kedua ini merupakan kelanjutan dari kisah sebelumnya, dimana pada season ini klub relawan hachiman, yukinosta dan yui memiliki masalah yang berbeda dan lebih kompleks. Pada season ini juga ditampilkan permasalahan antara mereka bertiga yang mana tanpa sadar ada perasaan yang tumbuh dalam hati mereka.</p>
    </div>
  </div>
  <div class="container left">
    <div class="content">
      <h2>Season 3(2020)</h2>
      <p>Season ketiga merupakan season terakhir dari oregairu dan tidak akan ada perpanjangan. Pada season ini lebih menampilkan ketulusan hati antara ketiga pengurus klub relawan yaitu hachiman,yukin dan yui. Mereka mulai menyadari perasaaan masing-masing tetapi bingung untuk menyampaikannya karena jika menyampaikan perasaan yang mereka rasa, mereka sadar bahwa klub relawan tidak akan seperti sebelumnya dan persahabatan merekapun akan merenggang. Intinya pada season ini kisah cinta antar 3 orang anak SMA kelas 3 akan lebih diceritakan.</p>
    </div>
  </div>
  
</div>

</body>
</html>

Cara Membuat Timeline

Langkah 1) Tambahkan HTML:
Contoh

<div class="timeline">
  <div class="container left">
    <div class="content">
      <h2>Season 1(2013)</h2>
      <p>Anime Oregairu merupakan adaptasi dari light novel dengan judul yang sama karya Wataru Watari. Novel ini bercerita tentang dua pelajar SMA, Hachiman dan Yukino, yang dipaksa oleh guru mereka untuk bergabung di klub relawan.
Dalam klub itu, mereka harus menolong setiap orang yang datang dan meminta bantuan. Sementara Yuigahama, menjadi anggota ketiga yang masuk secara sukarela dalam klub tersebut.
Secara garis besar, cerita ini menggambarkan situasi sosial yang dihadapi remaja di lingkungan sekolah serta masalah psikologis dalam interaksi mereka.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>Season 2(2015)</h2>
      <p>Anime season kedua ini merupakan kelanjutan dari kisah sebelumnya, dimana pada season ini klub relawan hachiman, yukinosta dan yui memiliki masalah yang berbeda dan lebih kompleks. Pada season ini juga ditampilkan permasalahan antara mereka bertiga yang mana tanpa sadar ada perasaan yang tumbuh dalam hati mereka.</p>
    </div>
  </div>
  <div class="container left">
    <div class="content">
      <h2>Season 3(2020)</h2>
      <p>Season ketiga merupakan season terakhir dari oregairu dan tidak akan ada perpanjangan. Pada season ini lebih menampilkan ketulusan hati antara ketiga pengurus klub relawan yaitu hachiman,yukin dan yui. Mereka mulai menyadari perasaaan masing-masing tetapi bingung untuk menyampaikannya karena jika menyampaikan perasaan yang mereka rasa, mereka sadar bahwa klub relawan tidak akan seperti sebelumnya dan persahabatan merekapun akan merenggang. Intinya pada season ini kisah cinta antar 3 orang anak SMA kelas 3 akan lebih diceritakan.</p>
    </div>
  </div>
  
</div>

Langkah 2) Tambahkan CSS:
Contoh

* {
  box-sizing: border-box;
}

/*Atur backgroud 	*/  
body {
  background-image : url("https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-color:#474e5d ;
  font-family: Helvetica, sans-serif;
  width: 100%;
  height: 100%;
}

/* Garis waktu sebenarnya (vertikal ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* Garis waktu sebenarnya (vertikal ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container di sekitar konten */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* Lingkaran di timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Tempatkan container di sebelah kiri */
.left {
  left: 0;
}

/* Tempatkan container di sebelah kanan */
.right {
  left: 50%;
}

/* Tambahkan arrow ke container sebelah  kiri (menunjuk ke kanan) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Tambahkan arrow ke container sebelah  kanan (menunjuk ke kiri) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Perbaiki lingkaran untuk container di sisi kanan */
.right::after {
  left: -16px;
}

/* Konten sebenarnya */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsif timeline pada layar dengan lebar kurang dari 600 piksel */
@media screen and (max-width: 600px) {
  /* Tempatkan timeline ke kiri */
  .timeline::after {
  left: 31px;
  }
  
  /* Kontainer dengan lebar penuh */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Pastikan semua lingkaran berada di tempat yang sama */
  .left::after, .right::after {
  left: 15px;
  }
  
  /* Buat semua container kanan berperilaku seperti container kiri */
  .right {
  left: 0%;
  }
}

CSS How To modal

Cara Membuat Timeline

Timeline

Cara Membuat Timeline

Cara Membuat Modal Konfirmasi Delete

Cara Membuat Scroll Indikator

You may also like