-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
247 lines (184 loc) · 11.5 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="title_screen" class="row fullscreen">
<div class="col-md-7">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="trailer embed-responsive-item" src="https://www.youtube.com/embed/p68k3U8WzRU" allowfullscreen></iframe>
</div>
</div>
</div>
<div id="story_page" class="benguiat fullscreen row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h1>Story</h1>
<hr>
<p class="story">Invaders from another world attack without warning,
unleashing a new type of threat: weapons known as “machine lifeforms.”
In the face of this insurmountable threat, mankind is driven from Earth and takes refuge
on the Moon. </p>
<br>
<p class="story"> The Council of Humanity organizes a resistance of android soldiers in
an effort to take back their planet. To break the deadlock,
the Resistance deploys a new unit of android infantry: YoRHa. </p>
<br>
<p class="story">In the forsaken wasteland below, the war between the machines and the androids rages on.
A war that is soon to unveil the long-forgotten truth of this world...</p>
</div>
</div>
<div id="character_page" class="fullscreen benguiat row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h1>Characters</h1>
<hr>
<div id="character_carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
<ol class="carousel-indicators">
<li data-bs-target="#character_carousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#character_carousel" data-bs-slide-to="1"></li>
<li data-bs-target="#character_carousel" data-bs-slide-to="2"></li>
<li data-bs-target="#character_carousel" data-bs-slide-to="3"></li>
<li data-bs-target="#character_carousel" data-bs-slide-to="4"></li>
<li data-bs-target="#character_carousel" data-bs-slide-to="5"></li>
<li data-bs-target="#character_carousel" data-bs-slide-to="6"></li>
<li data-bs-target="#character_carousel" data-bs-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active ">
<!-- 2b page -->
<img class="d-block w-100" src="images/2b_carousel.png" alt="First slide">
</div>
<div class="carousel-item ">
<!-- 9s page -->
<img class="d-block w-100" src="images/9s_carousel.jpg" alt="Second slide">
</div>
<div class="carousel-item ">
<!-- a2 page -->
<img class="d-block w-100" src="images/a2_carousel.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<!-- commander page -->
<img class="d-block w-100" src="images/commander_carousel.jpg" alt="Fourth slide">
</div>
<div class="carousel-item">
<!-- operator page -->
<img class="d-block w-100" src="images/operator_carousel.jpg" alt="Fifth slide">
</div>
<div class="carousel-item">
<!-- pod page -->
<img class="d-block w-100" src="images/pod_carousel.jpg" alt="Sixth slide">
</div>
<div class="carousel-item">
<!-- adam and eve page -->
<img class="d-block w-100" src="images/adam_eve_carousel.jpg" alt="Seventh slide">
</div>
<div class="carousel-item">
<!-- pascal page -->
<img class="d-block w-100" src="images/pascal_carousel.jpg" alt="Eighth slide">
</div>
</div>
<a class="carousel-control-prev" href="#character_carousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#character_carousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
<!-- Captions -->
<div class="carousel_caption twobee_caption">
<p><strong>2B (YoRHa No. 2, Type B)</strong></p>
<p>A blade…with a quiet volition.
An all-purpose battle android deployed as a member of the automated infantry squad, YoRHa. She is equipped with a sword for close-quarters combat, and can attack from range using the “Pod” tactical support system. Members of YoRHa
forgo names and are referred to only by their codes. Though regulations forbid them from expressing emotions, each model has its own distinguishing personality, and 2B is comparatively cool, calm, and collected.</p>
</div>
<div class="carousel_caption nineS_caption">
<p><strong>9S (YoRHa No. 9, Type S)</strong></p>
<p>A soul…and an ephemeral kindness.
Though he has the ability to attack, this YoRHa android specializes in research missions and excels in collecting information, mainly by hacking. Within YoRHa, 9S is comparatively varied in his emotional expressions and has a kind
personality.</p>
</div>
<div class="carousel_caption a2_caption">
<p><strong>A2 (YoRHa Type A, No. 2)</strong></p>
<p>
A vortex…of the past and hatred.
The Type A is a YoRHa prototype model that is no longer in use. She specializes in close-range attacks. She was operated on a trial basis in the process of developing official models such as 2B and 9S. Personality-wise, she has
little to say and always acts independently.</p>
</div>
<div class="carousel_caption commander_caption">
<p><strong>Commander</strong></p>
<p>The leader of the “Bunker,” a military base orbiting Earth. She is in charge of all YoRHa units. Her position demands her to be calm and collected at all times, but she seems to worry for the personal safety of 2B and 9S. She also
appears to have some kind of history with YoRHa prototype model A2.</p>
</div>
<div class="carousel_caption operator_caption">
<p><strong>Operator 6O and Operator 21O</strong></p>
<p>Two communications operators permanently stationed at the Bunker.
They are mainly in charge of analyzing intel, and relaying orders to the YoRHa units on the planet’s surface. They have fairly different personalities, with 6O, who’s in charge of 2B, being relatively bright and cheerful, whereas
21O, in charge of 9S, is always cool and composed.</p>
</div>
<div class="carousel_caption pod_caption">
<p><strong>Pod 042 and Pod 153</strong></p>
<p>These support units are part of every YoRHa soldier’s standard equipment. They come installed with various weapons used for long-range combat, and can also aid their owners in traversal. They can display messages coming in from
Command, and they are also capable of exchanging information among themselves to devise strategies. 2B is followed by Pod 042, while 9S is accompanied by Pod 153.</p>
</div>
<div class="carousel_caption adam_eve_caption">
<p><strong>Adam</strong></p>
<p>A mysterious young man.
He wears glasses and is extremely intelligent. He has a generally calm personality, but does not shy away from excessive force in order to attain his goals.</p>
<p><strong>Eve</strong></p>
<p>Adam’s younger twin.
Contrary to Adam, Eve is short-tempered and doesn’t like thinking too much. His brother means the world to him.</p>
</div>
<div class="carousel_caption pascal_caption">
<p><strong>Pascal</strong></p>
<p>Despite being a machine lifeform, Pascal is a pacifist and despises any kind of conflict. He is searching for the path to peace, along with other likeminded machine lifeforms. He is very intelligent, and shows a great interest in
the history of humanity and machines alike.</p>
</div>
</div>
</div>
<div class="hr_wrapper">
<hr class="dot_line">
</div>
<div id="concept_art_page" class="fullscreen benguiat row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h1>Concept Art</h1>
<hr>
<img src="images/cityruins.jpg" class="concept_art w-100" alt="...">
<img src="images/cityruins1.jpg" class=" concept_art w-100" alt="...">
<img src="images/amusement_park.jpg" class=" concept_art w-100" alt="...">
<img src="images/forestking.jpg" class=" concept_art w-100" alt="...">
<img src="images/tower.png" class="concept_art w-100 bottom_padding" alt="...">
</div>
</div>
<div id="purchase_page" class="fullscreen benguiat row">
<div class="col-md-1">
</div>
<div class="col-md-5">
<h1 class="purchase_text">Select Your Platform:</h1>
<hr>
<select name="platform" id="platform">
<option value="steam" selected="selected">Steam</option>
<option value="xbox_one">Xbox One</option>
<option value="ps4">PS4</option>
</select>
<div class="product_container">
<a href="https://www.xbox.com/en-US/games/nier-automata" target="_blank">
<img class="product_image xbox" src="images/xbox.jpg" alt=""></a>
<a href="https://store.playstation.com/en-us/product/UP0082-CUSA04551_00-GOTYORHADIGITAL0" target="_blank"><img class="product_image" src="images/ps4.jpg" alt=""></a>
<a href="https://store.steampowered.com/app/524220/NieRAutomata/" target="_blank"><img class="product_image" src="images/steam.jpg" alt=""></a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>