timeline style : demo 14

Apr 2013 - Mar 2014
Web Desginer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.

Apr 2014 - Mar 2015
Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.

Apr 2015 - Mar 2016
Web Desginer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.

Apr 2016 - Mar 2017
Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.

HTML

                        
Apr 2013 - Mar 2014
Web Desginer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.

Apr 2014 - Mar 2015
Web Developer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.

CSS

                        .demo{ background: #4e6457; }
                        .main-timeline{ position: relative; }
                        .main-timeline:before{
                            content: "";
                            width: 3px;
                            height: 100%;
                            background: #d9b44a;
                            position: absolute;
                            top: 0;
                            left: 50%;
                        }
                        .main-timeline .timeline{ position: relative; }
                        .main-timeline .timeline:before,
                        .main-timeline .timeline:after{
                            content: "";
                            display: block;
                            width: 100%;
                            clear: both;
                        }
                        .main-timeline .timeline:before{
                            content: "";
                            width: 5.2%;
                            height: 3px;
                            background: #d9b44a;
                            margin-left: -5%;
                            position: absolute;
                            top: 32%;
                            left: 50%;
                        }
                        .main-timeline .timeline-icon{
                            width: 28px;
                            height: 28px;
                            border-radius: 50%;
                            background: #fff;
                            border: 2px solid #d9b44a;
                            margin: 0 auto;
                            position: absolute;
                            top: 26.5%;
                            left: 44.5%;
                            z-index: 1;
                        }
                        .main-timeline .timeline-content{
                            width: 42%;
                            padding: 30px;
                            background: #fff;
                            text-align: right;
                            float: left;
                            margin-top: 8px;
                            border: 3px solid #d9b44a;
                            transition: all 0.3s ease 0s;
                        }
                        .main-timeline .date{
                            display: block;
                            font-size: 15px;
                            font-weight: 600;
                            color: #4e6457;
                            margin: 0 0 8px;
                        }
                        .main-timeline .title{
                            font-size: 15px;
                            color: #d9b44a;
                            margin-top: 0;
                        }
                        .main-timeline .description{
                            font-size: 16px;
                            color: #777;
                            line-height: 28px;
                            margin-top: 8px;
                        }
                        .main-timeline .timeline:nth-child(2n):before{ margin-left: 0; }
                        .main-timeline .timeline:nth-child(2n) .timeline-icon{
                            left: auto;
                            right: 44.5%;
                        }
                        .main-timeline .timeline:nth-child(2n) .timeline-content{
                            float: right;
                            text-align: left;
                        }
                        @media only screen and (max-width: 990px){
                            .main-timeline .timeline-icon{
                                width: 20px;
                                height: 20px;
                                top: 29%;
                            }
                        }
                        @media only screen and (max-width: 767px){
                            .main-timeline{ margin: 0 15px; }
                            .main-timeline:before{ left: 0; }
                            .main-timeline .timeline:before{
                                left: 0;
                                margin: 0;
                            }
                            .main-timeline .timeline-icon,
                            .main-timeline .timeline:nth-child(2n) .timeline-icon{
                                top: 27.5%;
                                left: 4.5%;
                                right: auto;
                            }
                            .main-timeline .timeline-content{
                                width: 90%;
                                float: right;
                                text-align: left;
                            }
                            .main-timeline .timeline-content:before{ left: -10%; }
                        }
                        @media only screen and (max-width: 480px){
                            .main-timeline .timeline:before{ display: none; }
                            .main-timeline .timeline-icon,
                            .main-timeline .timeline:nth-child(2n) .timeline-icon{
                                left: -9px;
                            }
                        }
                    
License Terms