Timeline style

timeline.html

<style>
    .main-timeline{
    position: relative;
    transition: all 0.4s ease 0s;
}
.main-timeline:before{
    content: "";
    width: 3px;
    height: 100%;
    background: #bfbfbf;
    position: absolute;
    top: 0;
    left: 50%;
}
.main-timeline .timeline{
    position: relative;
}
.main-timeline .timeline:before,
.main-timeline .timeline:after{
    content: "";
    display: block;
    width: 100%;
    clear: both;
}
.main-timeline .timeline-icon{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0a90d7;
    position: absolute;
    top: 0;
    left: 3px;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
}
.main-timeline .timeline-content{
    width: 45%;
    padding: 20px;
    border-radius: 5px;
    text-align: right;
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
}
.main-timeline .date{
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    padding: 12px 33px;
    background: #0a90d7;
    border-radius: 30px;
}
.main-timeline .title{
    font-size: 24px;
    font-weight: 500;
    color: #5c5151;
    margin-top: 30px;
}
.main-timeline .description{
    font-size: 14px;
    color: #606060;
    line-height: 2;
}
.main-timeline .timeline-content.right{
    float: right;
    text-align: left;
}
@media only screen and (max-width: 767px){
    .main-timeline:before{
        left: 0;
    }
    .main-timeline .timeline-icon{
        left: -8px;
        margin: 0;
    }
    .main-timeline .timeline-content{
        width: 90%;
        float: right;
    }
}
</style>
<div class="main-timeline">
    <div class="timeline">
        <div class="timeline-icon"></div>
        <div class="timeline-content">
            <span class="date">March 10, 2016</span>
            <h4 class="title">Web Design</h4>
            <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae eleifend ex. Praesent magna justo, bibendum id ante ut, vulputate tincidunt ipsum. Curabitur at rhoncus sem, eu feugiat sapien. Duis in libero cursus, dapibus sem ac, ornare mauris. Cras nunc lectus, porta quis metus vestibulum, pellentesque gravida erat.
            </p>
        </div>
    </div>
 
    <div class="timeline">
        <div class="timeline-icon"></div>
        <div class="timeline-content right">
            <span class="date">March 12, 2016</span>
            <h4 class="title">Web Development</h4>
            <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae eleifend ex. Praesent magna justo, bibendum id ante ut, vulputate tincidunt ipsum. Curabitur at rhoncus sem, eu feugiat sapien. Duis in libero cursus, dapibus sem ac, ornare mauris. Cras nunc lectus, porta quis metus vestibulum, pellentesque gravida erat.
            </p>
        </div>
    </div>
 
    <div class="timeline">
        <div class="timeline-icon"></div>
        <div class="timeline-content">
            <span class="date">March 14, 2016</span>
            <h4 class="title">Brand Building</h4>
            <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae eleifend ex. Praesent magna justo, bibendum id ante ut, vulputate tincidunt ipsum. Curabitur at rhoncus sem, eu feugiat sapien. Duis in libero cursus, dapibus sem ac, ornare mauris. Cras nunc lectus, porta quis metus vestibulum, pellentesque gravida erat.
            </p>
        </div>
    </div>
 
    <div class="timeline">
        <div class="timeline-icon"></div>
        <div class="timeline-content right">
            <span class="date">March 16, 2016</span>
            <h4 class="title">Responsive Design</h4>
            <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae eleifend ex. Praesent magna justo, bibendum id ante ut, vulputate tincidunt ipsum. Curabitur at rhoncus sem, eu feugiat sapien. Duis in libero cursus, dapibus sem ac, ornare mauris. Cras nunc lectus, porta quis metus vestibulum, pellentesque gravida erat.
            </p>
        </div>
    </div>
</div>