timeline style : demo 12

2013 - 2014

Web Desginer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lectus justo. Nam ultricies laoreet massa sed maximus. Curabitur tristique sagittis scelerisque. Vivamus posuere nisi quis tortor interdum, in finibus risus convallis. Suspendisse efficitur lacus a nulla commodo, sit amet vestibulum nibh.

2014 - 2015

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lectus justo. Nam ultricies laoreet massa sed maximus. Curabitur tristique sagittis scelerisque. Vivamus posuere nisi quis tortor interdum, in finibus risus convallis. Suspendisse efficitur lacus a nulla commodo, sit amet vestibulum nibh.

2015 - 2016

Web Desginer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lectus justo. Nam ultricies laoreet massa sed maximus. Curabitur tristique sagittis scelerisque. Vivamus posuere nisi quis tortor interdum, in finibus risus convallis. Suspendisse efficitur lacus a nulla commodo, sit amet vestibulum nibh.

2016 - 2017

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lectus justo. Nam ultricies laoreet massa sed maximus. Curabitur tristique sagittis scelerisque. Vivamus posuere nisi quis tortor interdum, in finibus risus convallis. Suspendisse efficitur lacus a nulla commodo, sit amet vestibulum nibh.

HTML

                        
2013 - 2014

Web Desginer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lectus justo. Nam ultricies laoreet massa sed maximus. Curabitur tristique sagittis scelerisque. Vivamus posuere nisi quis tortor interdum, in finibus risus convallis. Suspendisse efficitur lacus a nulla commodo, sit amet vestibulum nibh.

2014 - 2015

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lectus justo. Nam ultricies laoreet massa sed maximus. Curabitur tristique sagittis scelerisque. Vivamus posuere nisi quis tortor interdum, in finibus risus convallis. Suspendisse efficitur lacus a nulla commodo, sit amet vestibulum nibh.

2015 - 2016

Web Desginer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lectus justo. Nam ultricies laoreet massa sed maximus. Curabitur tristique sagittis scelerisque. Vivamus posuere nisi quis tortor interdum, in finibus risus convallis. Suspendisse efficitur lacus a nulla commodo, sit amet vestibulum nibh.

CSS

                        .main-timeline{ position: relative; }
                        .main-timeline:before,
                        .main-timeline:after{
                            content: "";
                            display: block;
                            width: 100%;
                            clear: both;
                        }
                        .main-timeline:before{
                            content: "";
                            width: 3px;
                            height: 100%;
                            background: #302124;
                            position: absolute;
                            top: 0;
                            left: 50%;
                        }
                        .main-timeline .timeline{
                            width: 50%;
                            float: left;
                            position: relative;
                            z-index: 1;
                        }
                        .main-timeline .timeline:before,
                        .main-timeline .timeline:after{
                            content: "";
                            display: block;
                            width: 100%;
                            clear: both;
                        }
                        .main-timeline .timeline:first-child:before,
                        .main-timeline .timeline:last-child:before{
                            content: "";
                            width: 25px;
                            height: 25px;
                            border-radius: 50%;
                            background: #fff;
                            border: 4px solid #cca872;
                            position: absolute;
                            top: 0;
                            right: -14px;
                            z-index: 1;
                        }
                        .main-timeline .timeline:last-child:before{
                            top: auto;
                            bottom: 0;
                        }
                        .main-timeline .timeline:last-child:nth-child(even):before{
                            right: auto;
                            left: -12px;
                            bottom: -2px;
                        }
                        .main-timeline .timeline-content{
                            text-align: center;
                            margin-top: 8px;
                            position: relative;
                            transition: all 0.3s ease 0s;
                        }
                        .main-timeline .timeline-content:before{
                            content: "";
                            width: 100%;
                            height: 5px;
                            background: #cca872;
                            position: absolute;
                            top: 88px;
                            left: 0;
                            z-index: -1;
                        }
                        .main-timeline .circle{
                            width: 180px;
                            height: 180px;
                            border-radius: 50%;
                            background: #fff;
                            border: 8px solid #cca872;
                            float: left;
                            margin-right: 25px;
                            position: relative;
                        }
                        .main-timeline .circle:before{
                            content: "";
                            width: 26px;
                            height: 30px;
                            background: #cca872;
                            margin: auto;
                            position: absolute;
                            top: 0;
                            right: -33px;
                            bottom: 0;
                            z-index: -1;
                            box-shadow: inset 7px 0 9px -7px #444;
                        }
                        .main-timeline .circle span{
                            display: block;
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            line-height: 160px;
                            border: 3px solid #adabab;
                            font-size: 80px;
                            color: #454344;
                        }
                        .main-timeline .circle span:before,
                        .main-timeline .circle span:after{
                            content: "";
                            width: 28px;
                            height: 50px;
                            background: #fff;
                            border-radius: 0 0 0 21px;
                            margin: auto;
                            position: absolute;
                            top: -54px;
                            right: -33px;
                            bottom: 0;
                            z-index: -1;
                        }
                        .main-timeline .circle span:after{
                            border-radius: 21px 0 0 0;
                            top: 0;
                            bottom: -56px;
                        }
                        .main-timeline .content{
                            display: table;
                            padding-right: 40px;
                            position: relative;
                        }
                        .main-timeline .year{
                            display: block;
                            padding: 10px;
                            margin: 10px 0 50px 0;
                            background: #cca872;
                            border-radius: 7px;
                            font-size: 25px;
                            color: #fff;
                        }
                        .main-timeline .title{
                            font-size: 25px;
                            font-weight: bold;
                            color: #cca872;
                            margin-top: 0;
                        }
                        .main-timeline .description{
                            font-size: 14px;
                            color: #a6a6a6;
                            text-align: justify;
                        }
                        .main-timeline .icon{
                            width: 25px;
                            height: 25px;
                            border-radius: 50%;
                            background: #fff;
                            border: 4px solid #cca872;
                            position: absolute;
                            top: 78px;
                            right: -14px;
                        }
                        .main-timeline .icon:before{
                            content: "";
                            width: 15px;
                            height: 25px;
                            background: #cca872;
                            margin: auto;
                            position: absolute;
                            top: -1px;
                            left: -15px;
                            bottom: 0;
                            z-index: -1;
                        }
                        .main-timeline .icon span:before,
                        .main-timeline .icon span:after{
                            content: "";
                            width: 21px;
                            height: 25px;
                            background: #fff;
                            border-radius: 0 0 21px 0;
                            margin: auto;
                            position: absolute;
                            top: -30px;
                            left: -15px;
                            bottom: 0;
                            z-index: -1;
                        }
                        .main-timeline .icon span:after{
                            border-radius: 0 21px 0 0;
                            top: 0;
                            left: -15px;
                            bottom: -30px;
                        }
                        .main-timeline .timeline:nth-child(2n) .timeline-content,
                        .main-timeline .timeline:nth-child(2n) .circle{
                            float: right;
                        }
                        .main-timeline .timeline:nth-child(2n) .circle{
                            margin: 0 0 0 25px;
                        }
                        .main-timeline .timeline:nth-child(2n) .circle:before{
                            right: auto;
                            left: -33px;
                            box-shadow: -7px 0 9px -7px #444 inset;
                        }
                        .main-timeline .timeline:nth-child(2n) .circle span:before,
                        .main-timeline .timeline:nth-child(2n) .circle span:after{
                            right: auto;
                            left: -33px;
                            border-radius: 0 0 21px 0;
                        }
                        .main-timeline .timeline:nth-child(2n) .circle span:after{
                            border-radius: 0 21px 0 0;
                        }
                        .main-timeline .timeline:nth-child(2n) .content{
                            padding: 0 0 0 40px;
                            margin-left: 2px;
                        }
                        .main-timeline .timeline:nth-child(2n) .icon{
                            right: auto;
                            left: -14px;
                        }
                        .main-timeline .timeline:nth-child(2n) .icon:before,
                        .main-timeline .timeline:nth-child(2n) .icon span:before,
                        .main-timeline .timeline:nth-child(2n) .icon span:after{
                            left: auto;
                            right: -15px;
                        }
                        .main-timeline .timeline:nth-child(2n) .icon span:before{
                            border-radius: 0 0 0 21px;
                        }
                        .main-timeline .timeline:nth-child(2n) .icon span:after{
                            border-radius: 21px 0 0 0;
                        }
                        .main-timeline .timeline:nth-child(2){
                            margin-top: 180px;
                        }
                        .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;
                        }
                        @media only screen and (max-width: 990px){
                            .main-timeline:before{ left: 100%; }
                            .main-timeline .timeline{
                                width: 100%;
                                float: none;
                                margin-bottom: 20px !important;
                            }
                            .main-timeline .timeline:first-child:before,
                            .main-timeline .timeline:last-child:before{
                                left: auto !important;
                                right: -13px !important;
                            }
                            .main-timeline .timeline:nth-child(2n) .circle{
                                float: left;
                                margin: 0 25px 0 0;
                            }
                            .main-timeline .timeline:nth-child(2n) .circle:before{
                                right: -33px;
                                left: auto;
                                box-shadow: 7px 0 9px -7px #444 inset;
                            }
                            .main-timeline .timeline:nth-child(2n) .circle span:before,
                            .main-timeline .timeline:nth-child(2n) .circle span:after{
                                right: -33px;
                                left: auto;
                                border-radius: 0 0 0 21px;
                            }
                            .main-timeline .timeline:nth-child(2n) .circle span:after{
                                border-radius: 21px 0 0 0;
                            }
                            .main-timeline .timeline:nth-child(2n) .content{
                                padding: 0 40px 0 0;
                                margin-left: 0;
                            }
                            .main-timeline .timeline:nth-child(2n) .icon{
                                right: -14px;
                                left: auto;
                            }
                            .main-timeline .timeline:nth-child(2n) .icon:before,
                            .main-timeline .timeline:nth-child(2n) .icon span:before,
                            .main-timeline .timeline:nth-child(2n) .icon span:after{
                                left: -15px;
                                right: auto;
                            }
                            .main-timeline .timeline:nth-child(2n) .icon span:before{
                                border-radius: 0 0 21px 0;
                            }
                            .main-timeline .timeline:nth-child(2n) .icon span:after{
                                border-radius: 0 21px 0 0;
                            }
                            .main-timeline .timeline:nth-child(2),
                            .main-timeline .timeline:nth-child(odd),
                            .main-timeline .timeline:nth-child(even){
                                margin: 0;
                            }
                        }
                        @media only screen and (max-width: 480px){
                            .main-timeline:before{ left: 0; }
                            .main-timeline .timeline:first-child:before,
                            .main-timeline .timeline:last-child:before{
                                left: -12px !important;
                                right: auto !important;
                            }
                            .main-timeline .circle,
                            .main-timeline .timeline:nth-child(2n) .circle{
                                width: 130px;
                                height: 130px;
                                float: none;
                                margin: 0 auto;
                            }
                            .main-timeline .timeline-content:before{
                                width: 99.5%;
                                top: 68px;
                                left: 0.5%;
                            }
                            .main-timeline .circle span{
                                line-height: 115px;
                                font-size: 60px;
                            }
                            .main-timeline .circle:before,
                            .main-timeline .circle span:before,
                            .main-timeline .circle span:after,
                            .main-timeline .icon{
                                display: none;
                            }
                            .main-timeline .content,
                            .main-timeline .timeline:nth-child(2n) .content{
                                padding: 0 10px;
                            }
                            .main-timeline .year{
                                margin-bottom: 15px;
                            }
                            .main-timeline .description{
                                text-align: center;
                            }
                        }
                    
License Terms