Live Demo - Vertical timeline design using html and css

See Free Live Demo example of Without any css framework we create timeline page design. but this timeline page design also responsive. in this timeline design you can see day title and title of event and description. this is best timeline page design using only css and html. you can use this design in company timeline and colle...

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="timeline">
  <div class="timeline-left">
    <img src="/demo/man01.png">
    <div class="header-content">
      <h2><i class="fa fa-calendar" aria-hidden="true"></i> Today</h2>
    </div>
    <div class="content">
      <h3>John Addison</h3>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="timeline-right">
    <img src="/demo/man02.png">
    <div class="header-content">
      <h2><i class="fa fa-calendar" aria-hidden="true"></i> Yesterday</h2>
    </div>
    <div class="content">
      <h3>John Addison</h3>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="timeline-left">
    <img src="/demo/man03.png">
    <div class="header-content">
      <h2><i class="fa fa-calendar" aria-hidden="true"></i> July 14,2017</h2>
    </div>
    <div class="content">
      <h3>John Addison</h3>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="timeline-right">
    <img src="/demo/man04.png">
    <div class="header-content">
      <h2><i class="fa fa-calendar" aria-hidden="true"></i> Jun 14,2017</h2>
    </div>
    <div class="content">
      <h3>John Addison</h3>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
</div>
</body>
</html>

* {
    box-sizing: border-box;
}
body {
    background-color: #f1f1f1;
    font-family: Helvetica, sans-serif;
}
h2, h3{
    margin: 0px;
    font-weight: normal;
}
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.timeline-left .header-content:after{
    content: " ";
    position:absolute; 
    left:0px;
    top:40px;
    border-color:transparent;
    border-style: solid;
    border-width:0px 20px 20px 0px;
    border-right-color:#E7DB21;
}
.timeline-right .header-content:after{
    content: " ";
    position:absolute; 
    right:0px;
    top:40px;
    border-color:transparent;
    border-style: solid;
    border-width:0px 0px 20px 20px;
    border-left-color:#E56F57;
}
.timeline-left .header-content:before{
    content: " ";
    position:absolute; 
    top:0px;
    right:-40px;
    border:20px solid transparent;
    border-left-color:#FEC006;
}
.timeline-right .header-content:before{
    content: " ";
    position:absolute; 
    top:0px;
    left:-40px;
    border:20px solid transparent;
    border-right-color:#FF7058;
}
.timeline-left .header-content,
.timeline-right .header-content{
    text-align: center;
    color:#fff;
    width:97%;
    padding: 5px;
    height: 40px;
    background-color: #FEC006;
    position: relative;
}
.timeline-right .header-content{
    background-color: #FF7058;
    margin-left:18px;
}
.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top:17px;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}
.timeline-right,
.timeline-left {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}
.timeline-left img,.timeline-right img{
    position: absolute;
    width:50px;
    height: 50px;
    border-radius: 50%;
    border:5px solid #fff;
    right:-25px;
    top:7px;
    z-index:1;
}
.timeline-right img{
    left:-25px;
}
.timeline-right {
    left: 50%;
}
.timeline-left .content,.timeline-right .content{
    padding:20px;
    background-color:#FFF;
    position: relative;
    width: 90%;
    margin:0px 0px 0px 20px;
}
.timeline-right .content{
    left:15px;
    text-align:right;
}

@media (min-width:320px) and (max-width:360px) {
    .timeline-left img,.timeline-right img{
        left:5px;    
    }
    .timeline::after {
        left:30px;
    }
    .timeline{
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
    .timeline-left{
        width: 100%;
    }
    .timeline-right{
        width: 100%;
        left: 0px;
    }
    .timeline-left .header-content,
    .timeline-right .header-content{
        margin-left:40px;
        width: 100%;
    }
    .timeline-right .content,
    .timeline-left .content{
        width:80% !important;
        margin-left:52px !important;
        left: 15px;
        text-align: left;
    }
    .timeline-left .header-content:before{
        right: unset;
        left:-40px;
        border:20px solid transparent;
        border-right-color:#FEC006;
    }
    .timeline-right .header-content:after{
        border-width:0px 0px 30px 26px;
    }
    .timeline-left .header-content:after{
        content: " ";
        position:absolute; 
        left: unset;
        right:0px;
        top:40px;
        border-color:transparent;
        border-style: solid;
        border-width:0px 0px 30px 26px;
        border-left-color:#E7DB21;
    }
}
@media (min-width:640px) and (max-width:768px) {
    .timeline-right .content{
        margin:0px 0 0 4px;
    } 
}