CSS Timeline Side Bar

CSS ile side bar alanına eklenebilen basit bir timeline kutusu.

<style>

  .listTimeLine {

    margin: 0px;

    padding: 10px;

    border-left: 1px solid #717171;

    font-family: Arial;

    width: auto;

    display: block;

    background-color: #ddd;

    max-width: 40%;

    height: auto;

    display: block;

  }

  .listTimeLine li {

    margin: 4px 0;

  }

  .listTimeLine li.listDate {

    list-style-type: none;

    color: #717171;

    font-size: 12px;

    margin: 18px 0 0 0;

  }

  .listTimeLine li.listDate:first-child {

    margin: 0;

  }

  .listTimeLine li.listItem {

    list-style-type: none;

    font-size: 16px;

    font-weight: bold;

    color: #545454;

    padding-left: 15px;

  }

  .listTimeLine li.listDate:before {

    content: "■";

    padding-right: 10px;

    margin-left: -15px;

    line-height: 10px;

    vertical-align: top;

    display: inline-block;

    font-size: 16px;

  }

  .active {

    color: #e04235 !important;

    font-weight: bold;

  }

</style>

<ul class="listTimeLine">

  <li class="listDate active">Haziran 30, 2020</li>

  <li class="listItem active">Lorem ipsum dolor</li>

  <li class="listDate">Haziran 18, 2020</li>

  <li class="listItem">Sed ut perspiciatis unde omnis iste</li>

  <li class="listDate">Haziran 17, 2020</li>

  <li class="listItem">Ut enim ad minima veniam, quis nostrum exercitationem</li>

  <li class="listDate">Haziran 10, 2020</li>

  <li class="listItem">Lorem ipsum dolor sit amet</li>

</ul>