timeline style : demo 5

23/04 2017

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus dolor felis, eu ultrices elit molestie.

24/04 2017

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus dolor felis, eu ultrices elit molestie.

25/04 2017

Brand Building

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus dolor felis, eu ultrices elit molestie.

26/04 2017

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus dolor felis, eu ultrices elit molestie.

HTML

                        
23/04 2017

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus dolor felis, eu ultrices elit molestie.

24/04 2017

Web Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur. Praesent dapibus dolor felis, eu ultrices elit molestie.

CSS

                        .main-timeline{
                            margin: 20px 0;
                            position: relative;
                        }
                        .main-timeline:before{
                            content: "";
                            display: block;
                            width: 2px;
                            height: 100%;
                            background: #ff794a;
                            margin: 0 auto;
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                        }
                        .main-timeline .timeline{
                            margin-bottom: 40px;
                            position: relative;
                        }
                        .main-timeline .timeline:after{
                            content: "";
                            display: block;
                            clear: both;
                        }
                        .main-timeline .icon{
                            width: 18px;
                            height: 18px;
                            line-height: 18px;
                            margin: auto;
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                        }
                        .main-timeline .icon:before,
                        .main-timeline .icon:after{
                            content: "";
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            transition: all 0.33s ease-out 0s;
                        }
                        .main-timeline .icon:before{
                            background: #fff;
                            border: 2px solid #00a79c;
                            left: -3px;
                        }
                        .main-timeline .icon:after{
                            border: 2px solid #ff794a;
                            left: 3px;
                        }
                        .main-timeline .timeline:hover .icon:before{
                            left: 3px;
                        }
                        .main-timeline .timeline:hover .icon:after{
                            left: -3px;
                        }
                        .main-timeline .date-content{
                            width: 50%;
                            float: left;
                            position: relative;
                        }
                        .main-timeline .date-content:before{
                            content: "";
                            width: 32.5%;
                            height: 2px;
                            background: #ff794a;
                            margin: auto 0;
                            position: absolute;
                            top: 0;
                            right: 10px;
                            bottom: 0;
                        }
                        .main-timeline .date-outer{
                            width: 175px;
                            height: 175px;
                            font-size: 16px;
                            color: #000;
                            text-align: center;
                            margin: auto;
                            z-index: 1;
                        }
                        .main-timeline .date-outer:before,
                        .main-timeline .date-outer:after{
                            content: "";
                            width: 175px;
                            height: 175px;
                            margin: 0 auto;
                            border-radius: 50%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            transition: all 0.33s ease-out 0s;
                        }
                        .main-timeline .date-outer:before{
                            background: #fff;
                            border: 2px solid #00a79c;
                            left: -6px;
                        }
                        .main-timeline .date-outer:after{
                            border: 2px solid #ff794a;
                            left: 6px;
                        }
                        .main-timeline .timeline:hover .date-outer:before{
                            left: 6px;
                        }
                        .main-timeline .timeline:hover .date-outer:after{
                            left: -6px;
                        }
                        .main-timeline .date{
                            width: 100%;
                            margin: auto;
                            position: absolute;
                            top: 33%;
                            left: 0;
                        }
                        .main-timeline .month{
                            font-size: 18px;
                            font-weight: 700;
                            color: #111;
                        }
                        .main-timeline .year{
                            display: block;
                            font-size: 36px;
                            font-weight: 700;
                            color: #111;
                            line-height: 36px;
                        }
                        .main-timeline .timeline-content{
                            width: 50%;
                            padding: 20px 0 20px 50px;
                            float: right;
                        }
                        .main-timeline .title{
                            font-size: 19px;
                            font-weight: 700;
                            color: #111;
                            line-height: 24px;
                            text-transform: uppercase;
                            margin: 0 0 15px 0;
                        }
                        .main-timeline .description{
                            font-size: 14px;
                            color: #787878;
                            margin-bottom: 0;
                        }
                        .main-timeline .timeline:nth-child(2n) .date-content{
                            float: right;
                        }
                        .main-timeline .timeline:nth-child(2n) .date-content:before{
                            left: 10px;
                        }
                        .main-timeline .timeline:nth-child(2n) .timeline-content{
                            padding: 20px 50px 20px 0;
                            text-align: right;
                        }
                        @media only screen and (max-width: 990px){
                            .main-timeline .date-content:before{
                                width: 22.5%;
                            }
                            .main-timeline .timeline-content{
                                padding: 10px 0 10px 30px;
                            }
                            .main-timeline .title{ font-size: 17px; }
                            .main-timeline .timeline:nth-child(2n) .timeline-content{
                                padding: 10px 30px 10px 0;
                            }
                        }
                        @media only screen and (max-width: 767px){
                            .main-timeline:before{
                                margin: 0;
                                left: 7px;
                            }
                            .main-timeline .timeline{
                                margin-bottom: 20px;
                            }
                            .main-timeline .icon{
                                margin: auto 0;
                            }
                            .main-timeline .date-content{
                                width: 95%;
                                float: right;
                            }
                            .main-timeline .date-content:before{
                                display: none;
                            }
                            .main-timeline .date-outer,
                            .main-timeline .date-outer:before,
                            .main-timeline .date-outer:after{
                                width: 130px;
                                height: 130px;
                            }
                            .main-timeline .date{
                                top: 30%;
                            }
                            .main-timeline .year{
                                font-size: 26px;
                            }
                            .main-timeline .timeline-content,
                            .main-timeline .timeline:nth-child(2n) .timeline-content{
                                width: 95%;
                                text-align: center;
                                padding: 10px 0;
                            }
                            .main-timeline .title{
                                margin-bottom: 10px;
                            }
                        }
                    
License Terms