timeline style : demo 26

2018

Web Designer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis. Quisque eu ornare risus, vitae fermentum eros. Etiam venenatis ac.

2017

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis. Quisque eu ornare risus, vitae fermentum eros. Etiam venenatis ac.

2016

Web Designer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis. Quisque eu ornare risus, vitae fermentum eros. Etiam venenatis ac.

2015

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis. Quisque eu ornare risus, vitae fermentum eros. Etiam venenatis ac.

HTML

                        
2018

Web Designer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis. Quisque eu ornare risus, vitae fermentum eros. Etiam venenatis ac.

2017

Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis. Quisque eu ornare risus, vitae fermentum eros. Etiam venenatis ac.

CSS

                        .demo{ background: #f2f2f2; }
                        .main-timeline{
                            overflow: hidden;
                            position: relative;
                        }
                        .main-timeline .timeline{
                            width: 50%;
                            float: right;
                            position: relative;
                            z-index: 1;
                        }
                        .main-timeline .timeline:before,
                        .main-timeline .timeline:after{
                            content: "";
                            display: block;
                            width: 100%;
                            clear: both;
                        }
                        .main-timeline .timeline:before{
                            content: "";
                            width: 40%;
                            height: 6px;
                            background: #9f005d;
                            position: absolute;
                            top: 50%;
                            left: 0;
                            z-index: -1;
                            transform: translateY(-50%);
                        }
                        .main-timeline .timeline:after{
                            content: "";
                            width: 6px;
                            height: 70%;
                            background: #9f005d;
                            position: absolute;
                            top: 50%;
                            left: -3px;
                        }
                        .main-timeline .timeline-content{
                            width: 65%;
                            float: right;
                            padding: 0 0 30px 30px;
                            margin-right: 15px;
                            background: #fff;
                            border-radius: 10px;
                            box-shadow: 3px 3px 5px 6px #ccc;
                        }
                        .main-timeline .timeline-content:before,
                        .main-timeline .timeline-content:after{
                            content: "";
                            width: 26px;
                            height: 26px;
                            border-radius: 50%;
                            background: #9f005d;
                            position: absolute;
                            top: 50%;
                            left: -13px;
                            z-index: 1;
                            transform: translateY(-50%);
                        }
                        .main-timeline .timeline-content:after{
                            left: 30%;
                            transform: translate(-50%,-50%);
                        }
                        .main-timeline .year{
                            display: block;
                            font-size: 28px;
                            font-weight: bold;
                            color: #9f005d;
                            text-align: center;
                            padding-left: 50px;
                        }
                        .main-timeline .content-inner{
                            padding: 35px 15px 35px 110px;
                            margin-right: -15px;
                            background: #9f005d;
                            border-radius: 150px 0 0 150px;
                            position: relative;
                        }
                        .main-timeline .content-inner:before,
                        .main-timeline .content-inner:after{
                            content: "";
                            border-left: 15px solid #640026;
                            border-top: 10px solid transparent;
                            position: absolute;
                            top: -10px;
                            right: 0;
                        }
                        .main-timeline .content-inner:after{
                            border-top: none;
                            border-bottom: 10px solid transparent;
                            top: auto;
                            bottom: -10px;
                        }
                        .main-timeline .icon{
                            width: 110px;
                            height: 100%;
                            text-align: center;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                        .main-timeline .icon i{
                            font-size: 60px;
                            font-weight: bold;
                            color: #fff;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                        }
                        .main-timeline .title{
                            font-size: 22px;
                            font-weight: bold;
                            color: #fff;
                            margin: 0 0 5px 0;
                        }
                        .main-timeline .description{
                            font-size: 14px;
                            color: #fff;
                            margin: 0;
                        }
                        .main-timeline .timeline:nth-child(2n):before,
                        .main-timeline .timeline:nth-child(2n):after,
                        .main-timeline .timeline:nth-child(2n) .icon{
                            left: auto;
                            right: 0;
                        }
                        .main-timeline .timeline:nth-child(2n):after{ right: -3px; }
                        .main-timeline .timeline:nth-child(2n) .timeline-content{
                            float: left;
                            padding: 0 30px 30px 0;
                            margin: 0 0 0 15px;
                        }
                        .main-timeline .timeline:nth-child(2n) .timeline-content:before,
                        .main-timeline .timeline:nth-child(2n) .timeline-content:after{
                            left: auto;
                            right: -13px;
                        }
                        .main-timeline .timeline:nth-child(2n) .timeline-content:after{
                            right: 30%;
                            margin-right: -25px;
                        }
                        .main-timeline .timeline:nth-child(2n) .year{ padding: 0 50px 0 0; }
                        .main-timeline .timeline:nth-child(2n) .content-inner{
                            padding: 35px 110px 35px 15px;
                            margin: 0 0 0 -15px;
                            border-radius: 0 150px 150px 0;
                        }
                        .main-timeline .timeline:nth-child(2n) .content-inner:before,
                        .main-timeline .timeline:nth-child(2n) .content-inner:after{
                            border: none;
                            border-right: 15px solid #027dcd;
                            border-top: 10px solid transparent;
                            right: auto;
                            left: 0;
                        }
                        .main-timeline .timeline:nth-child(2n) .content-inner:after{
                            border-top: none;
                            border-bottom: 10px solid transparent;
                        }
                        .main-timeline .timeline:nth-child(2){ margin-top: 200px; }
                        .main-timeline .timeline:nth-child(odd){ margin: -190px 0 0 0; }
                        .main-timeline .timeline:nth-child(even){ margin-bottom: 70px; }
                        .main-timeline .timeline:first-child,
                        .main-timeline .timeline:last-child:nth-child(even){ margin: 0; }
                        .main-timeline .timeline:nth-child(2n):before,
                        .main-timeline .timeline:nth-child(2n):after,
                        .main-timeline .timeline:nth-child(2n) .timeline-content:before,
                        .main-timeline .timeline:nth-child(2n) .timeline-content:after,
                        .main-timeline .timeline:nth-child(2n) .content-inner{ background: #05b1ff; }
                        .main-timeline .timeline:nth-child(2n) .year{ color: #05b1ff }
                        .main-timeline .timeline:nth-child(3n):before,
                        .main-timeline .timeline:nth-child(3n):after,
                        .main-timeline .timeline:nth-child(3n) .timeline-content:before,
                        .main-timeline .timeline:nth-child(3n) .timeline-content:after,
                        .main-timeline .timeline:nth-child(3n) .content-inner{ background: #00a3a9; }
                        .main-timeline .timeline:nth-child(3n) .content-inner:before,
                        .main-timeline .timeline:nth-child(3n) .content-inner:after{ border-left-color: #006662; }
                        .main-timeline .timeline:nth-child(3n) .year{ color: #00a3a9 }
                        .main-timeline .timeline:nth-child(4n):before,
                        .main-timeline .timeline:nth-child(4n):after,
                        .main-timeline .timeline:nth-child(4n) .timeline-content:before,
                        .main-timeline .timeline:nth-child(4n) .timeline-content:after,
                        .main-timeline .timeline:nth-child(4n) .content-inner{ background: #f92534; }
                        .main-timeline .timeline:nth-child(4n) .content-inner:before,
                        .main-timeline .timeline:nth-child(4n) .content-inner:after{ border-right-color: #92070e; }
                        .main-timeline .timeline:nth-child(4n) .year{ color: #f92534 }
                        @media only screen and (max-width: 990px) and (min-width: 768px){
                            .main-timeline .timeline:after{ height: 80%; }
                        }
                        @media only screen and (max-width: 767px){
                            .main-timeline .timeline{ width: 95%; }
                            .main-timeline .timeline:nth-child(odd),
                            .main-timeline .timeline:nth-child(even),
                            .main-timeline .timeline:last-child{ margin: 0; }
                            .main-timeline .timeline{ margin: 15px 15px 15px 0 !important; }
                            .main-timeline .timeline:before,
                            .main-timeline .timeline:after,
                            .main-timeline .timeline .timeline-content:before,
                            .main-timeline .timeline .timeline-content:after{ display: none; }
                            .main-timeline .timeline-content,
                            .main-timeline .timeline:nth-child(2n) .timeline-content{
                                width: 100%;
                                float: none;
                                padding: 0 0 30px 30px;
                                margin: 0;
                            }
                            .main-timeline .content-inner,
                            .main-timeline .timeline:nth-child(2n) .content-inner{
                                padding: 35px 15px 35px 110px;
                                margin: 0 -15px 0 0;
                                border-radius: 150px 0 0 150px;
                            }
                            .main-timeline .timeline:nth-child(2n) .content-inner:before,
                            .main-timeline .timeline:nth-child(2n) .content-inner:after{
                                border: none;
                                border-left: 15px solid #027dcd;
                                border-top: 10px solid transparent;
                                right: 0;
                                left: auto;
                            }
                            .main-timeline .timeline:nth-child(2n) .content-inner:after{
                                border-top: none;
                                border-bottom: 10px solid transparent;
                            }
                            .main-timeline .timeline:nth-child(2n) .icon{
                                top: 0;
                                left: 0;
                            }
                            .main-timeline .timeline:nth-child(4n) .content-inner:before,
                            .main-timeline .timeline:nth-child(4n) .content-inner:after{ border-left-color: #92070e; }
                        }
                    
License Terms