1
2    <div class="timeline">
3      <div class="timeline-events">
4        
5        <div class="timeline-event">
6          <div class="timeline-content" style="border-top: 4px solid #3b82f6;">
7            <div class="timeline-dot" style="background-color: #3b82f6;"></div>
8            <h3 class="timeline-event-title">Event 1</h3>
9            <p class="timeline-event-date">2023-01-01</p>
10            <p class="timeline-event-description">Description for Event 1</p>
11          </div>
12        </div>
13        
14        <div class="timeline-event">
15          <div class="timeline-content" style="border-top: 4px solid #10b981;">
16            <div class="timeline-dot" style="background-color: #10b981;"></div>
17            <h3 class="timeline-event-title">Event 2</h3>
18            <p class="timeline-event-date">2023-02-15</p>
19            <p class="timeline-event-description">Description for Event 2</p>
20          </div>
21        </div>
22        
23        <div class="timeline-event">
24          <div class="timeline-content" style="border-top: 4px solid #f59e0b;">
25            <div class="timeline-dot" style="background-color: #f59e0b;"></div>
26            <h3 class="timeline-event-title">Event 3</h3>
27            <p class="timeline-event-date">2023-03-30</p>
28            <p class="timeline-event-description">Description for Event 3</p>
29          </div>
30        </div>
31        
32      </div>
33    </div>
34    

1
2    .timeline {
3      position: relative;
4      margin: 0 auto;
5      padding: 20px 0;
6    }
7    
8    .timeline::after {
9      content: '';
10      position: absolute;
11      width: 2px;
12        top: 0;
13        bottom: 0;
14        left: 50%;
15        margin-left: -1px;
16      background-color: #3b82f6;
17    }
18    
19    .timeline-events {
20      
21    }
22    
23    .timeline-event {
24      
25        padding: 10px 40px;
26        position: relative;
27        width: 50%;
28      
29    }
30    
31    
32    .timeline-event:nth-child(even) {
33      left: 50%;
34    }
35    
36    
37    
38    
39    
40    
41    .timeline-content {
42      padding: 20px;
43      background-color: white;
44      position: relative;
45      border-radius: 6px;
46      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
47      transition: all 0.3s ease;
48    }
49    
50    .timeline-content:hover {
51      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
52      transform: translateY(-5px);
53    }
54    
55    .timeline-dot {
56      position: absolute;
57      width: 20px;
58      height: 20px;
59      right: -30px;
60        top: 15px;
61      border-radius: 50%;
62      z-index: 1;
63    }
64    
65    
66    .timeline-event:nth-child(even) .timeline-dot {
67      left: -30px;
68    }
69    
70    
71    .timeline-event-title {
72      font-weight: bold;
73      font-size: 1.2em;
74      margin-bottom: 5px;
75    }
76    
77    .timeline-event-date {
78      color: #666;
79      font-style: italic;
80      margin-bottom: 10px;
81    }
82    
83    .timeline-event-description {
84      line-height: 1.5;
85    }
86    
87    @media (max-width: 768px) {
88      .timeline::after {
89        
90      }
91    
92      .timeline-event {
93        
94      }
95    }
96    
97    @media (max-width: 480px) {
98      .timeline-event {
99        
100      }
101    }
102