timeline style : demo 57

CSS

(Fonts required: Rubik.)
                        :root{
                            --color1: #fff;
                            --color2: #344161;
                            --color3: #F15270;
                            --color4: #24c9c3;
                        }
                        .demo{ background: #e7e7e7; }
                        .main-timeline{
                            font-family: 'Rubik', sans-serif;
                            padding-top: 40px;
                        }
                        .main-timeline:after{
                            content: '';
                            display: block;
                            clear: both;
                        }
                        .main-timeline .timeline{
                            width: 50.5%;
                            padding: 60px 0 0 0;
                            margin-top: -40px;
                            float: left;
                            position: relative;
                        }
                        .main-timeline .timeline-content{
                            color: var(--color2);
                            background-color: var(--color1);
                            border-radius: 0 60px 0 0;
                            display: block;
                            overflow: hidden;
                        }
                        .main-timeline .timeline-content:hover{ color: var(--color2); }
                        .main-timeline .timeline-icon{
                            color: var(--color3);
                            background-color: var(--color1);
                            font-size: 45px;
                            text-align: center;
                            line-height: 69px;
                            height: 85px;
                            width: 85px;
                            border-radius: 50%;
                            border: 10px solid var(--color2);
                            position: absolute;
                            top: 0;
                            left: 10px;
                        }
                        .main-timeline .timeline-icon:after{
                            content: '';
                            height: 25px;
                            width: 16px;
                            border-top: 20px solid var(--color2);
                            border-left: 10px solid transparent;
                            border-right: 10px solid transparent;
                            transform: translateX(-50%);
                            position: absolute;
                            left: 50%;
                            bottom: -28px;
                        }
                        .main-timeline .inner-content{ padding: 15px; }
                        .main-timeline .title{
                            font-size: 25px;
                            font-weight: 500;
                            text-transform: uppercase;
                            margin: 0 0 7px 80px;
                        }
                        .main-timeline .description{
                            font-size: 14px;
                            letter-spacing: 1px;
                            margin: 0;
                        }
                        .main-timeline .timeline:nth-child(even){ float: right; }
                        .main-timeline .timeline:nth-child(even) .timeline-content{ border-radius: 60px 0 0 0; }
                        .main-timeline .timeline:nth-child(even) .timeline-icon{
                            left: auto;
                            right: 10px;
                        }
                        .main-timeline .timeline:nth-child(even) .inner-content{ padding-left: 40px;  }
                        .main-timeline .timeline:nth-child(even) .title{ margin: 0 50px 7px 0; }
                        .main-timeline .timeline:nth-child(4n+2) .timeline-content{
                            color: var(--color1);
                            background-color: var(--color2);
                        }
                        .main-timeline .timeline:nth-child(4n+2) .timeline-icon{
                            color: var(--color2);
                            border-color: var(--color3);
                        }
                        .main-timeline .timeline:nth-child(4n+2) .timeline-icon:after{ border-top-color: var(--color3); }
                        .main-timeline .timeline:nth-child(4n+3) .timeline-content{
                            color: var(--color1);
                            background-color: var(--color3);
                        }
                        .main-timeline .timeline:nth-child(4n+3) .timeline-icon{
                            color: var(--color2);
                            border-color: var(--color4);
                        }
                        .main-timeline .timeline:nth-child(4n+3) .timeline-icon:after{ border-top-color: var(--color4); }
                        .main-timeline .timeline:nth-child(4n+4) .timeline-content{
                            color: var(--color1);
                            background-color: var(--color4);
                        }
                        .main-timeline .timeline:nth-child(4n+4) .timeline-icon{
                            color: var(--color3);
                            border-color: var(--color2);
                        }
                        .main-timeline .timeline:nth-child(4n+4) .timeline-icon:after{ border-top-color: var(--color2); }
                        @media only screen and (max-width:767px){
                            .main-timeline{ padding-top: 10px; }
                            .main-timeline .timeline{
                                width: 100%;
                                margin-top: -10px;
                            }
                            .main-timeline .inner-content{ padding: 45px 15px 25px; }
                            .main-timeline .timeline:nth-child(even){ float: left; }
                            .main-timeline .timeline:nth-child(even) .timeline-content{ border-radius: 0 60px 0 0; }
                            .main-timeline .timeline:nth-child(even) .timeline-icon{
                                left: 10px;
                                right: auto;
                            }
                            .main-timeline .timeline:nth-child(even) .inner-content{ padding-left: 15px; }
                            .main-timeline .title,
                            .main-timeline .timeline:nth-child(even) .title{
                                font-size: 20px;
                                margin: 0 0 5px 0;
                            }
                        }
                    
License Terms