.demo{ background-color: #d5d5d5; } .main-timeline{ font-family: 'Roboto', sans-serif; padding: 30px 0; } .main-timeline:after{ content: ''; display: block; clear: both; } .main-timeline:before{ content: ''; background-color: #555; height: 100%; width: 5px; transform: translateX(-50%); position: absolute; top: 0; left: 50%; } .main-timeline .timeline{ width: 50%; padding: 0 100px 0 0; margin: 0 10px 20px 0; float: left; position: relative; z-index: 1; } .main-timeline .timeline:before{ content: ''; background-color: #fff; height: 5px; width: 80px; position: absolute; right: 50px; top: 50px; z-index: -1; } .main-timeline .timeline-content{ color: #555; background-color: #fff; text-align: center; padding: 0 0 10px; border-radius: 20px; display: block; } .main-timeline .timeline-content:hover{ text-decoration: none; } .main-timeline .timeline-year{ color: #121365; background: linear-gradient(to right,#121365,#4546D0); font-size: 25px; font-weight: 600; text-align: center; line-height: 100px; height: 100px; width: 100px; border-radius: 50%; position: absolute; right: -50px; top: 0; z-index: 1; } .main-timeline .timeline-year:before{ content: ''; background-color: #fff; height: 80%; width: 80%; border-radius: 50%; transform: translateX(-50%) translateY(-50%); position: absolute; left: 50%; top: 50%; z-index: -1; } .main-timeline .timeline-icon{ color: #121365; font-size: 35px; } .main-timeline .title{ color: #fff; background: linear-gradient(to right,#121365,#4546D0); font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 10px; margin: 0 0 10px; border-radius: 20px 20px 0 0; } .main-timeline .description{ font-size: 15px; letter-spacing: 1px; margin: 0 15px; } .main-timeline .timeline:nth-child(even){ padding: 0 0 0 100px; margin: 0 0 20px 10px; float: right; } .main-timeline .timeline:nth-child(even):before{ right: auto; left: 50px; } .main-timeline .timeline:nth-child(even) .timeline-year{ right: auto; left: -50px; } .main-timeline .timeline:nth-child(even) .timeline-icon{ right: auto; left: 20px; } .main-timeline .timeline:nth-child(4n+2) .timeline-year, .main-timeline .timeline:nth-child(4n+2) .title{ background: linear-gradient(to right,#FB6894,#FBB508); } .main-timeline .timeline:nth-child(4n+2) .timeline-icon{ color: #FB6894; } .main-timeline .timeline:nth-child(4n+3) .timeline-year, .main-timeline .timeline:nth-child(4n+3) .title{ background: linear-gradient(to right,#4B49C3,#EB66B4); } .main-timeline .timeline:nth-child(4n+3) .timeline-icon{ color: #4B49C3; } @media screen and (max-width:767px){ .main-timeline .timeline, .main-timeline .timeline:nth-child(even){ width: 100%; padding: 95px 0 0; margin: 0 0 20px; float: none; } .main-timeline .timeline:before{ display: none; } .main-timeline .timeline-year, .main-timeline .timeline:nth-child(even) .timeline-year{ left: 50%; transform: translateX(-50%); } } @media screen and (max-width:567px){ .main-timeline .title{ font-size: 18px; } }