Timeline Style

from: https://freefrontend.com/css-timelines/ 

https://bootstrapthemes.co/items/resources/timeline/

https://github.com/twbs/bootstrap/releases

 https://www.jotform.com/blog/15-code-snippets-for-timelines-91734/

https://bashooka.com/coding/javascript-timeline-libraries/

 https://www.wptimeline.io/jqueryversion/

 http://visjs.org/timeline_examples.html

 

css:

.demo{ background: #25303b;
padding: 100px 0;}
.heading-title
{
	margin-bottom: 100px;
	color: #fff;
}
.main-timeline{
    width: 80%;
    margin: 20px auto;
    position: relative;
}

.main-timeline:before{
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: rgba(255,255,255,0.2);
    margin: 0 0 0 -1px;
    position: absolute;
    top: 0;
    left: 50%;
}

.main-timeline .timeline{
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}

.main-timeline .timeline:after{
    content: "";
    display: block;
    clear: both;
}

.main-timeline .timeline-content{
    width: 40%;
    float: left;
    margin: 5px 0 0 0;
    border-radius: 6px;
}

.main-timeline .date{
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #25303b;
    padding: 5px 0;
    margin: 0 0 0 -36px;
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 0 7px #25303b;
}

.main-timeline .date span{
    display: block;
    text-align: center;
}

.main-timeline .day,
.main-timeline .year{
    font-size: 10px;
}

.main-timeline .month{
    font-size: 18px;
}

.main-timeline .title{
    padding: 15px;
    margin: 0;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -1px;
    border-radius: 6px 6px 0 0;
    position: relative;
}

.main-timeline .title:after{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 20px;
    right: -5px;
    transform: rotate(-45deg);
}

.main-timeline .description{
    padding: 15px;
    margin: 0;
    font-size: 14px;
    color: #656565;
    background: #fff;
    border-radius: 0 0 6px 6px;
}

.main-timeline .timeline:nth-child(2n+2) .timeline-content{
    float: right;
}

.main-timeline .timeline:nth-child(2n+2) .title:after{
    left: -5px;
}
/*有多少条要设置其量*/
.main-timeline .timeline:nth-child(1) .title,
.main-timeline .timeline:nth-child(1) .title:after{
    background: #9f84c4;
}

.main-timeline .timeline:nth-child(2) .title,
.main-timeline .timeline:nth-child(2) .title:after{
    background: #02a2dd;
}

.main-timeline .timeline:nth-child(3) .title,
.main-timeline .timeline:nth-child(3) .title:after{
    background: #58b25e;
}

.main-timeline .timeline:nth-child(4) .title,
.main-timeline .timeline:nth-child(4) .title:after{
    background: #efb715;
}

.main-timeline .timeline:nth-child(5) .title,
.main-timeline .timeline:nth-child(5) .title:after{
    background: #ffe218;
}

.main-timeline .timeline:nth-child(6) .title,
.main-timeline .timeline:nth-child(6) .title:after{
    background: #eab788;
}



@media only screen and (max-width: 990px){
    .main-timeline{ width: 100%; }
}

@media only screen and (max-width: 767px){
    .main-timeline:before,
    .main-timeline .date{
        left: 6%;
    }
    .main-timeline .timeline-content{
        width: 85%;
        float: right;
    }
    .main-timeline .title:after{
        left: -5px;
    }
}

@media only screen and (max-width: 480px){
    .main-timeline:before,
    .main-timeline .date{
        left: 12%;
    }
    .main-timeline .timeline-content{
        width: 75%;
    }
    .main-timeline .date{
        width: 60px;
        height: 60px;
        margin-left: -30px;
    }
    .main-timeline .month{
        font-size: 14px;
    }
}@charset "utf-8";
/* CSS Document */

　　

html5:

  
  










 

        

            

                
Timeline Style
            

            

                

                    

                    
                                           
                        

                            

                                
                                    10th
                                    Apr
                                    2017
                                
                                
Web Design
                                
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.
                            
                        

                        

                            

                                
                                    12th
                                    Apr
                                    2017
                                
                                
Web Development
                                
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.
                            
                        

                        

                            

                                
                                    14th
                                    Apr
                                    2017
                                
                                
Brand Building
                                
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.
                            
                        

                        

                            

                                
                                    16th
                                    Apr
                                    2017
                                
                                
Responsive Design
                                
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.
                            
                        
                        
                         

                            

                                
                                    28th
                                    Aug
                                    2017
                                
                                
中国人民解放军
                                
生中朝右发的凯撒奖地板革最悲歌罗东进榴莲味觉得撒开了房间.
                            
                        
                        
                        

                            

                                
                                    26th
                                    Jun
                                    2018
                                
                                
深圳市罗湖区布心路3008号
                                
涂聚文，昵称：Geovin Du.繁體：塗聚文，生命在于运动。营养膳食养生。
                            
                        
                    
                
            
        
    

　

效果：