.main-timeline{ position: relative; } .main-timeline .timeline{ margin-bottom: 5px; overflow: hidden; position: relative; } .main-timeline .timeline-content{ display: block; width: 30%; padding-left: 40px; } .main-timeline .timeline-content:hover{ text-decoration: none; } .main-timeline .title{ font-size: 22px; font-weight: 600; color: #fac34e; margin: 0 0 5px 0; } .main-timeline .timeline-icon{ display: block; width: 100px; height: 100px; line-height: 100px; background: #ffc750; text-align: center; position: absolute; top: 50%; left: 50%; font-size: 50px; color: #fff; transform: translate(-50%, -50%); } .main-timeline .timeline-icon:before, .main-timeline .timeline-icon:after{ content: ""; width: 100%; height: 100%; background: linear-gradient(45deg,transparent 49%,#fed67f 50%); position: absolute; top: 0; left: -100%; z-index: -1; } .main-timeline .timeline-icon:after{ background: linear-gradient(-135deg,transparent 49%,#fbb321 50%); left: 100%; } .main-timeline .description{ font-size: 15px; color: #000; letter-spacing: 1px; margin: 0; } .main-timeline .timeline-year{ font-size: 30px; font-weight: 600; color: #fac34e; position: absolute; top: 50%; left: -12px; transform: translateY(-50%) rotate(-90deg); } .main-timeline .timeline:nth-child(2n) .timeline-content{ float: right; padding-left: 0; padding-right: 40px; } .main-timeline .timeline:nth-child(2n) .timeline-year{ left: auto; right: -12px; } .main-timeline .timeline:nth-child(2n) .timeline-icon{ background: #fe912a; } .main-timeline .timeline:nth-child(2n) .timeline-icon:before{ background: linear-gradient(45deg,transparent 49%,#ffa757 50%); } .main-timeline .timeline:nth-child(2n) .timeline-icon:after{ background: linear-gradient(-135deg,transparent 49%,#fa7902 50%); } .main-timeline .timeline:nth-child(2n) .title, .main-timeline .timeline:nth-child(2n) .timeline-year{ color: #fa7902; } .main-timeline .timeline:nth-child(3n) .timeline-icon{ background: #e34856; } .main-timeline .timeline:nth-child(3n) .timeline-icon:before{ background: linear-gradient(45deg,transparent 49%,#f06e7a 50%); } .main-timeline .timeline:nth-child(3n) .timeline-icon:after{ background: linear-gradient(-135deg,transparent 49%,#cb2332 50%); } .main-timeline .timeline:nth-child(3n) .title, .main-timeline .timeline:nth-child(3n) .timeline-year{ color: #cb2332; } .main-timeline .timeline:nth-child(4n) .timeline-icon{ background: #8b103e; } .main-timeline .timeline:nth-child(4n) .timeline-icon:before{ background: linear-gradient(45deg,transparent 49%,#a7325c 50%); } .main-timeline .timeline:nth-child(4n) .timeline-icon:after{ background: linear-gradient(-135deg,transparent 49%,#79022c 50%); } .main-timeline .timeline:nth-child(4n) .title, .main-timeline .timeline:nth-child(4n) .timeline-year{ color: #79022c; } @media only screen and (max-width: 990px){ .main-timeline .timeline-icon{ width: 80px; height: 80px; line-height: 80px; } } @media only screen and (max-width: 767px){ .main-timeline .timeline{ padding-top: 120px; margin-bottom: 30px; } .main-timeline .timeline:last-child{ margin-bottom: 0; } .main-timeline .timeline-content, .main-timeline .timeline:nth-child(even) .timeline-content{ width: 100%; float: none; text-align: center; padding: 0; } .main-timeline .timeline-icon{ top: 35px; transform: translate(-50%, 0); } .main-timeline .timeline-year{ top: -4px; left: 50%; transform: translate(-50%, 0) rotate(0); } .main-timeline .timeline:nth-child(even) .timeline-year{ right: auto; left: 50%; } }