timeline style : demo 20

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.

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.

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.

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.

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.

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.

CSS

                        .main-timeline{
                            overflow: hidden;
                            position: relative;
                        }
                        .main-timeline .timeline{ position: relative; }
                        .main-timeline .timeline:before,
                        .main-timeline .timeline:after{
                            content: "";
                            display: block;
                            width: 100%;
                            clear: both;
                        }
                        .main-timeline .timeline:before{
                            width: 12px;
                            height: 12px;
                            border-radius: 50%;
                            background: #fff;
                            margin: auto;
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            z-index: 2;
                        }
                        .main-timeline .timeline-icon{
                            width: 16px;
                            height: 95%;
                            background: #029bbd;
                            margin: auto;
                            position: absolute;
                            top: 5%;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            z-index: 1;
                        }
                        .main-timeline .timeline-icon:before,
                        .main-timeline .timeline-icon:after{
                            content: "";
                            border-bottom: 11px solid #029bbd;
                            border-left: 8px solid transparent;
                            border-right: 8px solid transparent;
                            position: absolute;
                            top: -11px;
                            left: 0;
                        }
                        .main-timeline .timeline-icon:after{
                            border-bottom-color: #fff;
                            top: auto;
                            bottom: 0;
                        }
                        .main-timeline .year{
                            display: inline-block;
                            padding: 5px 35px;
                            margin: 0;
                            border-radius: 4px;
                            font-size: 26px;
                            color: #fff;
                            background: linear-gradient(to right, #079dc0, #01c2bf);
                            text-align: center;
                            position: absolute;
                            top: 50%;
                            left: 32%;
                            transform: translateY(-50%);
                        }
                        .main-timeline .timeline-content{
                            width: 50%;
                            float: right;
                            padding: 0 60px 30px 60px;
                            position: relative;
                        }
                        .main-timeline .icon{
                            display: inline-block;
                            font-size: 40px;
                            color: #a7a7a7;
                            margin-bottom: 7px;
                        }
                        .main-timeline .title{
                            font-size: 20px;
                            font-weight: bold;
                            color: #a7a7a7;
                            margin: 0 0 7px 0;
                        }
                        .main-timeline .description{
                            font-size: 14px;
                            color: #a7a7a7;
                            line-height: 24px;
                            margin: 0;
                        }
                        .main-timeline .timeline:nth-child(2n) .year{
                            left: auto;
                            right: 32%;
                        }
                        .main-timeline .timeline:nth-child(2n) .timeline-content{ float: left; }
                        .main-timeline .timeline:nth-child(2n) .year{ background: linear-gradient(to right, #9e489f, #b64877); }
                        .main-timeline .timeline:nth-child(2n) .timeline-icon{ background: #9e489f; }
                        .main-timeline .timeline:nth-child(2n) .timeline-icon:before{ border-bottom-color: #9e489f; }
                        .main-timeline .timeline:nth-child(3n) .year{ background: linear-gradient(to right, #6ab00f, #9fce26); }
                        .main-timeline .timeline:nth-child(3n) .timeline-icon{ background: #6ab00f; }
                        .main-timeline .timeline:nth-child(3n) .timeline-icon:before{ border-bottom-color: #6ab00f; }
                        .main-timeline .timeline:nth-child(4n) .year{ background: linear-gradient(to right, #d84704, #ea703f); }
                        .main-timeline .timeline:nth-child(4n) .timeline-icon{ background: #d44908; }
                        .main-timeline .timeline:nth-child(4n) .timeline-icon:before{ border-bottom-color: #d44908; }
                        @media only screen and (max-width: 1200px){
                            .main-timeline .year{ left: 28%; }
                            .main-timeline .timeline:nth-child(2n) .year{ right: 28%; }
                        }
                        @media only screen and (max-width: 990px){
                            .main-timeline .year{ left: 25%; }
                            .main-timeline .timeline:nth-child(2n) .year{ right: 25%; }
                        }
                        @media only screen and (max-width: 767px){
                            .main-timeline .timeline{ padding-top: 30px; }
                            .main-timeline .timeline:before{
                                border: 15px solid transparent;
                                border-top-color: #029bbd;
                                border-bottom: 10px solid transparent;
                                margin: 0 auto;
                                position: absolute;
                                top: 1px;
                                left: 0;
                                z-index: 2;
                            }
                            .main-timeline .timeline:nth-child(2n):before{ border-top-color: #9e489f; }
                            .main-timeline .timeline:nth-child(3n):before{ border-top-color: #6ab00f; }
                            .main-timeline .timeline:nth-child(4n):before{ border-top-color: #d44908; }
                            .main-timeline .timeline-icon{
                                width: 100%;
                                height: 16px;
                                margin: 0;
                                top: 0;
                                left: 0;
                            }
                            .main-timeline .timeline-icon:before,
                            .main-timeline .timeline-icon:after{
                                border: 8px solid transparent;
                                border-left: 8px solid #fff;
                                top: 0;
                                left: 0;
                            }
                            .main-timeline .timeline-icon:after{
                                border-left: none;
                                border-right: 8px solid #fff;
                                left: auto;
                                right: 0;
                            }
                            .main-timeline .year,
                            .main-timeline .timeline:nth-child(2n) .year{
                                display: block;
                                margin: 0 30px 10px 30px;
                                position: relative;
                                top: 0;
                                left: 0;
                                transform: translateY(0);
                            }
                            .main-timeline .timeline-content,
                            .main-timeline .timeline:nth-child(2n) .timeline-content{
                                width: 100%;
                                float: none;
                                text-align: center;
                                padding: 0 30px 20px;
                            }
                        }
                    
License Terms