Hani Sitenizde planlarınız felan olur ya
bu tarihte kurulduk
bu tarihte bunu yaptık falan filan ama hep merak ederiz nasıl yapabiliriz script mi bu gibisinden sizi kurtaracak bilgi ile geldim Sadece html ile çözün

Örnek Resim:






Kod:
 
<html>
<head>
<style type="text/css">
.point-time {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  top: 17px;
  left: 20%;
  background: #1c87bf;
  margin-left: -4px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #fff;
}

.text-red {
  color: #f6393f;
}

.text-blue {
  color: #1c87bf;
}

.text-green {
  color: #95c91e;
}

.text-yellow {
  color: #ffb902;
}

.text-purple {
  color: #d32d93;
}

.point-red {
  background-color: #f6393f;
}

.point-blue {
  background-color: #1c87bf;
}

.point-green {
  background-color: #95c91e;
}

.point-yellow {
  background-color: #ffb902;
}

.point-purple {
  background-color: #d32d93;
}
.content article {
  position: relative;
}
.content article > h3 {
  width: 15%;
  height: 20px;
  line-height: 20px;
  text-align: right;
  font-size: 1.4em;
  color: #1d1d1d;
  padding: 10px 0 20px;
}
.content article section {
  padding: 0 0 17px;
  position: relative;
}
.content article section:before {
  content: "";
  width: 5px;
  top: 17px;
  bottom: -17px;
  left: 20%;
  background: #e6e6e6;
  position: absolute;
}
.content article section:last-child:before {
  display: none;
}
.content article section time {
  width: 15%;
  display: block;
  position: absolute;
}
.content article section time > span {
  display: block;
  text-align: right;
}
.content article section aside {
  color: #3a3a38;
  margin-left: 25%;
  padding-bottom: 15px;
}
.content article section .brief {
  color: #9f9f9f;
}
</style>
</head>
<body>
<div class="content">
  <article>
  <h3><span class="text-yellow">2021</span></h3>
  <section>
      <span class="point-time point-yellow"></span>
      <time datetime="2022-04">
        <span>5 Nisan </span>
      </time>
      <aside>
        <p class="things"><span class="text-yellow">5 Nisan 2022 Sitemizin Seosu Bitecek</span></p>
        <p class="brief"><span class="text-green">Seoman</span></p>
      </aside>
    </section>
    <section>
      <span class="point-time point-yellow"></span>
      <time datetime="2022-03">
        <span>24 Mart </span>
      </time>
      <aside>
        <p class="things"><span class="text-yellow">24 Mart 2022'de Yeni Proje Sunduk</span></p>
        <p class="brief"><span class="text-green">Seoman</span></p>
      </aside>
    </section>
    <section>
      <span class="point-time point-yellow"></span>
      <time datetime="2022-02">
        <span>24 Şubat</span>
      </time>
      <aside>
        <p class="things"><span class="text-yellow">Sitemiz Hizmete Girdi</span></p>
        <p class="brief"><span class="text-green">Seoman</span></p>
      </aside>
    </section>
</div>
</body>
</html>
Not: yellow yazan yere red felan yazabilirsiniz üstte cssde yazıyor hepsi