-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
176 lines (150 loc) · 7.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H2TQ</title>
<link rel="stylesheet" href="src/assets/sass/main.sass">
<link rel="icon" type="image/png" href="src/assets/img/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script defer type="module" src="src/assets/js/app.js"></script>
</head>
<body>
<!-- Logo y menú -->
<section id="home">
<nav id="navbar" class="navbar">
<a id="navbarMenuIcon" class="navbarMenuIconContainer">
<img class="navbarMenuIcon" src="src/assets/img/queenBlackIcon.svg" alt="Black queen 2D icon">
</a>
<a href="#home" class="logo">
<img src="src/assets/img/LOGO.svg" alt="Logo for the videogame hail to the queen">
</a>
<a class="navbarAudio">
<i class="material-icons">play_arrow</i>
<audio>
<source src="src/assets/audio/Orpheus.mp3" type="audio/mpeg">
<source src="src/assets/audio/errorSound.mp3">
</audio>
</a>
</nav>
</section>
<a class="floatingMenuIcon">
<img class="navbarMenuIcon" src="src/assets/img/queenRedIcon.svg" alt="Black queen 2D icon">
</a>
<!-- Menú -->
<section class="menu">
<div class="menuOptions">
<a id="homeText" href="#home" class="menuText">START</a>
<a id="charText" href="#characters" class="menuText">CHARACTERS</a>
<a id="worldText" href="#world" class="menuText">WORLD</a>
<a id="extraText" href="#extra" class="menuText">VIDEO</a>
</div>
</section>
<main class="mainStructure">
<!-- Efectito slider guapo a ve que pasa -->
<section>
<div class="sectionCoolSlider">
<div id="left-side" class="side">
<h2 class="title title1">
Be satisfied with giving your life as a <span class="fancy">pawn</span>...
</h2>
<img class="pawnIcon" src="src/assets/img/pawn.svg" alt="an icon of a vector pawn">
</div>
<div id="right-side" class="side">
<h2 class="title title2">
...Or give your life to be a <span class="fancy">queen</span>
</h2>
<img class="queenIcon" src="src/assets/img/queen.svg" alt="an icon of a vector queen">
</div>
</div>
</section>
<!-- Personajes con cartas y sonido -->
<section id="characters">
<section class="cardSection">
<h1 class="cardSectionHeader hidden">Know the pieces</h1>
<div class="cardSectionContainer">
<div class="cardSectionText">
Born as a lowly pawn, you yearned for more.
With a fierce determination burning in your heart,
you will set out on a quest to become more than just a
pawn on the board. Your journey will be long and
fraught with danger, but you will stop at nothing
to reach the other end of the board
and become a queen...
</div>
<div id="pawnCard" class="cardSectionCard hidden">
<div class="cardSectionInnerBox">
<div class="cardSectionCardFront">
<img src="src/assets/img/pawnCard.svg" alt="Backface of a card with a pawn icon in the center">
</div>
<div class="cardSectionCardBack">
<img src="src/assets/img/pawnProtagonist.svg" alt="Topface of a card that shows a pawn vector character">
</div>
</div>
</div>
<audio id="evilLaughAudio">
<source src="src/assets/audio/EvilKnightLaugh.mp3" type="audio/mpeg">
<source src="src/assets/audio/errorSound.mp3">
</audio>
</div>
<div class="cardSectionContainer">
<div id="knightCard" class="cardSectionCard hidden">
<div class="cardSectionInnerBox">
<div class="cardSectionCardFront">
<img src="src/assets/img/knightCard.svg" alt="Backface of a card with a knight icon in the center">
</div>
<div class="cardSectionCardBack">
<img src="src/assets/img/knight.svg" alt="Frontface of a card with a black knight with evil look">
</div>
</div>
</div>
<div id="world" class="cardSectionText">
In the shadows of the board, the Black Knight awaits.
With his sleek, midnight coat and piercing eyes,
he is a force to be reckoned with.
His loyalty lies with the queen of the black pieces,
and he will not rest until he has fulfilled his mission
of defend her and her kingdom.
</div>
<audio id="evilKnightAudio">
<source src="src/assets/audio/EvilKnightRoar.mp3" type="audio/mpeg">
<source src="src/assets/audio/errorSound.mp3">
</audio>
</div>
</section>
</section>
<!-- Carrusel con los escenarios -->
<section class="scenarioSection">
<h1 class="cardSectionHeader hidden">Acknowledge the board</h1>
<div class="scenarioSectionCarousel hidden">
<img src="src/assets/img/torreBG4.png"
alt="Image of an ruined scenario with a rook as a ruin tower"
>
<img src="src/assets/img/SegundoEscenario.png"
alt="Image of an scenario of a catedral with a sunset"
>
<img src="src/assets/img/escenario1.3.0.jpg"
alt="Image of an scenario with a great queen representing a royal tower"
>
</div>
<p id="extra" class="scenarioSectionText hidden">
Discover the kingdoms of the chessboard, each with their own unique culture and history.
From the verdant fields of the white pawns to the shadowy corners of the black knights,
the board is a world waiting to be explored.
</p>
</section>
<!-- Video de referencia -->
<section class="videoSection">
<h1 class="cardSectionHeader hidden">Based on the art of "Patapon"</h1>
<video src="src/assets/img/patapon.mp4" class=" video hidden" controls>
</video>
</section>
</main>
</body>
<footer class="footer">
2023 - Christian Romero Oliva
<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
<img alt="Licencia de Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" />
</a>
</footer>
</html>