/* Basic Timeline Styling */ .timeline-container { width: 80%; /* Adjust as needed */ margin: 0 auto; } .timeline { position: relative; } .timeline::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background-color: #191970; /* Midnight Blue */ } .timeline-item { position: relative; padding: 1rem; background-color: #FFF; border-radius: 8px; margin-bottom: 20px; width: 45%; /* Adjust as needed */ } .timeline-item::before { content: attr(data-date); position: absolute; left: 50%; transform: translateX(-50%); background-color: #191970; /* Midnight Blue */ color: white; padding: 5px 10px; border-radius: 5px; } /* Alternate Timeline Item Placement */ .timeline-item:nth-child(odd) { float: left; clear: left; transform: translateX(-30px); /* Adjust as needed */ } .timeline-item:nth-child(odd)::before { left: calc(50% + 30px); } .timeline-item:nth-child(even) { float: right; clear: right; transform: translateX(30px); /* Adjust as needed */ } .timeline-item:nth-child(even)::before { left: calc(50% - 30px); } /* Responsive Design (Example) */ @media (max-width: 768px) { .timeline-item { width: 100%; /* Display full width on mobile */ } .timeline-item::before { left: 10px; transform: none; } .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { float: none; clear: none; transform: none; } }