/* Timeline container */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 40px 0;
}
/* Create the timeline line */
.timeline::before {
content: ”;
position: absolute;
width: 6px;
background-color: #FF9F55;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px; /* Half the width of the line */
z-index: -1;
}
/* Large centered year marker styling */
.year-marker {
position: relative;
text-align: center;
font-size: 48px;
font-weight: bold;
color: #FF9F55;
background-color: white;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
margin: 20px 0;
z-index: 1;
}
/* Center year marker over the timeline line */
.year-marker-container {
position: relative;
text-align: center;
margin: 20px 0;
}
/* Container for each event */
.timeline-container {
position: relative;
background-color: inherit;
width: 50%;
padding: 10px 40px;
box-sizing: border-box;
}
/* The left side event */
.timeline-container.left {
left: 0;
}
/* The right side event */
.timeline-container.right {
left: 50%;
}
/* Circle indicators for the timeline */
.timeline-container::after {
content: ”;
position: absolute;
width: 25px;
height: 25px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Left side circle alignment */
.timeline-container.left::after {
right: -16px;
}
/* Right side circle alignment */
.timeline-container.right::after {
left: -16px;
}
/* Content box styling */
.timeline-container .content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
/* Image styling */
.timeline-container .content img {
max-width: 100%;
border-radius: 6px;
margin-bottom: 15px;
}
/* Headings and text */
.timeline h2 {
color: #333;
}
.timeline p {
color: #777;
}
/* Responsive design */
@media screen and (max-width: 768px) {
/* Make containers full width on small screens */
.timeline-container.left, .timeline-container.right {
width: 100%;
left: 0;
padding-left: 70px;
padding-right: 25px;
}
/* Adjust timeline line */
.timeline::before {
left: 31px;
}
/* Adjust circle positions on mobile */
.timeline-container.left::after, .timeline-container.right::after {
left: 18px;
}
/* Year marker adjustment on mobile */
.year-marker {
font-size: 36px;
}
}
Event Title 1
Date: January 1, 2020
Description of the event. You can detail what happens during this fictional event.
Event Title 2
Date: March 5, 2020
Description of the event. You can add more fictional events as needed.
Event Title 3
Date: June 20, 2020
Description of the event. Keep adding more timeline events like this to expand the timeline.
Event Title 4
Date: September 15, 2020
Description of another fictional event that shapes the storyline.
XCEL 