AoT-Fanbase-Website/index.html at main · RiyaRanka/AoT-Fanbase-Website · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik+Pixels&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Dai+Banna+SIL:wght@300&display=swap" rel="stylesheet">
    <title>AoT Webpage</title>
</head>

<header>
    <nav>
        <ul>
            <li><a href="#about-aot">About AoT</a></li>
            <li><a href="#titan-row">Founding Titans</a></li>
            <li><a href="#characters">Characters</a></li>
            <li><a href="#social-media">Contact</a></li>
        </ul>
    </nav>
</header>

<body>
    <h1>Anime: Attack on Titan </h1>

    <div class="slideshow-container">

        <div class="slides fade">
            <div class="numbertext">1 / 5</div>
            <div class="image-container">
                <img src="https://wallpaperaccess.com/full/341369.jpg">
            </div>
            <div class="text">Season One</div>
        </div>

        <div class="slides fade">
            <div class="numbertext">2 / 5</div>
            <div class="image-container">
                <img src="https://wallpaperaccess.com/full/36626.jpg">
            </div>
            <div class="text">Season Two</div>
        </div>

        <div class="slides fade">
            <div class="numbertext">3 / 5</div>
            <div class="image-container">
                <img src="https://i.ytimg.com/vi/HOLGK3kRBj4/maxresdefault.jpg">
            </div>
            <div class="text">Season Three</div>
        </div>

        <div class="slides fade">
            <div class="numbertext">4 / 5</div>
            <div class="image-container">
                <img
                    src="https://sportshub.cbsistatic.com/i/2021/03/18/e98e4985-f15f-427c-a4a4-16413b5c4b79/attack-on-titan-final-season-poster-1247702.jpg">
            </div>
            <div class="text">Season Four</div>
        </div>

        <div class="slides fade">
            <div class="numbertext">5 / 5</div>
            <div class="image-container">
                <img
                    src="https://sportshub.cbsistatic.com/i/2022/11/13/5b7cd022-e962-465e-881b-29628db23c73/attack-on-titan.png">
            </div>
            <div class="text">Season Five</div>
        </div>

    </div>
    <br>

    <div style="text-align:center">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>

    <div id="about-aot">
    <p>Attack on Titan is a Japanese manga series written and illustrated by Hajime Isayama. In a world where humanity
        is forced to live in cities surrounded by three enormous walls that protect them from gigantic man-eating
        humanoids referred to as Titans. The story follows Eren Yeager, who vows to exterminate the Titans after they
        bring about the destruction of his hometown and the death of his mother. An anime television series was produced
        by Wit Studio and MAPPA.
    </p>
</div>

<h1>The Nine Founding Titans</h1>
<div id="titan-row">

    <div class="titan-column">
        <img src="https://m.media-amazon.com/images/I/51MretMTQcL._RI_.jpg" alt="The Attack Titan image"
        width="44em" height="30%">
        <img src="https://sm.ign.com/ign_in/news/a/attack-on-/attack-on-titan-final-episode-gets-new-trailer-fall-release_16cr.jpg"
        alt="The Female Titan" width="44em" height="30%">
        <img src="https://qph.cf2.quoracdn.net/main-qimg-4aa8d12a9e448f6d1d6a054eb5ba9c41-lq"
        alt="The Armored Titan" width="44em" height="30%">
    </div>

    <div class="titan-column">
        <img src="https://www.thehergula.com/wp-content/uploads/2021/02/Titans-List-Cover.png"
        alt="The Colossus Titan" width="44em" height="30%">
        <img src="https://www.indiewire.com/wp-content/uploads/2017/03/screen-shot-2017-03-25-at-11-30-08-am.png?w=1000&h=608&crop=1"
        alt="The Beast Titan" width="44em" height="30%">
        <img src="https://thenewsfetcher.com/wp-content/uploads/2021/01/fa465df6a552855da45c2e7a4dd5db7c.jpg"
        alt="The Jaw Titan" width="44em" height="30%">
    </div>

    <div class="titan-column">
        <img src="https://vgculturehq.com/wp-content/uploads/2021/01/attack-on-titan-final-season-warhammer-titan.jpg"
        alt="War Hammer Titan" width="44em" height="30%">
        <img src="https://cdn.technadu.com/wp-content/uploads/2022/01/Anti-Titan_artillery_mounted_on_the_Cart_Titan.png"
        alt="Cart Titan" width="44em" height="30%">
        <img src="https://w0.peakpx.com/wallpaper/80/930/HD-wallpaper-attack-on-titan-founding-titan-the-rumbling-attack-on-titan.jpg"
        alt="Founding Titan" width="44em" height="30%">
    </div>
</div>

<p class="about-titans"> The Titan Shifter each is able to shift back and forth between human and Titan form to
    access their Titan's abilities. Many Titan Shifters also possess the ability to harden certain parts of their
    bodies at will, typically in order to make them virtually impenetrable, or to strengthen their blows during
    combat.</p>

    <div id="characters">
        <div class="characters-container">
            <div class="characters-content">
                <h3>Eren Yegar</h3>
                <p>Eren Yeager was a former member of the Survey Corps. He was the main protagonist of Attack on Titan. Eren's intense hatred towards the Titans as he swore to wipe all of them off the faceof the Earth. Soon afterward, his father, Grisha Yeager, found him and gave him the key to his basement, instructing Eren to find it at all costs and retake Wall Maria. After finding the basement and unlocking his father's memories. He then injected Eren with a Titan serum. They joined the Survey Corps following the battle of Trost District. </p>
            </div>
            <div class="video">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/biJaDGO7BZI?controls=0&start=21&mute=1&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>

        <div class="characters-container">
            <div class="video">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/5SQ-wzUCj6U?controls=0&start=10&mute=1&autoplay=1" frameborder="0" allowfullscreen></iframe>
            </div>
            <div class="characters-content">
                <h3>Mikasa Ackerman</h3>
                <p>Mikasa Ackerman after her parents were murdered by human traffickers, Mikasa was rescued by Eren Yeager and lived with him and his parents, Grisha and Carla, before the fall of Wall Maria. Mikasa's bond with Eren is undoubtedly her most important relationship and the one that defines her. Though she desires only to live a peaceful life. She later enlists in the Survey Corps to follow and protect Eren, becoming one of its greatest assets. She is currently serving as an officer in the Corps. </p>
            </div>
        </div>

        <div class="characters-container">
            <div class="characters-content">
                <h3>Armin Arlet</h3>
                <p>Armin Arlert is the 15th and current commander of the Survey Corps, named so by Hange Zoë before their death. He is also a childhood friend of Eren Yeager and Mikasa Ackerman, and one of the two deuteragonists of the series. His intelligence and strategic genius makes him an invaluable asset, especially when paired with Hange. After the battle of Shiganshina District, he took the power of the Titans from Bertolt Hoover and came in possession of the Colossus Titan. </p>
            </div>
            <div class="video">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/Llg2ff-5QqQ?controls=0&start=14&mute=1&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>

        <div class="characters-container">
            <div class="video">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/ceQ4nhyuX2k?controls=0&start=15&mute=1&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="characters-content">
                <h3>Levi Ackerman</h3>
                <p>Captain Levi is the squad captain of the Special Operations Squad within the Survey Corps and is widely known as humanity's strongest soldier. Once when forced to take leave from his duties due to injury. Levi is described as a "clean freak" by those who know him personally as he prefers his environment and himself to be spotlessly clean. After a close-encounter explosion from a Thunder Spear set off by Zeke Yeager. Levi now has several scars across his face including one across his right eye and is missing both the index and middle fingers on his right hand. </p>
            </div>
        </div>

        <div class="characters-container">
            <div class="characters-content">
                <h3>Reiner Braun</h3>
                <p>Reiner Braun is the Vice Captain of the Warrior Unit and the main protagonist of Attack on Titan from the Marleyan perspective. He is the illegitimate son of an Eldian and a Marleyan and grew up in Liberio's internment zone. Armored Titan form is 15 meters tall and has white plates of hardened. Eventually, he was selected as a child to become one of Marley's Warriors. At the age of ten, he inherited the power of the Armored Titan. He joined the Survey Corps after graduating from Training Corps.</p>
            </div>
            <div class="video">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/u_iXOfHfRPU?controls=0&start=15&mute=1&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </div>

        <footer>
            <div id="social-media">
                <p class="tatekae">Contact </p>
                <a target="_blank" href="https://github.com/RiyaRanka"> <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub"></a>
                <a target="_blank" href="https://www.linkedin.com/in/riya-ranka-3836571b4/"> <img src="https://w7.pngwing.com/pngs/93/587/png-transparent-linkedin-logo-linkedin-logo-computer-icons-business-symbol-linkedin-icon-miscellaneous-blue-angle-thumbnail.png" alt="LinkedIn"></a>
                <a target="_blank" href="https://github.com/RiyaRanka/AoT-github.io"> <img src="https://www.kindpng.com/picc/m/22-220676_code-icon-code-icon-png-transparent-png.png" alt="Website Code"></a>
                <a target="_blank" hreaf="#"> <img src="https://w7.pngwing.com/pngs/722/1011/png-transparent-logo-icon-instagram-logo-instagram-logo-purple-violet-text-thumbnail.png" alt="Instagram"></a>
        </div>
        <div class="tatekae">
            <!-- <p class="tatekae">TATEKAE | FIGHT</p> -->
            <p class="reference">The reference of this website content is taken by <a href="https://attackontitan.fandom.com/wiki/Titan_(Anime)#:~:text=Ranging%20from%203%2D15%20meters,making%20them%20easy%20to%20deceive.">Attack on Titan Fandom</a>
            </p>
        </div>
    </footer>

    <script src="./script.js"></script>
</body>