-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (158 loc) · 7.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<title>Grandchase Myst</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="loading-screen">
<div class="spinner">
</div>
</div>
<div id="content">
<button onclick="topFunction()" id="myBtn" class="myBtn" title="Go to top">Top</button>
<!-- Navigation Bar -->
<nav class="navigation" id="top-nav">
<div class="left-item">
<img src="assets/images/IconHero-Myst-Pilgrim.webp">
</div>
<div class="center-item">
<img src="assets/images/grandchase.png">
</div>
<div class="right-items">
<a href="#headline" class="right-item">HOME</a>
<a href="#about" class="right-item">ABOUT ME</a>
<button onclick="redirectToStore();" class="button-play">PLAY NOW</button>
</div>
</nav>
<div class="bottom-navigation" id="bottom-nav">
<ul>
<li class="list">
<a href="#headline">
<span class="icon"><ion-icon name="home-outline"></ion-icon></span>
</a>
</li>
<li class="list">
<a href="#about">
<span class="icon"><ion-icon name="person-outline"></ion-icon></span>
</a>
</li>
<li class="list">
<a href="#">
<img src="assets/images/IconHero-Myst-Pilgrim.webp" class="myst">
</a>
</li>
<li class="list">
<a href="#" onclick="redirectToStore();">
<span class="icon"><ion-icon name="play-outline"></ion-icon></span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon" onclick="topFunction()"><ion-icon name="arrow-up-circle-outline"></ion-icon></span>
</a>
</li>
</ul>
</div>
<!-- Headline Section -->
<section id="headline">
<div class="headline-container">
<div class="headline-col1">
<h1 class="headline-text">
the <span class="hl-highlight">secret demon king </span><br>imprisoned <br>
in monotony.
</h1>
<p class="headline-descript">
You can play me just press the buttons below.
</p>
<div class="buttons-headline">
<a href="https://play.google.com/store/apps/details?id=com.kog.grandchaseglobal&hl=en&gl=US&pli=1" class="download-playtore-button"><img src="assets/images/playstore.png" id="playstore">DOWNLOAD</a>
<a href="https://apps.apple.com/us/app/grandchase/id1385904294" class="download-apple-button"><img src="assets/images/apple.png" id="apple" alt="apple">DOWNLOAD</a>
</div>
</div>
<div class="headline-col2 animate__animated animate__fadeInRight">
<img src="assets/images/Grand_Chase_for_kakao_Mist_01.webp" alt="myst01" class="myst01">
</div>
</div>
<!-- About Section -->
<section id="about">
<div class="about-container">
<div class="about-col1">
<img src="assets/images/Grand_Chase_for_kakao_Mist_04.webp" alt="myst01">
</div>
<div class="about-col2 hidden">
<div class="about-icons">
<img src="assets/images/Rank-SS (1).webp" alt="">
<img src="assets/images/Type-Tank.webp" alt="">
<img src="assets/images/ATTR-Cycles.webp" alt="">
</div>
<h1 class="title">ABOUT MYST</h1>
<hr class="hr-about"/>
<div class="about-descript">
Everything about him is secretive. The identity of Abaddon, the time he spent in Demon World, and the role he played in Ancient War earned him the title <span class="about-highlight">"Demon King" </span>are all unclear. Some say he is the first fallen angel and some say he has existed long before the Ancient Demons but no one knows the truth. Hence, he is called the <span class="about-highlight"> Secret Demon King</span>.<br>
<br>
While Ancient Demons perished, while Demons divided into Hardliners and Moderates, and while Hardliners shifted from generation to generation and broke into smaller factions, the Secret Demon King did not make his appearance. To him, nothing was new; all failed to entertain him. He estimates how much history has progressed. Although he is tempted to fast forward the clockwork of history, he hasn't carried out his foolish thoughts into action. He simply waits for 『<span class="about-highlight">The Moment</span>』 to come.
</p>
</div>
</div>
</section>
<!-- Media Section -->
<section id="media">
<div class="media-container">
<iframe class="video-myst" src="https://www.youtube.com/embed/fpLrBxo-MP4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</section>
<!-- Evolution Section -->
<section id="evolution">
<div class="evolution-container">
<h1 class="evolution-title">MYST EVOLUTION</h1>
<hr class="hr-evolution">
<div class="mini-container">
<img src="assets/images/EVOLUTION_1.webp" class="evolution1 hidden">
<img src="assets/images/Secret_Demon_King_Myst.webp" class="evolution2 hidden">
<img src="assets/images/MYSTBreakthrough.webp" class="evolution3 hidden">
<img src="assets/images/Endless_Myst.webp" class="evolution4 hidden" >
</div>
<div class="evolution-desc">
<h4 class="conduct">Conductor of Labyrinth</h4>
<h4 class="secret">Secret Demon King</h4>
<h4 class="maestro">Maestro of Apocalypse</h4>
<h4 class="endless">Endless</h4>
</div>
</div>
</section>
<!-- Download Section -->
<section id="download">
<div class="download-container">
<div class="grandchase-download">
<img src="assets/images/grandchase.png" class="logo"><br>
<br>
<div class="desc-download">
<img src="assets/images/OriginalChar-MistSD-A-1_Illust.webp">
<p>Do you wanna play with me? just click the download button below. <span class="about-highlight">SEE YOU CHASER!</span> </p>
</div>
<div class="desc-download-buttons">
<a href="https://play.google.com/store/apps/details?id=com.kog.grandchaseglobal&hl=en&gl=US&pli=1" class="download-playtore-button2"><img src="assets/images/playstore.png" id="playstore">DOWNLOAD</a>
<a href="https://apps.apple.com/us/app/grandchase/id1385904294" class="download-apple-button2"><img src="assets/images/apple.png" id="apple" alt="apple">DOWNLOAD</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<footer>
<p>©<script>document.write(new Date().getFullYear())</script> MYST | For Odin Project Purposes.| Created By: Davee</p>
</footer>
<script src="function/index.js">
</script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>