.main-timeline{ padding: 10px 0; overflow: hidden; position: relative; } .main-timeline:before{ content: ""; width: 3px; height: 100%; border: 2px dashed #909090; position: absolute; top: 0; left: 50%; z-index: 1; transform: translateX(-50%); } .main-timeline .timeline{ width: 50%; padding-left: 5px; float: right; position: relative; } .main-timeline .timeline:before{ content: "\f005"; font-family: "Font Awesome 5 Free"; font-weight: 900; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; background: #f9c739; font-size: 12px; color: #fff; text-align: center; position: absolute; top: 59%; left: -10px; z-index: 1; transform: translateY(-50%); } .main-timeline .year{ display: block; font-size: 60px; font-weight: 700; color: #1990F6; line-height: 41px; margin: 0; text-align: right; } .main-timeline .inner-content{ padding: 40px 40px 40px 120px; background: #1990f6; overflow: hidden; position: relative; } .main-timeline .inner-content:before, .main-timeline .inner-content:after{ content: ""; width: 200px; height: 250px; border-radius: 80%; background: #fff; position: absolute; top: 49%; left: -110px; } .main-timeline .inner-content:after{ top: auto; bottom: 49%; } .main-timeline .title{ font-size: 30px; color: #fff; margin-top: 0; } .main-timeline .description{ font-size: 15px; color: #fff; line-height: 20px; text-align: justify; margin: 0; } .main-timeline .timeline:nth-child(2n){ padding: 0 5px 0 0; } .main-timeline .timeline:nth-child(2n):before{ left: auto; right: -10px; } .main-timeline .timeline:nth-child(2n) .year{ text-align: left; } .main-timeline .timeline:nth-child(2n) .inner-content{ padding: 40px 120px 40px 40px; } .main-timeline .timeline:nth-child(2n) .inner-content:before, .main-timeline .timeline:nth-child(2n) .inner-content:after{ left: auto; right: -110px; } .main-timeline .timeline:nth-child(2){ margin-top: 170px; } .main-timeline .timeline:nth-child(odd){ margin: -170px 0 0 0; } .main-timeline .timeline:nth-child(even){ margin-bottom: 80px; } .main-timeline .timeline:first-child, .main-timeline .timeline:last-child:nth-child(even){ margin: 0; } .main-timeline .timeline:nth-child(2n) .inner-content{ background: #fe370d; } .main-timeline .timeline:nth-child(2n) .year{ color: #fe370d; } .main-timeline .timeline:nth-child(3n) .inner-content{background: #ed7600;} .main-timeline .timeline:nth-child(3n) .year{color: #ed7600;} .main-timeline .timeline:nth-child(4n) .inner-content{ background: #34ac0d; } .main-timeline .timeline:nth-child(4n) .year{ color: #34ac0d; } .main-timeline .timeline:nth-child(5n) .inner-content{ background: #068a72; } .main-timeline .timeline:nth-child(5n) .year{ color: #068a72; } @media only screen and (max-width: 990px){ .main-timeline .inner-content{ padding: 15px 20px 15px 120px; } .main-timeline .timeline:nth-child(2n) .inner-content{ padding: 15px 120px 15px 20px; } .main-timeline .inner-content:before, .main-timeline .inner-content:after{ border-radius: 60%; left: -110px; } .main-timeline .timeline:nth-child(2n) .inner-content:before, .main-timeline .timeline:nth-child(2n) .inner-content:after{ right: -115px; } } @media only screen and (max-width: 767px){ .main-timeline{ overflow: visible; } .main-timeline:before{ left: 0; right: auto; } .main-timeline .timeline, .main-timeline .timeline:nth-child(even), .main-timeline .timeline:nth-child(odd){ width: 100%; float: none; padding: 0 0 0 5px; margin: 0 0 30px 0; } .main-timeline .timeline:last-child{ margin-bottom: 0; } .main-timeline .timeline:nth-child(2n):before{ right: auto; left: -10px; } .main-timeline .timeline:nth-child(2n) .year{ text-align: right; } .main-timeline .timeline:nth-child(2n) .inner-content{ padding: 15px 20px 15px 120px; } .main-timeline .timeline:nth-child(2n) .inner-content:before, .main-timeline .timeline:nth-child(2n) .inner-content:after{ right: auto; left: -110px; } } @media only screen and (max-width: 480px){ .main-timeline .title{ font-size: 23px; } .main-timeline .description{ font-size: 13px; } }