-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
219 lines (207 loc) · 9.96 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
<!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">
<title>The Voyage to Nybor continues</title>
</head>
<body>
<header>
<div class="banner-container">
<img src="images/banner.jpg" alt="Banner Image">
<div class="title-container">
<h1 class="title">January</h1>
<h2 class="subtitle">the voyage to Nybor continues</h2>
</div>
</div>
<nav>
<a href="index.html#who">Who?</a>
<a href="index.html#what">What?</a>
<a href="index.html#where">Where?</a>
<a href="index.html#why">Why?</a>
</nav>
<div class="audio-player">
<audio id="myAudio" loop autoplay>
<source src="audio\the voyage continues.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<button id="playPauseBtn">Pause</button>
<input type="range" id="volumeControl" value="50" max="100">
</div>
</header>
<main>
<section>
<div class="Center">
<h3 class="subtitle">
Story so far...
</h3>
<p class="subtitle2 article-container">After watching their friends die painfully fighting Magnimarian gangleaders, in an attempt to make the neighborhood of one party member's family safe. Was it worth it? No one is really sure yet. Gorden and Milo part ways with Babushka who decides she needs to stay behind and watch over things for while. The pair steel themselves for the journey ahead they signed up for. A voyage to the far away town Nybor. Deep within a heavily forested region report of ghouls haunting the shadows has drawn out adventurers and monster slayers. But could some of these monster hunters be monsters themselves? Quickly becoming befriending a strange wizard named Savos, Milo and Gorden embark the vessel bound for Nybor along the winding river. They encounter several other curious travelers. Discovering some of these people have a history with one another. Can this trio survive the journey to Nybor? and what awaits them once there? </p>
</div>
</section>
<section class="AlignC">
<div id="who" class="">
<h2 class="title">
Who?
</h2>
</div>
<h3 class="subtitle">The dead</h3>
<div class="twoColumn">
<div>
<div class="leftColumn">
<h4 class="subtitle2">Whitt Karackformer gang leader in Magnimar</h4>
<img class="imageround" src="images\Criminal Leader Whitt Karack.png" alt="gangleder" >
</div>
<div>
<h4 class="subtitle2">Remi Farjoud, former gang lieutenant in Magnimar</h4>
<img class="imageround" src="images\Criminal Mage, Remi Farjoud.png" alt="gang mage" >
</div>
</div>
<div class="rightColumn">
<div>
<h4 class="subtitle2">Piltrafn the Bard</h4>
<img class="imageround" src="images\Piltrafn the Bard.png" alt="child with guitar" >
</div>
<div>
<h4 class="subtitle2">Pavel the Palidan</h4>
<img class="imageround" src="images\Pavel Token.png" alt="halforc with shield" >
</div>
</div>
</div>
<div>
<h3 class="subtitle">The not yet dead</h3>
</div>
<div class="twoColumn">
<div class="leftColumn">
<div>
<h4 class="subtitle2">Gorden the Barbarian</h4>
<img class="imageround" src="images\GORDEN.png" alt="large man with axe" >
</div>
<div>
<h4 class="subtitle2">Milo Underbough the Ranger</h4>
<img class="imageround" src="images\Milo Underbough Token.png" alt="halfling with Xbow" >
</div>
<div>
<h4 class="subtitle2">Babushka the Barbarian</h4>
<img class="imageround" src="images\Babushka the Fearless token.png" alt="woman with warhammer" >
</div>
<div>
<h4 class="subtitle2">Savos the Wizard</h4>
<img class="imageround" src="images\savos.png" alt="oldman" >
</div>
<div>
<h4 class="subtitle2">Allen Nance</h4>
<a href="AllenN.html">
<img class="imageroundlink" src="images\Allen Nance.png" alt="oldman" >
</a>
</div>
<div>
<h4 class="subtitle2">Lady Katherine Cobbler of Galduria</h4>
<a href="ladyKatherineC.html">
<img class="imageroundlink" src="images\Lady Katherine Cobbler of Galduria.png" alt="oldman" >
</a>
</div>
<div>
<h4 class="subtitle2">Myrtha Plywyn</h4>
<a href="myrthaP.html">
<img class="imageroundlink" src="images\Myrtha Plywyn.png" alt="oldman" >
</a>
</div>
<div>
<h4 class="subtitle2">Sir Terrance Lucas of Magnimar</h4>
<a href="sirTerranceL.html">
<img class="imageroundlink" src="images\Sir Terrance Lucas of Magnimar.png" alt="oldman" >
</a>
</div>
</div>
<div class="rightColumn">
<div>
<h4 class="subtitle2">Huebert Tyme of Magnimar</h4>
<a href="huebertT.html">
<img class="imageroundlink" src="images\Huebert Tyme Court Wizard of Magnimar.png" alt="oldman" >
</a>
</div>
<div>
<h4 class="subtitle2">Ross Hornby of Nybor</h4>
<a href="rossH.html">
<img class="imageroundlink" src="images\Ross Hornby of Nybor.png" alt="oldman" >
</a>
</div>
<div>
<h4 class="subtitle2">Sir Alexander Mastek of Magnimar</h4>
<img class="imageround" src="images\Sir Alexsander Mastek of Magnimar.png" alt="oldman" >
</div>
<div>
<h4 class="subtitle2">Piotr Klewslewski</h4>
<a href="piotrK.html">
<img class="imageroundlink" src="images\Piotr Klewslewski.png" alt="oldman" >
</a>
</div>
<div>
<h4 class="subtitle2">Saeed Jalabi</h4>
<a href="saeedJ.html">
<img class="imageroundlink" src="images\Saeed Jalabi.png" alt="oldman" >
</a>
</div>
<div>
<h4 class="subtitle2">Sir Harald Iskander of Nybor</h4>
<a href="sirHaraldI.html">
<img class="imageroundlink" src="images\Sir Harald Iskander of Nybor.png" alt="oldman" >
</a>
</div>
<div>
<h4 class="subtitle2">Sir Rebecca Crytrite of Turtleback Ferry</h4>
<a href="sirRebeccaC.html">
<img class="imageroundlink" src="images\Sir Rebecca Crytrite of Turtleback Ferry.png" alt="oldman" >
</a>
</div>
<div>
<h4 class="subtitle2">Yelena Jacobs of Sandpoint</h4>
<a href="yelenaJ.html">
<img class="imageroundlink" src="images\Yelena Jacobs of Sandpoint.png" alt="oldman" >
</a>
</div>
</div>
</div>
</section>
<section>
<div id="what" class="">
<h3 class="subtitle">
What?
</h3>
<p class="subtitle2 article-container">
We will continue the adventure and it will be up to the players to try and survive the voyage. May the gods protect you from the waters, the forest, and all that resides within.
</p>
</div>
</section>
<section>
<div id="where" class="">
<h3 class="subtitle">
Where?
</h3>
<p class="subtitle2">
We will continue the adventure on the roll20 website and use our discord channel.
</p>
</div>
</section>
<section>
<div id="why"class="">
<h3 class="subtitle">
Why?
</h3>
<p class="subtitle2">
The wilds demand blood
</p>
</div>
</section>
</main>
<footer>
<div class="subtitle2">
<p class="Center">
made by Paul Czarnecki JR
</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>