timeline style : demo 17

2017

Web Desginer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis justo id pulvinar suscipit. Pellentesque rutrum vehicula erat sed dictum. Integer quis turpis magna. Suspendisse tincidunt elit at erat tincidunt, vel vulputate arcu dapibus. Etiam accumsan ornare posuere. Nullam est.

2016

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis justo id pulvinar suscipit. Pellentesque rutrum vehicula erat sed dictum. Integer quis turpis magna. Suspendisse tincidunt elit at erat tincidunt, vel vulputate arcu dapibus. Etiam accumsan ornare posuere. Nullam est.

2015

Web Desginer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis justo id pulvinar suscipit. Pellentesque rutrum vehicula erat sed dictum. Integer quis turpis magna. Suspendisse tincidunt elit at erat tincidunt, vel vulputate arcu dapibus. Etiam accumsan ornare posuere. Nullam est.

2014

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis justo id pulvinar suscipit. Pellentesque rutrum vehicula erat sed dictum. Integer quis turpis magna. Suspendisse tincidunt elit at erat tincidunt, vel vulputate arcu dapibus. Etiam accumsan ornare posuere. Nullam est.

HTML

                        
2017

Web Desginer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis justo id pulvinar suscipit. Pellentesque rutrum vehicula erat sed dictum. Integer quis turpis magna. Suspendisse tincidunt elit at erat tincidunt, vel vulputate arcu dapibus. Etiam accumsan ornare posuere. Nullam est.

2016

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis justo id pulvinar suscipit. Pellentesque rutrum vehicula erat sed dictum. Integer quis turpis magna. Suspendisse tincidunt elit at erat tincidunt, vel vulputate arcu dapibus. Etiam accumsan ornare posuere. Nullam est.

2015

Web Desginer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis justo id pulvinar suscipit. Pellentesque rutrum vehicula erat sed dictum. Integer quis turpis magna. Suspendisse tincidunt elit at erat tincidunt, vel vulputate arcu dapibus. Etiam accumsan ornare posuere. Nullam est.

CSS

                        .main-timeline{
                            overflow: hidden;
                            position: relative;
                        }
                        .main-timeline:before,
                        .main-timeline:after{
                            content: "";
                            display: block;
                            width: 100%;
                            clear: both;
                        }
                        .main-timeline:before{
                            content: "";
                            width: 3px;
                            height: 100%;
                            background: #d6d5d5;
                            position: absolute;
                            top: 30px;
                            left: 50%;
                        }
                        .main-timeline .timeline{
                            width: 50%;
                            float: left;
                            padding-right: 30px;
                            position: relative;
                        }
                        .main-timeline .timeline-icon{
                            width: 32px;
                            height: 32px;
                            border-radius: 50%;
                            background: #fff;
                            border: 3px solid #fe6847;
                            position: absolute;
                            top: 5.5%;
                            right: -17.5px;
                        }
                        .main-timeline .year{
                            display: block;
                            padding: 10px;
                            margin: 0;
                            font-size: 30px;
                            color: #fff;
                            border-radius: 0 50px 50px 0;
                            background: #fe6847;
                            text-align: center;
                            position: relative;
                        }
                        .main-timeline .year:before{
                            content: "";
                            border-top: 35px solid #f59c8b;
                            border-left: 35px solid transparent;
                            position: absolute;
                            bottom: -35px;
                            left: 0;
                        }
                        .main-timeline .timeline-content{
                            padding: 30px 20px;
                            margin: 0 45px 0 35px;
                            background: #f2f2f2;
                        }
                        .main-timeline .title{
                            font-size: 19px;
                            font-weight: bold;
                            color: #504f54;
                            margin: 0 0 10px 0;
                        }
                        .main-timeline .description{
                            font-size: 14px;
                            color: #7d7b7b;
                            margin: 0;
                        }
                        .main-timeline .timeline:nth-child(2n){ padding: 0 0 0 30px; }
                        .main-timeline .timeline:nth-child(2n) .timeline-icon{
                            right: auto;
                            left: -14.5px;
                        }
                        .main-timeline .timeline:nth-child(2n) .year{ border-radius: 50px 0 0 50px; }
                        .main-timeline .timeline:nth-child(2n) .year:before{
                            border-left: none;
                            border-right: 35px solid transparent;
                            left: auto;
                            right: 0;
                        }
                        .main-timeline .timeline:nth-child(2n) .timeline-content{
                            text-align: right;
                            margin: 0 35px 0 45px;
                        }
                        .main-timeline .timeline:nth-child(2){ margin-top: 170px; }
                        .main-timeline .timeline:nth-child(odd){ margin: -175px 0 0 0; }
                        .main-timeline .timeline:nth-child(even){ margin-bottom: 80px; }
                        .main-timeline .timeline:first-child,
                        .main-timeline .timeline:last-child:nth-child(even){ margin: 0; }
                        .main-timeline .timeline:nth-child(2n) .timeline-icon{ border-color: #7eda99; }
                        .main-timeline .timeline:nth-child(2n) .year{ background: #7eda99; }
                        .main-timeline .timeline:nth-child(2n) .year:before{ border-top-color: #92efad; }
                        .main-timeline .timeline:nth-child(3n) .timeline-icon{ border-color: #8a5ec1; }
                        .main-timeline .timeline:nth-child(3n) .year{ background: #8a5ec1; }
                        .main-timeline .timeline:nth-child(3n) .year:before{ border-top-color: #a381cf; }
                        .main-timeline .timeline:nth-child(4n) .timeline-icon{ border-color: #f98d9c; }
                        .main-timeline .timeline:nth-child(4n) .year{ background: #f98d9c; }
                        .main-timeline .timeline:nth-child(4n) .year:before{ border-top-color: #f2aab3; }
                        @media only screen and (max-width: 767px){
                            .main-timeline{ overflow: visible; }
                            .main-timeline:before{
                                top: 0;
                                left: 0;
                            }
                            .main-timeline .timeline:nth-child(2),
                            .main-timeline .timeline:nth-child(odd),
                            .main-timeline .timeline:nth-child(even){ margin: 0; }
                            .main-timeline .timeline{
                                width: 100%;
                                float: none;
                                padding: 0 0 0 30px;
                                margin-bottom: 20px !important;
                            }
                            .main-timeline .timeline:last-child{ margin: 0 !important; }
                            .main-timeline .timeline-icon{
                                right: auto;
                                left: -14.5px;
                            }
                            .main-timeline .year{ border-radius: 50px 0 0 50px; }
                            .main-timeline .year:before{
                                border-left: none;
                                border-right: 35px solid transparent;
                                left: auto;
                                right: 0;
                            }
                            .main-timeline .timeline-content{ margin: 0 35px 0 45px; }
                        }
                    
License Terms