CSS Timeline

by Kkuburban

HTML

<div class="bar">

</div>




<div class="timeline">



  <div id="inc" class="entry">
    <h1>1st Jan 2018</h1>
    <div class=inception></div>
    <h2>Inception Date</h2>
  </div>
  
  <div class="entry">
    <h1>31 Mar, 2018</h1>
    <img src="https://cdn3.iconfinder.com/data/icons/simple-web-navigation/165/tick-512.png" />
    <h2>Premium Received</h2>
    $5,000
 
  </div>
  <div class="entry point">
    <h1>Today</h1>
    04/09/2018
  </div>
  <div class="entry">
    <h1>30 Sep, 2018</h1>
    <img src="https://cdn3.iconfinder.com/data/icons/simple-web-navigation/165/cross-512.png" />
    <h2>Premium Not Received
    </h2>
  </div>
  <div id="ex" class="entry">
    <h1>1st Jan 2018</h1>
    <div class=Expiry></div>
    <h2>Renewal / Expiry Date</h2>
  </div>
</div>

CSS

.timeline {

  white-space: nowrap;
  overflow-x: scroll;
  padding: 30px 0 10px 0;
  position: relative;
}
div#inc.entry:after{
  left:50%;
}

div#ex.entry:after{
 left: -40%;
    right: -40%;
    width: 90%;
}
.entry:after{
  position: absolute;
  left: 0;
  top: 30%;
  height: 3px;
  background: #000;
  content: "";
  width: 100%;
  display: block;
  z-index: -10;
}
.entry {
  
  display: inline-block;
  vertical-align: top;
  background: #fff;
  color: #000;
  padding-right: 50px;
  padding-left: 50px;
  font-size: 12px;
  text-align: center;
  position: relative;
  min-width: 20px;
   min-height: 150px;
  margin: auto;
  white-space: normal;
  z-index:10;
}

.point {
  display: inline-block;
  vertical-align: top;
  background: #fff;
  color: #000;
  padding-right: 15px;
  padding-left: 5px;
  font-size: 12px;
  text-align: left;
  position: relative;
  border-left: 2px dashed #5b9bd5;
  border-radius: 3px;
  min-width: 20px;
  min-height: 150px;
  margin: auto;
  color: #5b9bd5;
  white-space: normal;
}

.entry img {
  display: block;
  max-width: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: auto;
  margin-bottom: 10px;
}

.point:before {
  content: '';
  display: block;
  border-left: 2px dashed #5b9bd5;
  width: 1px;
  height: 20px;
  position: absolute;
  left: 0%;
  top: -20px;
  margin-left: -2px;
}

.entry h1 {
  color: #000;
  font-size: 18px;
  font-family: Georgia, serif;
  font-weight: bold;
  margin-bottom: 10px;
  margin: auto;
}

.point h1 {
  font-size: 18px;
  font-family: Georgia, serif;
  font-weight: bold;
  margin-bottom: 10px;
  margin: auto;
}

.entry h2 {
  letter-spacing: .2em;
  margin-bottom: 10px;
  font-size: 14px;
}

.inception {
  height: 50px;
  margin-bottom: 10px;
  margin-left: 50%;
  border-left: 3px solid #000;
}

.Expiry {
  height: 50px;
  margin-bottom: 10px;
  margin-right: 50%;
  border-right: 3px solid #000;
}

.bar {
  height: 4px;
  background: #eee;
  width: 100%;
  position: relative;
...