timeline style : demo 43

CSS

(Fonts required: Roboto.)
                        .main-timeline .timeline{
                            font-family: 'Roboto', sans-serif;
                            width: 100%;
                            padding: 50px 0;
                            box-shadow: 10px 0 10px -16px #000 inset;
                            display: inline-block;
                        }
                        .main-timeline .timeline-content{
                            color: #fff;
                            background: linear-gradient(165deg,#C1386D 49%,#CE3F6A 50%);
                            text-align: center;
                            width: 50%;
                            padding: 20px 130px 20px 85px;
                            border: 10px solid rgba(255,255,255,0.5);
                            border-left: 0 solid transparent;
                            box-shadow: 10px 0 10px -10px #000 inset;
                            border-radius: 0 70px 70px 0;
                            display: inline-block;
                            position: relative;
                        }
                        .main-timeline .timeline-content:before{
                            content: '';
                            height: 150px;
                            width: 170px;
                            background: linear-gradient(165deg,rgba(197,25,31,0.5),rgba(221,122,169,0.5));
                            border: 2px solid #fff;
                            border-radius: 30px;
                            position: absolute;
                            right: -60px;
                            top: -60px;
                        }
                        .main-timeline .timeline-content:hover{ text-decoration: none; }
                        .main-timeline .title{
                            font-size: 25px;
                            margin: 0 0 5px 0;
                        }
                        .main-timeline .description{
                            font-size: 13px;
                            letter-spacing: 1px;
                            margin: 0;
                        }
                        .main-timeline .timeline-icon{
                            font-size: 45px;
                            display: block;
                            position: absolute;
                            right: -38px;
                            top: -48px;
                        }
                        .main-timeline .timeline-year{
                            font-size: 35px;
                            display: block;
                            position: absolute;
                            top: 20px;
                            right: 15px;
                        }
                        .main-timeline .timeline:nth-child(even){ box-shadow: -10px 0 10px -16px #000 inset; }
                        .main-timeline .timeline:nth-child(even) .timeline-content{
                            float: right;
                            padding: 20px 85px 20px 130px;
                            border-radius: 70px 0 0 70px;
                            box-shadow: -10px 0 10px -10px #000 inset;
                            border: 10px solid rgba(255,255,255,0.5);
                            border-right: 0 solid transparent;
                        }
                        .main-timeline .timeline:nth-child(even) .timeline-content:before{
                            right: auto;
                            left: -60px;
                        }
                        .main-timeline .timeline:nth-child(even) .timeline-year{
                            right: auto;
                            left: 15px;
                        }
                        .main-timeline .timeline:nth-child(even) .timeline-icon{
                            right: auto;
                            left: -38px;
                        }
                        .main-timeline .timeline:nth-child(4n+2) .timeline-content{
                            background: linear-gradient(165deg,#428bb2 49%,#509BC4 50%);
                        }
                        .main-timeline .timeline:nth-child(4n+2) .timeline-content:before{
                            background: linear-gradient(165deg,rgba(87,178,223,0.5) 49%,rgba(77,185,228,0.5) 50%);
                        }
                        .main-timeline .timeline:nth-child(4n+3) .timeline-content{
                            background: linear-gradient(165deg,#EE9B3D 49%,#f7a042 50%);
                        }
                        .main-timeline .timeline:nth-child(4n+3) .timeline-content:before{
                            background: linear-gradient(165deg,rgba(248,178,49,0.5) 49%,rgba(260,207,60,0.5) 50%);
                        }
                        .main-timeline .timeline:nth-child(4n+4) .timeline-content{
                            background: linear-gradient(165deg,#A24F8B 49%,#9e4284 50%);
                        }
                        .main-timeline .timeline:nth-child(4n+4) .timeline-content:before{
                            background: linear-gradient(165deg,rgba(114,24,98,0.5) 49%,rgba(150,43,130,0.5) 50%);
                        }
                        @media screen and (max-width:990px){
                            .main-timeline .timeline-content{ width: 70%; }
                        }
                        @media screen and (max-width:767px){
                            .main-timeline .timeline{ padding-right: 40px; }
                            .main-timeline .timeline-content{
                                width: 100%;
                                padding: 15px 140px 15px 50px;
                            }
                            .main-timeline .title{ font-size: 20px; }
                            .main-timeline .timeline:nth-child(even){ box-shadow: 10px 0 10px -16px #000 inset; }
                            .main-timeline .timeline:nth-child(even) .timeline-content{
                                float: left;
                                padding: 15px 140px 15px 50px;
                                border-radius: 0 70px 70px 0;
                                box-shadow: 10px 0 10px -10px #000 inset;
                                border: 10px solid rgba(255,255,255,0.5);
                                border-left: 0 solid transparent;
                            }
                            .main-timeline .timeline:nth-child(even) .timeline-content:before{ left: auto; }
                            .main-timeline .timeline-content:before,
                            .main-timeline .timeline:nth-child(even) .timeline-content:before{
                                height: 110px;
                                top: -55px;
                                right: -60px;
                            }
                            .main-timeline .timeline:nth-child(even) .timeline-year{ left: auto; }
                            .main-timeline .timeline-year,
                            .main-timeline .timeline:nth-child(even) .timeline-year{
                                font-size: 28px;
                                top: 10px;
                                right: 25px;
                            }
                            .main-timeline .timeline-icon,
                            .main-timeline .timeline:nth-child(even) .timeline-icon{
                                font-size: 40px;
                                right: -40px;
                                top: -43px;
                                left: auto;
                            }
                        }
                        @media screen and (max-width:479px){
                            .main-timeline .timeline-content,
                            .main-timeline .timeline:nth-child(even) .timeline-content{
                                padding: 75px 20px 15px 20px;
                                text-align: left;
                                border-radius: 0 50px 50px 0;
                            }
                            .main-timeline .timeline-year,
                            .main-timeline .timeline:nth-child(even) .timeline-year{
                                top: 7px;
                            }
                        }
                    
License Terms