timeline style : demo 21

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.

2017

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.

2016

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.

2015

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.

2014

HTML

                        

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.

2017

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.

2016

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: 10px;
                            height: 10px;
                            border-radius: 50%;
                            border: 3px solid #fff;
                            background: #f4a24c;
                            box-sizing: content-box;
                            margin: auto;
                            position: absolute;
                            top: 0;
                            left: 2%;
                            bottom: 0;
                            right: 0;
                            z-index: 2;
                        }
                        .main-timeline .timeline-icon{
                            width: 24px;
                            height: 100%;
                            border-radius: 0 12px 12px 0;
                            background: #f4a24c;
                            position: absolute;
                            top: 0;
                            left: 51%;
                            z-index: 1;
                            transform: translateX(-50%);
                        }
                        .main-timeline .timeline-icon:before{
                            content: "";
                            width: 47px;
                            height: 4px;
                            background: #f4a24c;
                            margin: auto 0;
                            position: absolute;
                            top: 0;
                            left: 24px;
                            bottom: 0;
                        }
                        .main-timeline .timeline-icon:after{
                            content: "";
                            width: 16px;
                            height: 16px;
                            border-radius: 50%;
                            background: #f4a24c;
                            margin: auto 0;
                            position: absolute;
                            top: 0;
                            left: 70px;
                            bottom: 0;
                        }
                        .main-timeline .timeline-content{
                            width: 50%;
                            padding: 30px 40px 30px 80px;
                        }
                        .main-timeline .title{
                            font-size: 24px;
                            font-weight: bold;
                            color: #f4a24c;
                            text-align: center;
                            margin: 0 0 7px 0;
                        }
                        .main-timeline .description{
                            font-size: 14px;
                            color: #959595;
                            line-height: 24px;
                            margin: 0;
                        }
                        .main-timeline .icon{
                            width: 50%;
                            height: auto;
                            padding-left: 100px;
                            position: absolute;
                            top: 50%;
                            right: 0;
                            transform: translateY(-50%);
                        }
                        .main-timeline .icon i{
                            display: inline-block;
                            width: 85px;
                            height: 85px;
                            line-height: 87px;
                            border-radius: 50%;
                            background: #f4a24c;
                            font-size: 54px;
                            color: #fff;
                            text-align: center;
                            margin-right: 20px;
                        }
                        .main-timeline .year{
                            display: inline-block;
                            font-size: 40px;
                            font-weight: bold;
                            line-height: 36px;
                            color: #797979;
                            position: relative;
                            top: -6px;
                        }
                        .main-timeline .timeline:nth-child(2n):before{ left: -2%; }
                        .main-timeline .timeline:nth-child(2n) .timeline-icon{
                            border-radius: 12px 0 0 12px;
                            left: 49%;
                        }
                        .main-timeline .timeline:nth-child(2n) .timeline-icon:before{ left: -47px; }
                        .main-timeline .timeline:nth-child(2n) .timeline-icon:after{ left: -62px; }
                        .main-timeline .timeline:nth-child(2n) .timeline-content{
                            float: right;
                            padding: 30px 80px 30px 40px;
                        }
                        .main-timeline .timeline:nth-child(2n) .icon{
                            padding: 0 100px 0 0;
                            text-align: right;
                            right: auto;
                            left: 0;
                        }
                        .main-timeline .timeline:nth-child(2n) .icon i{
                            float: right;
                            margin: 0 0 0 20px;
                        }
                        .main-timeline .timeline:nth-child(2n) .year{ top: 24px; }
                        .main-timeline .timeline:nth-child(2n):before,
                        .main-timeline .timeline:nth-child(2n) .timeline-icon,
                        .main-timeline .timeline:nth-child(2n) .timeline-icon:before,
                        .main-timeline .timeline:nth-child(2n) .timeline-icon:after,
                        .main-timeline .timeline:nth-child(2n) .icon i{ background: #f26f77; }
                        .main-timeline .timeline:nth-child(2n) .title{ color: #f26f77; }
                        .main-timeline .timeline:nth-child(3n):before,
                        .main-timeline .timeline:nth-child(3n) .timeline-icon,
                        .main-timeline .timeline:nth-child(3n) .timeline-icon:before,
                        .main-timeline .timeline:nth-child(3n) .timeline-icon:after,
                        .main-timeline .timeline:nth-child(3n) .icon i{ background: #48aeba; }
                        .main-timeline .timeline:nth-child(3n) .title{ color: #48aeba; }
                        .main-timeline .timeline:nth-child(4n):before,
                        .main-timeline .timeline:nth-child(4n) .timeline-icon,
                        .main-timeline .timeline:nth-child(4n) .timeline-icon:before,
                        .main-timeline .timeline:nth-child(4n) .timeline-icon:after,
                        .main-timeline .timeline:nth-child(4n) .icon i{ background: #a3ba74; }
                        .main-timeline .timeline:nth-child(4n) .title{ color: #a3ba74; }
                        @media only screen and (max-width: 767px){
                            .main-timeline .timeline:before,
                            .main-timeline .timeline:nth-child(2n):before{
                                margin: 0 auto;
                                top: 4px;
                                left: 0;
                                right: 0;
                            }
                            .main-timeline .timeline-icon,
                            .main-timeline .timeline:nth-child(2n) .timeline-icon{
                                width: 100%;
                                height: 24px;
                                border-radius: 0 0 12px 12px;
                                top: 0;
                                left: 0;
                                transform: translateX(0);
                            }
                            .main-timeline .timeline-icon:before,
                            .main-timeline .timeline:nth-child(2n) .timeline-icon:before{
                                width: 4px;
                                height: 20px;
                                margin: 0 auto;
                                top: auto;
                                left: 0;
                                bottom: -20px;
                                right: 0;
                            }
                            .main-timeline .timeline-icon:after,
                            .main-timeline .timeline:nth-child(2n) .timeline-icon:after{
                                margin: 0 auto;
                                top: auto;
                                left: 0;
                                bottom: -32px;
                                right: 0;
                            }
                            .main-timeline .timeline-content,
                            .main-timeline .timeline:nth-child(2n) .timeline-content{
                                float: none;
                                width: 100%;
                                padding: 140px 20px 30px 20px;
                                text-align: center;
                            }
                            .main-timeline .icon,
                            .main-timeline .timeline:nth-child(2n) .icon{
                                width: 100%;
                                text-align: center;
                                padding: 0;
                                top: 55px;
                                right: 0;
                                transform: translateY(0);
                            }
                            .main-timeline .icon i,
                            .main-timeline .timeline:nth-child(2n) .icon i{
                                float: none;
                                width: 70px;
                                height: 70px;
                                line-height: 74px;
                                font-size: 44px;
                                margin: 0 20px 0 0;
                            }
                            .main-timeline .timeline:nth-child(2n) .year{ top: -6px; }
                        }
                    
License Terms