-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
295 lines (258 loc) · 11.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Timeline</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="Villain">
<!-- TopTile Code -->
<div class="TopTitle">
<div class="FirstTitle">HTML CSS & jQuery </div>
<div class="secTitle">Animated Vertical Timeline Simulation</div>
<div style="color: red;" class="secTitle">Iron Man Franchise Villians</div>
<div class="secTitle Heading">MCU Villains Timeline</div>
</div>
<!-- <section class="Main-section"> -->
<section class="Villain-section">
<div class="Container">
<div class="js-timeline ag-timeline">
<!-- Progress Bar Line Code -->
<div class="js-timeline_line ag-timeline_line">
<div class="js-timeline_line-progress ag-timeline_line-progress"></div>
</div>
<div class="ag-timeline_list">
<!-- Left: Obadiah Stane / Iron Monger [Iron Man (2008)] -->
<div class="js-timeline_item ag-timeline_item">
<div class="ag-timeline-card_box">
<!-- Number Code -->
<div class="js-timeline-card_point-box ag-timeline-card_point-box">
<div class="ag-timeline-card_point">01</div>
</div>
<!-- Name Code -->
<div class="ag-timeline-card_meta-box">
<div class="ag-timeline-card_meta">Iron Monger</div>
</div>
</div>
<!-- Image Code -->
<div class="ag-timeline-card_item">
<div class="ag-timeline-card_inner">
<div class="ag-timeline-card_img-box">
<img src="/Assets/Villains/MCU/Iron_Monger.png" alt=""
class="ag-timeline-card_img">
</div>
<!-- Iron Monger Description -->
<p class="ag-timeline-card_paragraph">Tony's mentor turned adversary. Obadiah steals Stark's arc reactor technology to create a massive armored suit, leading to Iron Man's first major battle.</p>
</div>
<div class="ag-timeline-card_arrow"></div>
</div>
</div>
<!-- Right: Ivan Vanko / Whiplash [Iron Man 2 (2010)] -->
<div class="js-timeline_item ag-timeline_item">
<div class="ag-timeline-card_box">
<!-- Name Code -->
<div class="ag-timeline-card_meta-box">
<div class="ag-timeline-card_meta">Whiplash</div>
</div>
<!-- Number Code -->
<div class="js-timeline-card_point-box ag-timeline-card_point-box">
<div class="ag-timeline-card_point">02</div>
</div>
</div>
<!-- Image Code -->
<div class="ag-timeline-card_item">
<div class="ag-timeline-card_inner">
<div class="ag-timeline-card_img-box">
<img src="/Assets/Villains/MCU/Whiplash.jpg" alt=""
class="ag-timeline-card_img">
</div>
<!-- Whiplash Description -->
<p class="ag-timeline-card_paragraph">A vengeful engineer with his own arc reactor-powered whips. Vanko exposes weaknesses in Iron Man's technology and allies with Justin Hammer to challenge Tony.</p>
</div>
<div class="ag-timeline-card_arrow"></div>
</div>
</div>
<!-- Left: Justin Hammer [Iron Man 2 (2010)] -->
<div class="js-timeline_item ag-timeline_item">
<div class="ag-timeline-card_box">
<!-- Number Code -->
<div class="js-timeline-card_point-box ag-timeline-card_point-box">
<div class="ag-timeline-card_point">03</div>
</div>
<!-- Name Code -->
<div class="ag-timeline-card_meta-box">
<div class="ag-timeline-card_meta">Justin Hammer</div>
</div>
</div>
<!-- Image Code -->
<div class="ag-timeline-card_item">
<div class="ag-timeline-card_inner">
<div class="ag-timeline-card_img-box">
<img src="/Assets/Villains/MCU/Justin Hammer.webp" alt=""
class="ag-timeline-card_img">
</div>
<!-- Justin Hammer Description -->
<p class="ag-timeline-card_paragraph">A rival weapons manufacturer who supplies Vanko with resources to create drones and disrupt Tony’s reputation.</p>
</div>
<div class="ag-timeline-card_arrow"></div>
</div>
</div>
<!-- Right: Loki [The Avengers (2012)] -->
<div class="js-timeline_item ag-timeline_item">
<div class="ag-timeline-card_box">
<!-- Name Code -->
<div class="ag-timeline-card_meta-box">
<div class="ag-timeline-card_meta">Loki</div>
</div>
<!-- Number Code -->
<div class="js-timeline-card_point-box ag-timeline-card_point-box">
<div class="ag-timeline-card_point">04</div>
</div>
</div>
<!-- Image Code -->
<div class="ag-timeline-card_item">
<div class="ag-timeline-card_inner">
<div class="ag-timeline-card_img-box">
<img src="/Assets/Villains/MCU/Loki.jpg" alt="" class="ag-timeline-card_img">
</div>
<!-- Loki Description -->
<p class="ag-timeline-card_paragraph">Although not Iron Man’s sole adversary, Loki leads the Chitauri army in an attack on New York, prompting Tony to confront intergalactic threats and push his limits.</p>
</div>
<div class="ag-timeline-card_arrow"></div>
</div>
</div>
<!-- Left: Aldrich Killian [Iron Man 3 (2013)] -->
<div class="js-timeline_item ag-timeline_item">
<div class="ag-timeline-card_box">
<!-- Number Code -->
<div class="js-timeline-card_point-box ag-timeline-card_point-box">
<div class="ag-timeline-card_point">05</div>
</div>
<!-- Name Code -->
<div class="ag-timeline-card_meta-box">
<div class="ag-timeline-card_meta">Aldrich Killian</div>
</div>
</div>
<!-- Image Code -->
<div class="ag-timeline-card_item">
<div class="ag-timeline-card_inner">
<div class="ag-timeline-card_img-box">
<img src="/Assets/Villains/MCU/Aldrich Killian.webp" alt=""
class="ag-timeline-card_img">
</div>
<!-- Aldrich Killian Description -->
<p class="ag-timeline-card_paragraph">The head of Advanced Idea Mechanics (AIM) and the true power behind the Mandarin facade. He uses the Extremis virus to enhance his abilities, presenting Iron Man with a new biological challenge.</p>
</div>
<div class="ag-timeline-card_arrow"></div>
</div>
</div>
<!-- Right: The Mandarin (Trevor Slattery) [Iron Man 3 (2013)] -->
<div class="js-timeline_item ag-timeline_item">
<div class="ag-timeline-card_box">
<!-- Name Code -->
<div class="ag-timeline-card_meta-box">
<div class="ag-timeline-card_meta">The Mandarin</div>
</div>
<!-- Number Code -->
<div class="js-timeline-card_point-box ag-timeline-card_point-box">
<div class="ag-timeline-card_point">06</div>
</div>
</div>
<!-- Image Code -->
<div class="ag-timeline-card_item">
<div class="ag-timeline-card_inner">
<div class="ag-timeline-card_img-box">
<img src="/Assets/Villains/MCU/TheMandarin.jpg" alt=""
class="ag-timeline-card_img">
</div>
<!-- The Mandarin Description -->
<p class="ag-timeline-card_paragraph">Poses as a global terrorist but is later revealed to be a decoy set up by Killian.</p>
</div>
<div class="ag-timeline-card_arrow"></div>
</div>
</div>
<!-- Left: Ultron [Avengers: Age of Ultron (2015)] -->
<div class="js-timeline_item ag-timeline_item">
<div class="ag-timeline-card_box">
<!-- Number Code -->
<div class="js-timeline-card_point-box ag-timeline-card_point-box">
<div class="ag-timeline-card_point">07</div>
</div>
<!-- Name Code -->
<div class="ag-timeline-card_meta-box">
<div class="ag-timeline-card_meta">Ultron</div>
</div>
</div>
<!-- Image Code -->
<div class="ag-timeline-card_item">
<div class="ag-timeline-card_inner">
<div class="ag-timeline-card_img-box">
<img src="/Assets/Villains/MCU/Ultron.jpg" alt="" class="ag-timeline-card_img">
</div>
<!-- Ultron Description -->
<p class="ag-timeline-card_paragraph">An AI villain accidentally created by Tony Stark and Bruce Banner. Ultron's goal to achieve “peace” through human extinction forces Iron Man to confront the ethical implications of his inventions.</p>
</div>
<div class="ag-timeline-card_arrow"></div>
</div>
</div>
<!-- Right: Winter Soldier (Bucky) [Captain America: Civil War (2016)] -->
<div class="js-timeline_item ag-timeline_item">
<div class="ag-timeline-card_box">
<!-- Name Code -->
<div class="ag-timeline-card_meta-box">
<div class="ag-timeline-card_meta">Winter Soldier(Bucky)</div>
</div>
<!-- Number Code -->
<div class="js-timeline-card_point-box ag-timeline-card_point-box">
<div class="ag-timeline-card_point">08</div>
</div>
</div>
<!-- Image Code -->
<div class="ag-timeline-card_item">
<div class="ag-timeline-card_inner">
<div class="ag-timeline-card_img-box">
<img src="/Assets/Villains/MCU/Winter_Soldier.webp" alt=""
class="ag-timeline-card_img">
</div>
<!-- Winter Soldier Description -->
<p class="ag-timeline-card_paragraph">Tony confronts the Winter Soldier after discovering his role in his parents' death, leading to one of Iron Man's most emotionally charged battles.</p>
</div>
<div class="ag-timeline-card_arrow"></div>
</div>
</div>
<!-- Left: Thanos [Avengers: Infinity War (2018) / Avengers: Endgame (2019)] -->
<div class="js-timeline_item ag-timeline_item">
<div class="ag-timeline-card_box">
<!-- Number Code -->
<div class="js-timeline-card_point-box ag-timeline-card_point-box">
<div class="ag-timeline-card_point">09</div>
</div>
<!-- Name Code -->
<div class="ag-timeline-card_meta-box">
<div class="ag-timeline-card_meta">Thanos</div>
</div>
</div>
<!-- Image Code -->
<div class="ag-timeline-card_item">
<div class="ag-timeline-card_inner">
<div class="ag-timeline-card_img-box">
<img src="/Assets/Villains/MCU/Thanos.jpg" alt="" class="ag-timeline-card_img">
</div>
<!-- Thanos Description -->
<p class="ag-timeline-card_paragraph">One of Iron Man's greatest threats, Thanos battles Tony on Titan. The fight pushes Tony to his limits, as he barely survives after witnessing the scale of Thanos's power. In the final battle on Earth, Tony faces Thanos once again. This time, he sacrifices himself to wield the Infinity Stones and defeat Thanos, bringing closure to his journey.
</p>
</div>
<div class="ag-timeline-card_arrow"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>