-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
347 lines (300 loc) · 16.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Odin Landing</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Wake up Wardogs! We have a target to destroy. Odin Landing is a fan-made landing webpage for the popular Playstation 2 video game, Ace Combat 5: The Unsung War.">
<meta name="keywords"
content="the odin project, ace combat, ace combat 5, ace combat 7, ace combat website, ace combat 5 website, ace combat landing page, the odin project landing page, ace combat razgriz, ghosts of razgriz, ace combat 5 the unsung war">
<link rel="stylesheet" href="css/style.min.css">
<link rel="icon" href="images/icon/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/icon/favicon.ico" type="image/x-icon">
<noscript>
<meta http-equiv="refresh" content="0;url=html/noscript.html">
</noscript>
</head>
<body>
<!-- Modals -->
<div class="modals">
<!-- Modal: Loading screen -->
<div class="loading-screen">
<div class="loading-content">
<!-- Loading: child divs represent each face of the cube -->
<div class="cube">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<h1>ACE<br />COMBAT</h1>
</div>
<p>Loading...</p>
</div>
<div class="promo-content">
<img src="images/logo.webp" width="500" height="191" alt="Odin Landing">
</div>
<div class="mistervaliant">
<img src="images/mistervaliant.webp" width="900" height="900" alt="Odin Landing">
</div>
</div>
<!-- Modal: video -->
<div class="video-player">
<div class="video-container">
<p onclick="closeVideo()">x</p>
<iframe title="Ace Combat 7" id="ace-video" width="560" height="315"
src="https://www.youtube.com/embed/KQCDj3emnHk?enablejsapi=1" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<!-- Modal: credits -->
<div class="credits">
<div class="credits-container">
<p onclick="closeCredits()">x</p>
<p><span><i class="ri-plane-fill"></i></span> A game by: <a href="https://en.bandainamcoent.eu"
title="Bandai Namco Entertainment" target="_blank">Bandai Namco</a> and <a
href="https://acecombat.fandom.com/wiki/Project_Aces" title="Project Aces"
target="_blank">Project Aces</a><br /> <br />
<span><i class="ri-plane-fill"></i></span> Ace combat assets from: <a
href="https://acecombat.fandom.com/wiki/Acepedia" title='Ace Combat fandom'
target="_blank">Acepedia</a><br /> <br />
<span><i class="ri-plane-fill"></i></span> Hero GIF by: <a href="https://dribbble.com/Fugstrator"
title="GIF creator" target="_blank">Michael
Fugoso</a><br /> <br />
<span><i class="ri-plane-fill"></i></span> Monocraft font by: <a
href="https://github.com/IdreesInc/Monocraft" title="Minecraft font"
target="_blank">Idrees</a><br /> <br />
<span><i class="ri-plane-fill"></i></span> Webpage made by: <a
href="https://github.com/MisterValiant" title="MisterValiant"
target="_blank">MisterValiant</a><br /> <br />
<span><i class="ri-plane-fill"></i></span> A Project for <a href="https://www.theodinproject.com"
title="The Odin Project" target="_blank">The
Odin Project (TOP) - Landing Page</a>
</p>
</div>
</div>
</div>
<!-- Scroll back to top -->
<button onclick="topFunction()" class="top-btn" title="Go to top">FLY UP <span><i
class="ri-plane-line"></i></span></button>
<!-- Main Content -->
<header>
<nav>
<!-- Navigation: left -->
<ul class="left-nav">
<li><a href="#section1" onclick="hideBurger()">- Engage -</a></li>
<li><a href="#section2" onclick="hideBurger()">= About =</a></li>
</ul>
<div class="logo-container">
<div class="logo-container2">
<a target="_blank" href="https://www.theodinproject.com/">
<img width="500" height="191" src="images/logo.webp" alt="Odin Landing"
title="The Odin Project">
</a>
</div>
</div>
<!-- Navigation: right -->
<ul class="right-nav">
<li><a href="#section3" onclick="hideBurger()">= Gallery =</a></li>
<li><a href="#footer" onclick="credits()">- Credits -</a></li>
</ul>
</nav>
<!-- Hamburger -->
<div class="burger">
<button class="hamburger hamburger--emphatic" onclick="toggleBurger()" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<a class="secondary-logo" href="#section1">
<img width="500" height="191" src="images/logo-transparent.webp" alt="Odin Landing Logo">
</a>
</header>
<main>
<!-- Main: section 1 -->
<section id="section1">
<div class="section1-container">
<div class="hero">
<p class="target-status"><span>Engage Target -- </span><span><i class="ri-plane-fill"></i></span>
</p>
<!-- Section 1: NPC -->
<div class="npc">
<img width="250" height="250" src="images/albert.webp" title="Albert Genette"
alt="Albert Genette">
<p><strong> Albert:</strong> <br />When history witnesses a great change, Razgriz reveals
itself... first, as a dark demon!
<br /><a target="_blank" title="About Razgriz"
href="https://acecombat.fandom.com/wiki/Ace_Combat_5:_The_Unsung_War">➤
<u>Razgriz</u>..?</a>
</p>
</div>
<!-- Section 1: Crosshair -->
<img class="crosshair nudge" onclick="fire()" width="500" height="500" src="images/crosshair.webp"
alt="Odin Landing Crosshair" title="⋆⁺₊⋆ Launch Missile">
<!-- Section 1: Minigame -->
<p class="missile"><b> :Wardog One
<br /></b> Missiles loaded: <strong class="missile-loaded">1</strong>/01
<br />Target Missed: <strong class="missile-missed">0</strong>/10
<br />Target Neutralised: <strong class="neutralised">0</strong>/05
<br />-----------------
<br /><a target="_blank" title="Air-to-Air Missile"
href="https://en.wikipedia.org/wiki/Air-to-air_missile">Good :<u>AAM Status</u><span
class="left-arrow">➤ </span></a>
</p>
<img class="radar" width="233" height="235" src="images/radar.gif" alt="Radar" title="Radar">
<!-- Section 1: Screen flare design -->
<div class="flare"></div>
<div class="flare-2"></div>
</div>
</div>
<div class="triangle-divider"></div>
</section>
<!-- Main: section 2 -->
<section id="section2">
<div class="companies">
<a href="https://www.playstation.com/en-gb/" target="_blank"><img src="images/ps2.webp" width="150"
height="150" title="Playstation 2" alt="Playstation 2"></a>
<a href="https://acecombat.fandom.com/wiki/Project_Aces" target="_blank"><img src="images/aces.webp"
width="150" height="150" title="Project Aces" alt="Project Aces"></a>
<a href="https://www.bandainamcostudios.com/en/" target="_blank"><img src="images/bandai.webp"
width="150" height="150" title="Bandai Namco" alt="Bandai Namco"></a>
<a href="https://www.sie.com/en/index.html" target="_blank"><img src="images/sony.webp" width="150"
height="150" title="Sony" alt="Sony Interactive Entertainment"></a>
</div>
<div class="about-divider">
<div></div>
</div>
<h2>Ace Combat 5</h2>
<h3>The Unsung War</h3>
<div class="game-images">
<div class="item">
<div class="tape"></div>
<div class="polaroid"><img src="images/blaze.webp" width="200" height="200" title="Razgriz 1"
alt="Razgriz 1">
<div class="caption">
<p>Engage in battle aboard the F-14A-R1 Blaze.</p>
</div>
</div>
</div>
<div class="item">
<div class="tape"></div>
<div class="polaroid"><img src="images/razgriz.webp" title="Ghosts of Razgriz"
alt="Ghosts of Razgriz">
<div class="caption">
<p>Command the valiant Ghosts of Razgriz.</p>
</div>
</div>
</div>
<div class="item">
<div class="tape"></div>
<div class="polaroid"><img src="images/engage.webp" title="Engage enemies" alt="Engage Enemies">
<div class="caption">
<p>Neutralise enemy targets and save Osea.</p>
</div>
</div>
</div>
<div class="item">
<div class="tape"></div>
<div class="polaroid"><img src="images/arkbird.webp" title="Arkbird" alt="Arkbird">
<div class="caption">
<p>What do you mean? Wait, The Arkbird...</p>
</div>
</div>
</div>
</div>
<p class="about-description">Command Blaze, pilot for the Osean Air Defense Force in the Wardog Squadron, as
he becomes embroiled in the Circum-Pacific War between Osea and Yuktobania. In the midst of the war,
Blaze and his wingmen unwittingly carry out the Razgriz prophecy and discover the conspiracy pulling the
strings behind the war.</p>
<div class="triangle-divider-2"></div>
<div class="white-background"></div>
</section>
<!-- Main: section 3 -->
<section id="section3">
<h4><i class="ri-star-fill"></i> Discover <i class="ri-star-fill"></i><br /> Ace Combat 7: Skies
Unknown</h4>
<div class="borders ace7">
<img src="images/ace7.webp" onclick="videoModal()" width="1200" height="630" alt="Ace Comnbat 7"
title="Watch Ace Combat 7">
</div>
<div class="discover-divider">
<div class="img-ticker">
<img src="images/plane.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-2.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-3.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-4.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-5.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-6.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-7.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-2.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-3.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-4.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-5.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-6.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-7.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane.webp" width="200" height="200" alt="Fighter jet">
<img src="images/plane-2.webp" width="200" height="200" alt="Fighter jet">
</div>
</div>
<blockquote><q> Amidst the eternal waves of time
<br />From a ripple of change shall the storm rise.
<br />Out of the abyss peer the eyes of a demon
<br />Behold the Razgriz, its wings a black sheath. </q>
<br /> <br />
<a href="https://acecombat.fandom.com/wiki/Project_Aces" target="_blank" title="Project Aces">- Project
Aces <span><i class="ri-layout-grid-fill"></i></span></a>
</blockquote>
<div class="call-to-action">
<p>Find out more on the Ace Combat series</p><a href="https://www.acecombat.jp/" target="_blank"
title="Ace Combat series">Visit <span><i class="ri-global-line"></i></span></a>
</div>
</section>
</main>
<footer id="footer">
<div class="footer-container">
<!-- Footer: creator-->
<p class="socials">
<a title="Github" target="_blank" href="https://github.com/MisterValiant"><i class="ri-github-fill"></i></a>
<a title="Twitter" target="_blank" href="https://twitter.com/Mist3rValiant"><i
class="ri-twitter-fill"></i></a>
<a title="Youtube" target="_blank" href="https://www.youtube.com/c/MisterValiant"><i
class="ri-youtube-fill"></i></a>
</p>
<p class="creator">Made with ❤️ by <a target="_blank" href="https://github.com/MisterValiant"
class="mv">MisterValiant</a></p>
<!-- Footer: disclaimer -->
<div class="disclaimer">
<a href="#section1">
<img width="500" height="191" src="images/logo.webp" alt="Odin Landing" title="The Odin Project">
</a>
<p>"Ace Combat", "Ace Combat 5", "Ace Combat 7", "Aces Web", and Ace Combat services are trademarks and/or
registered
trademarks of Bandai Namco Entertainment.
<br />"PlayStation Family Mark" and "PS2 logo" are registered trademarks or trademarks of Sony
Interactive Entertainment Inc.
<br />All other trademarks are the property of their respective
owners.
</p>
<a target="_blank" href="https://www.acecombat.jp" class="ace-ref">
Inspired by Ace Combat
</a>
</div>
</div>
</footer>
<script src="js/script.js" defer></script>
<link rel="stylesheet" href="css/remixicon.css">
</body>
</html>