timeline style : demo 24

2018

Web Desginer

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 Desginer

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 Desginer

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: #293335; }
                        .main-timeline{
                            overflow: hidden;
                            position: relative;
                        }
                        .main-timeline:before{
                            content: "";
                            width: 3px;
                            height: 100%;
                            background: #fff;
                            position: absolute;
                            top: 0;
                            left: 50%;
                            transform: translateX(-50%);
                        }
                        .main-timeline .timeline{
                            width: 50%;
                            float: left;
                            position: relative;
                        }
                        .main-timeline .timeline:before,
                        .main-timeline .timeline:after{
                            content: "";
                            display: block;
                            width: 100%;
                            clear: both;
                        }
                        .main-timeline .timeline:before{
                            content: "";
                            width: 45%;
                            height: 3px;
                            background: #fff;
                            position: absolute;
                            top: 50%;
                            right: 0;
                            transform: translateY(-50%);
                        }
                        .main-timeline .year{
                            display: block;
                            width: 120px;
                            height: 120px;
                            line-height: 120px;
                            border-radius: 50%;
                            background: #e3bd40;
                            font-size: 30px;
                            font-weight: bold;
                            color: #23363a;
                            text-align: center;
                            position: absolute;
                            top: 50%;
                            right: 7%;
                            transform: translateY(-50%);
                        }
                        .main-timeline .timeline-content{
                            width: 65%;
                            padding: 40px;
                            background: #e3bd40;
                            position: relative;
                        }
                        .main-timeline .timeline-content:after{
                            content: "";
                            border-bottom: 40px solid #23363a;
                            border-left: 40px solid transparent;
                            position: absolute;
                            bottom: 20px;
                            right: 20px;
                        }
                        .main-timeline .title{
                            font-size: 19px;
                            font-weight: bold;
                            color: #fff;
                            margin: 0 0 10px 0;
                        }
                        .main-timeline .description{
                            font-size: 14px;
                            color: #fff;
                            margin: 0;
                        }
                        .main-timeline .timeline:nth-child(2n):before{
                            right: auto;
                            left: 0;
                        }
                        .main-timeline .timeline:nth-child(2n) .year{
                            right: auto;
                            left: 7%;
                        }
                        .main-timeline .timeline:nth-child(2n) .timeline-content{ float: right; }
                        .main-timeline .timeline:nth-child(2){ margin-top: 160px; }
                        .main-timeline .timeline:nth-child(odd){ margin: -160px 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) .year,
                        .main-timeline .timeline:nth-child(2n) .timeline-content{ background: #ff6cba; }
                        .main-timeline .timeline:nth-child(3n) .year,
                        .main-timeline .timeline:nth-child(3n) .timeline-content{ background: #60bee4; }
                        .main-timeline .timeline:nth-child(4n) .year,
                        .main-timeline .timeline:nth-child(4n) .timeline-content{ background: #a3cc42; }
                        @media only screen and (max-width: 1200px){
                            .main-timeline .year{
                                width: 100px;
                                height: 100px;
                                line-height: 100px;
                            }
                        }
                        @media only screen and (max-width: 990px) and (min-width: 768px){
                            .main-timeline .year{
                                width: 80px;
                                height: 80px;
                                line-height: 80px;
                                font-size: 24px;
                            }
                        }
                        @media only screen and (max-width: 767px){
                            .main-timeline:before,
                            .main-timeline .timeline:before{ display: none; }
                            .main-timeline .timeline,
                            .main-timeline .timeline:nth-child(even),
                            .main-timeline .timeline:nth-child(odd){
                                width: 100%;
                                float: none;
                                text-align: center;
                                margin: 0;
                            }
                            .main-timeline .timeline{ margin-bottom: 20px !important; }
                            .main-timeline .timeline:last-child{ margin-bottom: 0 !important; }
                            .main-timeline .year,
                            .main-timeline .timeline:nth-child(2n) .year{
                                margin: 0 auto 10px;
                                position: relative;
                                top: 0;
                                left: 0;
                                transform: translateY(0);
                            }
                            .main-timeline .year:after{
                                content: "";
                                width: 3px;
                                height: 20px;
                                background: #fff;
                                position: absolute;
                                bottom: -20px;
                                left: 50%;
                                z-index: 1;
                                transform: translate(-50%);
                            }
                            .main-timeline .timeline .timeline-content{
                                width: 100%;
                                float: none;
                                padding: 40px;
                            }
                            .main-timeline .timeline .timeline-content:before{
                                content: "";
                                border-bottom: 40px solid #23363a;
                                border-right: 40px solid transparent;
                                position: absolute;
                                bottom: 20px;
                                left: 20px;
                            }
                        }
                    
License Terms