-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
581 lines (569 loc) · 22.1 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
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Attack On Titan WIP</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#episodes">Episdoes</a></li>
<li><a href="#seasons">Seasons</a></li>
<li><a href="#characters">Characters</a></li>
</ul>
</nav>
<main>
<section class="hero" id="hero">
<div class="content">
<header class="main-header img-header">
<img src="imgs/logo.png" alt="attack on titan" />
</header>
<div class="info-container">
<div class="info" id="rating">
<h2>Rating</h2>
<img src="imgs/5starRating.png" alt="" />
</div>
<div class="info">
<h2>Genre</h2>
<h4>Dark Fantasy</h4>
</div>
<div class="info">
<h2>Creator</h2>
<h4>Hajime Isayama</h4>
</div>
</div>
<a
href="https://www.crunchyroll.com/series/GR751KNZY/attack-on-titan"
class="prim-btn"
target="_blank"
>Watch Now <i class="fa-solid fa-arrow-right"></i
></a>
<div class="hero-imgs">
<div class="img-holder">
<img src="imgs/shot1.png" alt="" />
</div>
<div class="img-holder">
<img src="imgs/shot2.png" alt="" />
</div>
<div class="img-holder">
<img src="imgs/shot3.jpg" alt="" />
</div>
<div class="img-holder">
<img src="imgs/shot4.jpg" alt="" />
</div>
</div>
</div>
</section>
<section class="about" id="about">
<header class="main-header with-subheader">
<h1>No Fight, No Victory</h1>
<h2>
"If You Win, You Live. If You Lose, You Die. If You Don't Fight, You
Can't Win!"
</h2>
</header>
<div class="content">
<div class="container">
<div class="content-container img-container">
<img src="imgs/squadlogos/wof-realistic.png" alt="" />
</div>
<div class="content-container text-container">
<header class="text-header">
<h1>Welcome to Attack on Titan!</h1>
</header>
<p>
Attack on Titan (進撃の巨人 Shingeki no Kyojin?, lit. "Advancing
Giant(s)") is an anime series based on the manga of the same
name by Hajime Isayama. It was produced by Wit Studio and
Production I.G for the first three seasons and by MAPPA for the
fourth. The first season began airing in Japan on April 7, 2013,
on Mainichi Broadcasting System.
</p>
<p>
Attack on Titan is set in a world where humanity lives inside
cities surrounded by enormous Walls that protect them from
Titans, gigantic humanoid creatures who devour humans seemingly
without reason. The story centers around Eren Jaeger and his
childhood friends Mikasa Ackermann and Armin Arlelt whose lives
are changed forever after the appearance of a Colossal Titan,
which brings about the destruction of their home town and the
death of Eren's mother. Vowing revenge and to reclaim the world
from the Titans, Eren, Mikasa, and Armin join the Scout
Regiment, an elite group of soldiers who fight Titans outside
the Walls.
</p>
<p>
The anime can be watched on Sling, Hulu, Apple TV, Prime Video,
Spectrum, and Crunchyroll.
</p>
</div>
</div>
</div>
</section>
<section class="about2" id="about2">
<div class="content">
<div class="container">
<div class="content-container text-container">
<header class="text-header">
<h1>When it all began?</h1>
</header>
<p>
Funimation licensed the series for an English release and home
video and also streamed the series on its website, before being
incorporated into Crunchyroll. The series is also streamed by
AnimeLab in Tokyo, Chicago, Australia, and New Zealand.
</p>
<p>
The highly anticipated second season premiered on April 1, 2017.
A third season was announced at the end of the second season's
last episode and released on July 23, 2018. After airing 12
episodes, Season 3 was put on hiatus and resumed on April 29,
2019.
</p>
<p>
When the final episode of the third season aired on July 1,
2019, it was announced that the fourth season of the anime
series, titled Attack on Titan: The Final Season, was scheduled
to air on NHK General during the fall 2020 anime season. The
Final Season premiered on December 7, 2020. After airing 16
episodes, The Final Season was put on hiatus and resumed on
January 10, 2022. After another 12 episodes aired, The Final
Season was put on hiatus. The last two installments of The Final
Season aired as TV specials on March 4, 2023 and November 5,
2023. Said specials were later reworked into their episodic
version (各話版 Kakuwa-ban?): the first into three episodes
released on November 5, 2023; the second into four more episodes
released on November 19, 2023.
</p>
</div>
<div class="content-container img-container">
<img src="imgs/colossal-extra.png" alt="" />
</div>
</div>
</div>
</section>
<section class="episodes">
<header class="header-btn main-header" id="episodes">
<h1>New Episodes</h1>
<a href="" class="prim-btn"
>See all episodes <i class="fa-solid fa-arrow-right"></i
></a>
</header>
<div class="content">
<div class="card-container">
<div class="episode-card">
<div class="image-container">
<img src="imgs/shot1.png" alt="" />
<div class="play-overlay">
<div class="overlay">
<i class="fa-regular fa-circle-play"></i>
</div>
</div>
</div>
<h2>The Final Chapters (Part 2)</h2>
<div class="date-views">
<h4>November 5, 2023</h4>
<p>
5.65m
<i class="fa-solid fa-eye"></i>
</p>
</div>
</div>
<div class="episode-card">
<div class="image-container">
<img src="imgs/shot2.png" alt="" />
<div class="play-overlay">
<div class="overlay">
<i class="fa-regular fa-circle-play"></i>
</div>
</div>
</div>
<h2>The Final Chapters (Part 1)</h2>
<div class="date-views">
<h4>March 4, 2023</h4>
<p>
6.8m
<i class="fa-solid fa-eye"></i>
</p>
</div>
</div>
<div class="episode-card">
<div class="image-container">
<img src="imgs/shot3.jpg" alt="" />
<div class="play-overlay">
<div class="overlay">
<i class="fa-regular fa-circle-play"></i>
</div>
</div>
</div>
<h2>S4-P2, Episode 28</h2>
<div class="date-views">
<h4>April 4, 2022</h4>
<p>
998k
<i class="fa-solid fa-eye"></i>
</p>
</div>
</div>
</div>
</div>
</section>
<section class="seasons">
<header class="main-header header-btn" id="seasons">
<h1>Seasons</h1>
<a href="" class="prim-btn"
>See all seasons<i class="fa-solid fa-arrow-right"></i
></a>
</header>
<div class="content">
<div class="card-container">
<div class="season-card">
<div class="image-container">
<img
src="imgs/season_posters/Attack_on_Titan_Season_1.webp"
alt=""
/>
<div class="play-overlay">
<div class="overlay">
<i class="fa-regular fa-circle-play"></i>
</div>
</div>
</div>
<h2>Season 1</h2>
<p>
Centuries ago, Titans nearly exterminated humanity, forcing
survivors behind massive walls. After a century of peace, a
colossal Titan breaches the outer wall, reigniting the battle
for survival. Eren Yeager, after a personal loss, joins the
Survey Corps with his sister Mikasa and friend Armin to fight
the Titans and find a way to defeat them.
</p>
<h3>Rating</h3>
<div class="rating-views">
<img src="imgs/5starRating.png" alt="" />
<p>
10.1m
<i class="fa-solid fa-eye"></i>
</p>
</div>
</div>
<div class="season-card">
<div class="image-container">
<img
src="imgs/season_posters/Attack_on_Titan_Season_2_.webp"
alt=""
/>
<div class="play-overlay">
<div class="overlay">
<i class="fa-regular fa-circle-play"></i>
</div>
</div>
</div>
<h2>Season 2</h2>
<p>
Eren Yeager and others of the 104th Training Corps have just
begun to become full members of the Survey Corps. As they ready
themselves to face the Titans once again, their preparations are
interrupted by the invasion of Wall Rose—but all is not as it
seems as more mysteries are unraveled. As the Survey Corps races
to save the wall, they uncover more about the invading Titans
and the dark secrets of their own members.
</p>
<h3>Rating</h3>
<div class="rating-views">
<img src="imgs/5starRating.png" alt="" />
<p>
9.8m
<i class="fa-solid fa-eye"></i>
</p>
</div>
</div>
<div class="season-card">
<div class="image-container">
<img
src="imgs/season_posters/Attack_on_Titan_Season_3.webp"
alt=""
/>
<div class="play-overlay">
<div class="overlay">
<i class="fa-regular fa-circle-play"></i>
</div>
</div>
</div>
<h2>Season 3 Part 1</h2>
<p>
Still threatened by Titans, humanity remains confined within two
walls. Eren trains to improve his Titan form, while Krista,
Levi, and Erwin face personal challenges. The government demands
custody of Eren and Krista, sending a familiar face from Levi's
past. Levi's squad must evade capture, battling both Titans and
human enemies.
</p>
<h3>Rating</h3>
<div class="rating-views">
<img src="imgs/5starRating.png" alt="" />
<p>
9.3m
<i class="fa-solid fa-eye"></i>
</p>
</div>
</div>
<div class="season-card">
<div class="image-container">
<img
src="imgs/season_posters/Attack_on_Titan_Season_3_Part2.webp"
alt=""
/>
<div class="play-overlay">
<div class="overlay">
<i class="fa-regular fa-circle-play"></i>
</div>
</div>
</div>
<h2>Season 3 Part 2</h2>
<p>
To restore hope, the Survey Corps launch a mission to retake
Wall Maria. Eren Yeager and his team find Shiganshina eerily
empty of Titans. Armin suspects a trap, and they soon uncover a
scheme. "Shingeki no Kyojin Season 3 Part 2" follows Eren and
the Corps as they fight to reclaim their home and uncover
secrets in the Yeager family's basement.
</p>
<h3>Rating</h3>
<div class="rating-views">
<img src="imgs/5starRating.png" alt="" />
<p>
8.9m
<i class="fa-solid fa-eye"></i>
</p>
</div>
</div>
</div>
</div>
</section>
<section class="subscribe">
<div class="content">
<div class="input-box">
<h1>Welcome to Attack on Titan!</h1>
<h3>Enter your email address to receive news and notifications</h3>
<div class="main-input">
<input
type="text"
name="email"
id="email"
placeholder="[email protected]"
/>
<input
type="submit"
name="reg-email"
id="reg-email"
class="prim-btn"
value="Subscribe"
/>
</div>
</div>
</div>
</section>
<section class="characters">
<header class="header-btn main-header" id="characters">
<h1>Main Characters</h1>
<a href="" class="prim-btn"
>See all characters<i class="fa-solid fa-arrow-right"></i
></a>
</header>
<div class="content">
<div class="card-container">
<div class="character-card">
<div class="tri-image-box">
<img src="imgs/characters/eren1.png" alt="" class="img1" />
<img src="imgs/characters/eren2.png" alt="" class="img2" />
<img src="imgs/characters/eren3.png" alt="" class="img3" />
</div>
<div class="character-info">
<h1 class="name">Eren Yeager</h1>
<div class="line">
<h1>Height:</h1>
<p>170cm</p>
</div>
<div class="line">
<h1>Regiment:</h1>
<p>Survey Corps</p>
</div>
<a href="" class="link-btn"
>Learn more<i class="fa-solid fa-arrow-right"></i
></a>
</div>
</div>
<div class="character-card">
<div class="tri-image-box">
<img src="imgs/characters/mikasa1.png" alt="" class="img1" />
<img src="imgs/characters/mikasa2.png" alt="" class="img2" />
<img src="imgs/characters/mikasa3.png" alt="" class="img3" />
</div>
<div class="character-info">
<h1 class="name">Mikasa Ackermann</h1>
<div class="line">
<h1>Height:</h1>
<p>170cm</p>
</div>
<div class="line">
<h1>Regiment:</h1>
<p>Survey Corps</p>
</div>
<a href="" class="link-btn"
>Learn more<i class="fa-solid fa-arrow-right"></i
></a>
</div>
</div>
<div class="character-card">
<div class="tri-image-box">
<img src="imgs/characters/armin1.png" alt="" class="img1" />
<img src="imgs/characters/armin3.png" alt="" class="img2" />
<img src="imgs/characters/armin2.png" alt="" class="img3" />
</div>
<div class="character-info">
<h1 class="name">Armin Arlert</h1>
<div class="line">
<h1>Height:</h1>
<p>163cm</p>
</div>
<div class="line">
<h1>Regiment:</h1>
<p>Survey Corps</p>
</div>
<a href="" class="link-btn"
>Learn more<i class="fa-solid fa-arrow-right"></i
></a>
</div>
</div>
<div class="character-card">
<div class="tri-image-box">
<img src="imgs/characters/levi3.png" alt="" class="img1" />
<img src="imgs/characters/levi1.png" alt="" class="img2" />
<img src="imgs/characters/levi2.png" alt="" class="img3" />
</div>
<div class="character-info">
<h1 class="name">Levi Ackermann</h1>
<div class="line">
<h1>Height:</h1>
<p>160cm</p>
</div>
<div class="line">
<h1>Regiment:</h1>
<p>Survey Corps</p>
</div>
<a href="" class="link-btn"
>Learn more<i class="fa-solid fa-arrow-right"></i
></a>
</div>
</div>
</div>
</div>
</section>
<section class="regiments">
<header class="header-btn main-header" id="regiments">
<h1>Regiments</h1>
<a href="" class="prim-btn"
>Learn more about regiments<i class="fa-solid fa-arrow-right"></i
></a>
</header>
<div class="content">
<div class="card-container">
<div class="regiment-card">
<div class="img-container">
<img
src="imgs/squadlogos/scouts-logo-transparent.png"
alt=""
id="survey-corps-logo"
/>
</div>
<h1>Survey Corps</h1>
<h2>調査兵団 Chōsa Heidan</h2>
<a href="" class="link-btn"
>Learn more<i class="fa-solid fa-arrow-right"></i
></a>
</div>
<div class="regiment-card">
<div class="img-container">
<img
src="imgs/squadlogos/garrison-logo-transparent.png"
alt=""
id="garrison-logo"
/>
</div>
<h1>Garrison Regiment</h1>
<h2>駐屯兵団 Chūton Heidan</h2>
<a href="" class="link-btn"
>Learn more<i class="fa-solid fa-arrow-right"></i
></a>
</div>
<div class="regiment-card">
<div class="img-container">
<img
src="imgs/squadlogos/mp-logo-transparent.png"
alt=""
id="mp-logo"
/>
</div>
<h1>Military Police Brigade</h1>
<h2>憲兵団 Kenpeidan</h2>
<a href="" class="link-btn"
>Learn more<i class="fa-solid fa-arrow-right"></i
></a>
</div>
<div class="regiment-card">
<div class="img-container">
<img
src="imgs/squadlogos/cadet-logo-transparent.png"
alt=""
id="cadets-logo"
/>
</div>
<h1>Cadet Corps</h1>
<h2>訓練兵団 Kunren Heidan</h2>
<a href="" class="link-btn"
>Learn more<i class="fa-solid fa-arrow-right"></i
></a>
</div>
</div>
</div>
</section>
<section class="merchandise">
<header class="header-btn main-header" id="regiments">
<h1>Attack on Titan Merch</h1>
<a href="" class="prim-btn"
>Other products<i class="fa-solid fa-arrow-right"></i
></a>
</header>
<div class="content">
<div class="container">
<div class="content-container text-container">
<p>
Unleash your inner Scout with our exclusive collection of Attack on Titan merchandise! Whether you're a seasoned fan or new to the epic world of Titans, our merch section has something for everyone. From high-quality apparel and accessories to collectibles and home decor, we've got you covered. Show your allegiance to humanity with stylish gear that captures the spirit of this legendary anime.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex
numquam consequatur soluta similique sunt ipsa. Nesciunt
temporibus reiciendis nemo libero cupiditate ipsum illo cum.
Ducimus magni nam quaerat fugit recusandae!
</p>
<a href="" class="prim-btn"
>Buy now<i class="fa-solid fa-arrow-right"></i
></a>
</div>
<div class="content-container img-container">
<img src="imgs/hoodie_merch.png" alt="" />
</div>
</div>
</div>
</section>
</main>
<script
src="https://kit.fontawesome.com/3ee5fde7b9.js"
crossorigin="anonymous"
></script>
</body>
</html>