Skip to content

Commit e27d731

Browse files
aayush105aayush105
authored
Merge pull request #894 from AKRITI-ENG/timeline-only
Timeline
2 parents 3d5b27c + f3fa594 commit e27d731

File tree

3 files changed

+355
-0
lines changed

3 files changed

+355
-0
lines changed

‎README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
113113
- [Tabs](#tabs)
114114
- [MakemyTrip](#mmt)
115115
- [Text Spoiler Effect](#text-spoiler)
116+
- [Timeline](#timeline)
116117
- [Thank You Animation](#thankyou-animation)
117118
- [Toast Notification](#toast-notifications)
118119
- [Todo List](#todo-list)
@@ -177,6 +178,8 @@ Your browser does not support the video tag.
177178

178179
**[⬆ back to top](#quick-links)**
179180

181+
182+
180183
## <a id="blog-cards"></a>Blog Post Cards
181184

182185
[<img src="images/neuo.png" height="230" title="Demo 1">](http://url-to-page)
@@ -1087,6 +1090,13 @@ A modern, interactive scroll-driven video animation created with pure CSS. Featu
10871090

10881091
**[⬆ back to top](#quick-links)**
10891092

1093+
---
1094+
## <a id="Timeline"></a>Timeline
1095+
1096+
![img_source](Timeline/Timeline.gif)
1097+
1098+
**[⬆ back to top](#quick-links)**
1099+
10901100
---
10911101

10921102
## <a id="RadialPulsar"></a>Radial Color Puslar

‎Timeline/Timeline.gif‎

6.25 MB
Loading

‎Timeline/timeline.html‎

Lines changed: 345 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,345 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Timeline - Pure CSS</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17+
min-height: 100vh;
18+
padding: 50px 20px;
19+
overflow-x: hidden;
20+
}
21+
22+
.container {
23+
max-width: 1200px;
24+
margin: 0 auto;
25+
}
26+
27+
h1 {
28+
text-align: center;
29+
color: white;
30+
font-size: 3em;
31+
margin-bottom: 20px;
32+
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
33+
animation: fadeInDown 1s ease;
34+
}
35+
36+
.subtitle {
37+
text-align: center;
38+
color: rgba(255,255,255,0.9);
39+
font-size: 1.2em;
40+
margin-bottom: 60px;
41+
animation: fadeInDown 1s ease 0.2s both;
42+
}
43+
44+
.timeline {
45+
position: relative;
46+
padding: 50px 0;
47+
}
48+
49+
/* Center line */
50+
.timeline::before {
51+
content: '';
52+
position: absolute;
53+
left: 50%;
54+
transform: translateX(-50%);
55+
width: 4px;
56+
height: 100%;
57+
background: linear-gradient(to bottom,
58+
rgba(255,255,255,0.3),
59+
rgba(255,255,255,0.8),
60+
rgba(255,255,255,0.3)
61+
);
62+
animation: lineGrow 2s ease;
63+
}
64+
65+
/* Timeline item */
66+
.timeline-item {
67+
position: relative;
68+
margin-bottom: 50px;
69+
width: 100%;
70+
animation: fadeIn 0.8s ease backwards;
71+
}
72+
73+
.timeline-item:nth-child(1) { animation-delay: 0.3s; }
74+
.timeline-item:nth-child(2) { animation-delay: 0.5s; }
75+
.timeline-item:nth-child(3) { animation-delay: 0.7s; }
76+
.timeline-item:nth-child(4) { animation-delay: 0.9s; }
77+
.timeline-item:nth-child(5) { animation-delay: 1.1s; }
78+
.timeline-item:nth-child(6) { animation-delay: 1.3s; }
79+
80+
/* Content positioning - Left and Right */
81+
.timeline-item:nth-child(odd) .content {
82+
left: 0;
83+
text-align: right;
84+
padding-right: 60px;
85+
}
86+
87+
.timeline-item:nth-child(even) .content {
88+
left: 50%;
89+
text-align: left;
90+
padding-left: 60px;
91+
}
92+
93+
.content {
94+
position: relative;
95+
width: 50%;
96+
padding: 30px;
97+
background: white;
98+
border-radius: 15px;
99+
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
100+
transition: all 0.3s ease;
101+
}
102+
103+
.content:hover {
104+
transform: scale(1.05);
105+
box-shadow: 0 15px 40px rgba(0,0,0,0.4);
106+
}
107+
108+
/* Center dot */
109+
.timeline-item::before {
110+
content: '';
111+
position: absolute;
112+
left: 50%;
113+
transform: translateX(-50%);
114+
width: 20px;
115+
height: 20px;
116+
background: white;
117+
border: 4px solid #667eea;
118+
border-radius: 50%;
119+
z-index: 1;
120+
top: 30px;
121+
box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
122+
animation: pulse 2s ease infinite;
123+
}
124+
125+
/* Connector line from dot to content */
126+
.content::before {
127+
content: '';
128+
position: absolute;
129+
top: 30px;
130+
width: 30px;
131+
height: 2px;
132+
background: rgba(255,255,255,0.5);
133+
}
134+
135+
.timeline-item:nth-child(odd) .content::before {
136+
right: 30px;
137+
}
138+
139+
.timeline-item:nth-child(even) .content::before {
140+
left: 30px;
141+
}
142+
143+
.date {
144+
display: inline-block;
145+
padding: 8px 20px;
146+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
147+
color: white;
148+
border-radius: 20px;
149+
font-weight: bold;
150+
font-size: 0.9em;
151+
margin-bottom: 15px;
152+
box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
153+
}
154+
155+
.content h2 {
156+
color: #333;
157+
margin-bottom: 10px;
158+
font-size: 1.5em;
159+
}
160+
161+
.content p {
162+
color: #666;
163+
line-height: 1.6;
164+
margin-bottom: 15px;
165+
}
166+
167+
.tag {
168+
display: inline-block;
169+
padding: 5px 12px;
170+
background: #f0f0f0;
171+
border-radius: 15px;
172+
font-size: 0.8em;
173+
color: #667eea;
174+
margin-right: 8px;
175+
margin-top: 10px;
176+
}
177+
178+
/* Icon in content */
179+
.icon {
180+
display: inline-block;
181+
width: 50px;
182+
height: 50px;
183+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
184+
border-radius: 50%;
185+
margin-bottom: 15px;
186+
position: relative;
187+
box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
188+
}
189+
190+
.icon::before {
191+
content: '✓';
192+
position: absolute;
193+
color: white;
194+
font-size: 24px;
195+
font-weight: bold;
196+
top: 50%;
197+
left: 50%;
198+
transform: translate(-50%, -50%);
199+
}
200+
201+
/* Responsive */
202+
@media (max-width: 768px) {
203+
.timeline::before {
204+
left: 30px;
205+
}
206+
207+
.timeline-item::before {
208+
left: 30px;
209+
}
210+
211+
.timeline-item:nth-child(odd) .content,
212+
.timeline-item:nth-child(even) .content {
213+
width: calc(100% - 80px);
214+
left: 80px;
215+
text-align: left;
216+
padding: 20px;
217+
padding-left: 20px;
218+
}
219+
220+
.content::before {
221+
left: -30px !important;
222+
}
223+
224+
h1 {
225+
font-size: 2em;
226+
}
227+
}
228+
229+
/* Animations */
230+
@keyframes fadeInDown {
231+
from {
232+
opacity: 0;
233+
transform: translateY(-30px);
234+
}
235+
to {
236+
opacity: 1;
237+
transform: translateY(0);
238+
}
239+
}
240+
241+
@keyframes fadeIn {
242+
from {
243+
opacity: 0;
244+
transform: translateY(30px);
245+
}
246+
to {
247+
opacity: 1;
248+
transform: translateY(0);
249+
}
250+
}
251+
252+
@keyframes lineGrow {
253+
from {
254+
height: 0;
255+
}
256+
to {
257+
height: 100%;
258+
}
259+
}
260+
261+
@keyframes pulse {
262+
0%, 100% {
263+
box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
264+
}
265+
50% {
266+
box-shadow: 0 0 0 8px rgba(255,255,255,0.1);
267+
}
268+
}
269+
</style>
270+
</head>
271+
<body>
272+
<div class="container">
273+
<h1>Project Timeline</h1>
274+
<p class="subtitle">A Journey Through Development Milestones</p>
275+
276+
<div class="timeline">
277+
<div class="timeline-item">
278+
<div class="content">
279+
<div class="icon"></div>
280+
<span class="date">January 2024</span>
281+
<h2>Project Inception</h2>
282+
<p>Initial concept and planning phase. Gathered requirements and assembled the core team for the project kickoff.</p>
283+
<span class="tag">Planning</span>
284+
<span class="tag">Research</span>
285+
</div>
286+
</div>
287+
288+
<div class="timeline-item">
289+
<div class="content">
290+
<div class="icon"></div>
291+
<span class="date">March 2024</span>
292+
<h2>Design Phase</h2>
293+
<p>Created wireframes, mockups, and finalized the user interface design. Established design system and brand guidelines.</p>
294+
<span class="tag">UI/UX</span>
295+
<span class="tag">Design</span>
296+
</div>
297+
</div>
298+
299+
<div class="timeline-item">
300+
<div class="content">
301+
<div class="icon"></div>
302+
<span class="date">May 2024</span>
303+
<h2>Development Begins</h2>
304+
<p>Started frontend and backend development. Implemented core features and established development workflows.</p>
305+
<span class="tag">Coding</span>
306+
<span class="tag">Testing</span>
307+
</div>
308+
</div>
309+
310+
<div class="timeline-item">
311+
<div class="content">
312+
<div class="icon"></div>
313+
<span class="date">July 2024</span>
314+
<h2>Beta Testing</h2>
315+
<p>Launched beta version to select users. Collected feedback and fixed critical bugs based on user testing.</p>
316+
<span class="tag">QA</span>
317+
<span class="tag">Feedback</span>
318+
</div>
319+
</div>
320+
321+
<div class="timeline-item">
322+
<div class="content">
323+
<div class="icon"></div>
324+
<span class="date">September 2024</span>
325+
<h2>Product Launch</h2>
326+
<p>Official public release of version 1.0. Marketing campaign launched across multiple channels.</p>
327+
<span class="tag">Release</span>
328+
<span class="tag">Marketing</span>
329+
</div>
330+
</div>
331+
332+
<div class="timeline-item">
333+
<div class="content">
334+
<div class="icon"></div>
335+
<span class="date">October 2024</span>
336+
<h2>Future Updates</h2>
337+
<p>Planning next features based on user feedback. Continuous improvement and optimization ongoing.</p>
338+
<span class="tag">Updates</span>
339+
<span class="tag">Growth</span>
340+
</div>
341+
</div>
342+
</div>
343+
</div>
344+
</body>
345+
</html>

0 commit comments

Comments
 (0)