-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
276 lines (276 loc) · 26.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
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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="keywords" content="goldfish, gfk, goldfishkingdom, goldfish kingdom, gold fish, gold fish kingdom, fish, kingdom">
<meta name="subject" content="Entertainment">
<meta name="classification" content="Entertainment">
<meta name="category" content="Entertainment">
<meta name="topic" content="Entertainment">
<meta name="author" content="OftenGuy">
<meta name="copyright" content="OftenGuy">
<meta name="designer" content="OftenGuy">
<meta name="summary" content="Goldfish Kingdom is an upcoming FlipaClip-animated little-kids series about all kinds of goldfish.">
<meta name="og:site_name" content="Goldfish Kingdom">
<meta name="og:image" href="meta/GoldfishKingdomWebsiteIcon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="yellow">
<meta name="msapplication-navbutton-color" content="orange">
<meta name="application-name" content="Goldfish Kingdom">
<meta name="msapplication-tooltip" content="Goldfish Kingdom">
<link rel="icon" href="assets/images/icons/GoldfishKingdomWebsiteIcon.png">
<link rel="shortcut icon" href="assets/images/icons/GoldfishKingdomWebsiteIcon.png">
<link rel="apple-touch-icon" href="assets/images/icons/GoldfishKingdomWebsiteIcon.png">
<link rel="apple-touch-startup-image" href="assets/images/icons/GoldfishKingdomWebsiteIcon.png">
<link rel="fluid-icon" href="assets/images/icons/GoldfishKingdomWebsiteIcon.png">
<title>Goldfish Kingdom</title>
</head>
<body style="background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfe8qjj-6acd84c4-731b-4e2e-9e22-71e60598a7aa.jpg/v1/fill/w_1192,h_670,q_70,strp/goldfish_kingdom___backgrounds___outside_by_oftenartist_dfe8qjj-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzIwIiwicGF0aCI6IlwvZlwvN2RjMTM5MDgtYzc4MC00ZjZlLThhMDEtMzZhNDRmYzM0YjAzXC9kZmU4cWpqLTZhY2Q4NGM0LTczMWItNGUyZS05ZTIyLTcxZTYwNTk4YTdhYS5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.irDCnqZFMlBBX7Wv3SwWbIzlSDaX_YKPqLWQm0aongs'); background-repeat: no-repeat; background-size: 100% 101%;">
<link rel="stylesheet" href="css/style.css">
<main id="MainContent">
<header class="MainHeader">
<a id="TODOPutLogoHereInsteadOfText" href="#" title="Goldfish Kingdom"><h1><div class="Logo"><div id="BittyBitSpace1"></div>Goldfish<div id="BittyBitSpace2"></div>Kingdom<div id="BittyBitSpace3"></div></div></h1></a>
</header>
</main><div id="MainContentFader"></div><br><br><br>
<div class="Row">
<div class="Side">
<h2 style="font-size: 35px;">Content</h2><br><hr><br>
<a title="Home" href="#Home" onclick="home()"><button style="width: 150px; height: 50px; font-size: 30px; cursor: pointer;" class="ContentButton" id="HomeButton">Home</button></a><br><br>
<a title="Characters" href="#Characters" onclick="characters()"><button style="width: 250px; height: 50px; font-size: 30px; cursor: pointer;" class="ContentButton" id="CharactersButton">Characters</button></a><br><br>
<a title="About" href="#About" onclick="about()"><button style="width: 150px; height: 50px; font-size: 30px; cursor: pointer;" class="ContentButton" id="AboutButton">About</button></a>
</div>
<div class="Main">
<div id="HomeContent">
<h3 style="font-size: 25px;">Home</h3><br><hr><br>
<p>Welcome to <b>Goldfish Kingdom!</b><br><br><b>Goldfish Kingdom</b> is an upcoming FlipaClip-animated little-kids series about all kinds of goldfish.<br><br>This website <i>(as of right now)</i> is an early introduction to <b>Goldfish Kingdom</b> while you wait. <b><i>(see more in <a href="#About" onclick="about()" title="About">About</a>)</i></b></p>
</div>
<div id="CharactersContent">
<h3 style="font-size: 25px;">Characters</h3><br><hr><br>
<p>Check out some the characters of the upcoming series!</p><br><br>
<a href="#Characters#Finn" title="Finn" onclick="finn()"><button class="CharacterButton" id="FinnButton" style="cursor: pointer;">Finn</button></a>
<a href="#Characters#Gill" title="Gill" onclick="gill()"><button class="CharacterButton" id="GillButton" style="cursor: pointer;">Gill</button></a>
<a href="#Characters#Mom" title="Mom" onclick="mom()"><button class="CharacterButton" id="MomButton" style="cursor: pointer;">Mom</button></a>
<a href="#Characters#Dad" title="Dad" onclick="dad()"><button class="CharacterButton" id="DadButton" style="cursor: pointer;">Dad</button></a>
<a href="#Characters#Brooke" title="Brooke" onclick="brooke()"><button class="CharacterButton" id="BrookeButton" style="cursor: pointer; width: 150px;">Brooke</button></a>
<a href="#Characters#XTreme" title="X-Treme" onclick="xtreme()"><button class="CharacterButton" id="XTremeButton" style="cursor: pointer; width: 150px;">X-Treme</button></a>
<a href="#Characters#Gilbert" title="Gilbert" onclick="gilbert()"><button class="CharacterButton" id="GilbertButton" style="cursor: pointer; width: 150px;">Gilbert</button></a>
<a href="#Characters#Coral" title="Coral" onclick="coral()"><button class="CharacterButton" id="CoralButton" style="cursor: pointer; width: 130px;">Coral</button></a>
<a href="#Characters#Pegasus" title="Pegasus" onclick="pegasus()"><button class="CharacterButton" id="PegasusButton" style="cursor: pointer; width: 160px;">Pegasus</button></a><br><br><hr><br><br>
<div id="FinnContent">
<a href="https://deviantart.com/oftenartist/art/Goldfish-Kingdom-Characters-Finn-930912071" title="Finn"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfe8ocn-f8ffc4a9-f545-415a-9dd0-81d395c997fe.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdkYzEzOTA4LWM3ODAtNGY2ZS04YTAxLTM2YTQ0ZmMzNGIwM1wvZGZlOG9jbi1mOGZmYzRhOS1mNTQ1LTQxNWEtOWRkMC04MWQzOTVjOTk3ZmUuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.BhmYBhOsEXMWb0b2sar0nSVsfpcyxaWnNmZ16jfcZJ0" width="250" height="200"></a><br><br>
<p><b>Age:</b> 10<br><b>Status:</b> Main Character</p>
</div>
<div id="GillContent">
<a href="https://deviantart.com/oftenartist/art/Goldfish-Kingdom-Characters-Gill-930912715" title="Gill"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfe8ouj-3f55e978-49d4-4af1-9241-0932cab9e1bc.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdkYzEzOTA4LWM3ODAtNGY2ZS04YTAxLTM2YTQ0ZmMzNGIwM1wvZGZlOG91ai0zZjU1ZTk3OC00OWQ0LTRhZjEtOTI0MS0wOTMyY2FiOWUxYmMuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xsmobFRkCckOdaq5AYiaWCwR5OICJfLy2HC5ZaL0YL8" width="250" height="200"></a><br><br>
<p><b>Age:</b> 5<br><b>Status:</b> Finn's Little Brother</p>
</div>
<div id="MomContent">
<a href="https://deviantart.com/oftenartist/art/Goldfish-Kingdom-Characters-Mom-930912836" title="Mom"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfe8oxw-e3dbd301-f91b-4cab-bd72-b4d9b35fbbe2.jpg/v1/fill/w_873,h_618,q_75,strp/goldfish_kingdom___characters___mom_by_oftenartist_dfe8oxw-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NjE4IiwicGF0aCI6IlwvZlwvN2RjMTM5MDgtYzc4MC00ZjZlLThhMDEtMzZhNDRmYzM0YjAzXC9kZmU4b3h3LWUzZGJkMzAxLWY5MWItNGNhYi1iZDcyLWI0ZDliMzVmYmJlMi5qcGciLCJ3aWR0aCI6Ijw9ODczIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0._lkmGTPQ5Da1UeNDsLdNYQ0h7dLd_9-fTaGpEZRkOe4" width="250" height="200"></a><br><br>
<p><b>Age:</b> 30<br><b>Status:</b> Finn & Gill's Mom</p>
</div>
<div id="DadContent">
<a href="https://deviantart.com/oftenartist/art/Goldfish-Kingdom-Characters-Mom-930912836" title="Dad"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfe8pg8-80860187-0a28-41d2-9d8c-60827413454f.jpg/v1/fill/w_1090,h_714,q_75,strp/goldfish_kingdom___characters___dad_by_oftenartist_dfe8pg8-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzE0IiwicGF0aCI6IlwvZlwvN2RjMTM5MDgtYzc4MC00ZjZlLThhMDEtMzZhNDRmYzM0YjAzXC9kZmU4cGc4LTgwODYwMTg3LTBhMjgtNDFkMi05ZDhjLTYwODI3NDEzNDU0Zi5qcGciLCJ3aWR0aCI6Ijw9MTA5MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.v75Bkz5O_BEhYosDwOKKRRg9dCq9O5Pq99s_rCn3_hc" width="275" height="200"></a><br><br>
<p><b>Age:</b> 40<br><b>Status:</b> Finn & Gill's Dad</p>
</div>
<div id="BrookeContent">
<a href="https://deviantart.com/oftenartist/art/Goldfish-Kingdom-Characters-Brooke-930913815" title="Brooke"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfe8pp3-9d3e6684-ee2e-4ab8-a9ed-19922a8b3030.jpg/v1/fill/w_941,h_492,q_75,strp/goldfish_kingdom___characters___brooke_by_oftenartist_dfe8pp3-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NDkyIiwicGF0aCI6IlwvZlwvN2RjMTM5MDgtYzc4MC00ZjZlLThhMDEtMzZhNDRmYzM0YjAzXC9kZmU4cHAzLTlkM2U2Njg0LWVlMmUtNGFiOC1hOWVkLTE5OTIyYThiMzAzMC5qcGciLCJ3aWR0aCI6Ijw9OTQxIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.0K59l5lCygO1uowXIRdKieFEbqDJC7OMdTvaPpWbjYA" width="350" height="200"></a><br><br>
<p><b>Age:</b> 10<br><b>Status:</b> One Of Finn's Friends</p>
</div>
<div id="XTremeContent">
<a href="https://deviantart.com/oftenartist/art/Goldfish-Kingdom-Characters-X-Treme-930913950" title="X-Treme"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfe8psu-bc1c213c-9464-4548-968b-0efca6d87b3e.jpg/v1/fill/w_881,h_569,q_75,strp/goldfish_kingdom___characters___x_treme_by_oftenartist_dfe8psu-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NTY5IiwicGF0aCI6IlwvZlwvN2RjMTM5MDgtYzc4MC00ZjZlLThhMDEtMzZhNDRmYzM0YjAzXC9kZmU4cHN1LWJjMWMyMTNjLTk0NjQtNDU0OC05NjhiLTBlZmNhNmQ4N2IzZS5qcGciLCJ3aWR0aCI6Ijw9ODgxIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.d_0bKXonf5WBCM2FzWesFQG83VAe-SZvhrX5i8qjN_U" width="300" height="200"></a><br><br>
<p><b>Age:</b> 10<br><b>Status:</b> One Of Finn's Friends</p>
</div>
<div id="GilbertContent">
<a href="https://deviantart.com/oftenartist/art/Goldfish-Kingdom-Characters-Gilbert-930914267" title="Gilbert"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfe8q1n-d12c67b2-7c15-463d-af74-f334d0b0f137.jpg/v1/fill/w_841,h_598,q_75,strp/goldfish_kingdom___characters___gilbert_by_oftenartist_dfe8q1n-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NTk4IiwicGF0aCI6IlwvZlwvN2RjMTM5MDgtYzc4MC00ZjZlLThhMDEtMzZhNDRmYzM0YjAzXC9kZmU4cTFuLWQxMmM2N2IyLTdjMTUtNDYzZC1hZjc0LWYzMzRkMGIwZjEzNy5qcGciLCJ3aWR0aCI6Ijw9ODQxIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.aBS2TuT3G2B4Q5-jfAiYca0IT5qpSCNmATTo5j6WOKA" width="250" height="200"></a><br><br>
<p><b>Age:</b> 10<br><b>Status:</b> One Of Finn's Friends</p>
</div>
<div id="CoralContent">
<a href="https://deviantart.com/oftenartist/art/Goldfish-Kingdom-Characters-Coral-930914512" title="Coral"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfe8q8g-632007f8-c11f-4a9a-b371-7d04a85a0064.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdkYzEzOTA4LWM3ODAtNGY2ZS04YTAxLTM2YTQ0ZmMzNGIwM1wvZGZlOHE4Zy02MzIwMDdmOC1jMTFmLTRhOWEtYjM3MS03ZDA0YTg1YTAwNjQuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xjmOBIQqs_Dvv3jzz3FMOaZDDtO1sPDDsLfvuWhWEhw" width="250" height="200"></a><br><br>
<p><b>Age:</b> 10<br><b>Status:</b> One Of Finn's Friends</p>
</div>
<div id="PegasusContent">
<a href="https://deviantart.com/oftenartist/art/Goldfish-Kingdom-Characters-Pegasus-930914781" title="Pegasus"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfe8qfx-986b5507-2529-4368-9eaa-8d690d321948.jpg/v1/fill/w_912,h_693,q_75,strp/goldfish_kingdom___characters___pegasus_by_oftenartist_dfe8qfx-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NjkzIiwicGF0aCI6IlwvZlwvN2RjMTM5MDgtYzc4MC00ZjZlLThhMDEtMzZhNDRmYzM0YjAzXC9kZmU4cWZ4LTk4NmI1NTA3LTI1MjktNDM2OC05ZWFhLThkNjkwZDMyMTk0OC5qcGciLCJ3aWR0aCI6Ijw9OTEyIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.sBQ-BcihQZWJZ70tCLpciIkB1UbfcL5ztnB1ekMPjew" width="250" height="200"></a><br><br>
<p><b>Age:</b> 35<br><b>Status:</b> Finn & His Friends' School Teacher</p>
</div>
</div>
<div id="AboutContent">
<h3 style="font-size: 25px;">About</h3><br><hr><br>
<p>Like <b><a href="#Home" onclick="home()" title="Home">Home</a></b> says, <b>Goldfish Kingdom</b> is an <b><i>upcoming</i></b> series about all kinds of goldfish, meaning the series has not been exactly <b><i>released</i></b> yet. But you've still gotten early access to <b><i>knowing it while you wait.</i></b><br><br><b>NOTE: "Goldfish Kingdom"</b> is a parody of the goldfish they show<i>(ed)</i> in those TV commercials back in the day, so please don't rant on it, OK?</p>
</div>
</div>
<button style="background: #1C1C1C; width: 60px; height: 50px; border-radius: 10%; font-size: 25px; position: absolute; top: 80%; left: 50%; transform: translate(-50%, 0%); cursor: pointer;" title="Dark Theme" onclick="darkTheme()" id="DarkTheme">🌙</button>
<button style="background: #E3E3E3; width: 60px; height: 50px; border-radius: 10%; font-size: 25px; position: absolute; top: 80%; left: 50%; transform: translate(-50%, 0%); cursor: pointer;" title="Light Theme" onclick="lightTheme()" id="LightTheme">☀️</button>
<div class="Footer">
<h2><a title="OftenGuy" href="https://oftenguy.github.io" style="text-decoration: none;">© OftenGuy ©</a></h2>
</div>
</div>
<script>
document.getElementById("HomeButton").style.background = "#B3B300";
document.getElementById("HomeButton").style.borderColor = "#808000";
document.getElementById("HomeContent").style.display = "block";
document.getElementById("CharactersContent").style.display = "none";
document.getElementById("AboutContent").style.display = "none";
document.getElementById("FinnContent").style.display = "none";
document.getElementById("GillContent").style.display = "none";
document.getElementById("MomContent").style.display = "none";
document.getElementById("DadContent").style.display = "none";
document.getElementById("BrookeContent").style.display = "none";
document.getElementById("XTremeContent").style.display = "none";
document.getElementById("GilbertContent").style.display = "none";
document.getElementById("CoralContent").style.display = "none";
document.getElementById("PegasusContent").style.display = "none";
document.getElementById("DarkTheme").style.display = "block";
document.getElementById("LightTheme").style.display = "none";
function home() {
document.getElementById("HomeButton").style.background = "#B3B300";
document.getElementById("HomeButton").style.borderColor = "#808000";
document.getElementById("CharactersButton").style.background = "yellow";
document.getElementById("CharactersButton").style.borderColor = "#CCCC00";
document.getElementById("AboutButton").style.background = "yellow";
document.getElementById("AboutButton").style.borderColor = "#CCCC00";
document.getElementById("HomeContent").style.display = "block";
document.getElementById("CharactersContent").style.display = "none";
document.getElementById("AboutContent").style.display = "none";
}
function characters() {
document.getElementById("HomeButton").style.background = "yellow";
document.getElementById("HomeButton").style.borderColor = "#CCCC00";
document.getElementById("CharactersButton").style.background = "#B3B300";
document.getElementById("CharactersButton").style.borderColor = "#808000";
document.getElementById("AboutButton").style.background = "yellow";
document.getElementById("AboutButton").style.borderColor = "#CCCC00";
document.getElementById("HomeContent").style.display = "none";
document.getElementById("CharactersContent").style.display = "block";
document.getElementById("AboutContent").style.display = "none";
}
function about() {
document.getElementById("HomeButton").style.background = "yellow";
document.getElementById("HomeButton").style.borderColor = "#CCCC00";
document.getElementById("CharactersButton").style.background = "yellow";
document.getElementById("CharactersButton").style.borderColor = "#CCCC00";
document.getElementById("AboutButton").style.background = "#B3B300";
document.getElementById("AboutButton").style.borderColor = "#808000";
document.getElementById("HomeContent").style.display = "none";
document.getElementById("CharactersContent").style.display = "none";
document.getElementById("AboutContent").style.display = "block";
}
function finn() {
document.getElementById("FinnContent").style.display = "block";
document.getElementById("GillContent").style.display = "none";
document.getElementById("MomContent").style.display = "none";
document.getElementById("DadContent").style.display = "none";
document.getElementById("BrookeContent").style.display = "none";
document.getElementById("XTremeContent").style.display = "none";
document.getElementById("GilbertContent").style.display = "none";
document.getElementById("CoralContent").style.display = "none";
document.getElementById("PegasusContent").style.display = "none";
}
function gill() {
document.getElementById("FinnContent").style.display = "none";
document.getElementById("GillContent").style.display = "block";
document.getElementById("MomContent").style.display = "none";
document.getElementById("DadContent").style.display = "none";
document.getElementById("BrookeContent").style.display = "none";
document.getElementById("XTremeContent").style.display = "none";
document.getElementById("GilbertContent").style.display = "none";
document.getElementById("CoralContent").style.display = "none";
document.getElementById("PegasusContent").style.display = "none";
}
function mom() {
document.getElementById("FinnContent").style.display = "none";
document.getElementById("GillContent").style.display = "none";
document.getElementById("MomContent").style.display = "block";
document.getElementById("DadContent").style.display = "none";
document.getElementById("BrookeContent").style.display = "none";
document.getElementById("XTremeContent").style.display = "none";
document.getElementById("GilbertContent").style.display = "none";
document.getElementById("CoralContent").style.display = "none";
document.getElementById("PegasusContent").style.display = "none";
}
function dad() {
document.getElementById("FinnContent").style.display = "none";
document.getElementById("GillContent").style.display = "none";
document.getElementById("MomContent").style.display = "none";
document.getElementById("DadContent").style.display = "block";
document.getElementById("BrookeContent").style.display = "none";
document.getElementById("XTremeContent").style.display = "none";
document.getElementById("GilbertContent").style.display = "none";
document.getElementById("CoralContent").style.display = "none";
document.getElementById("PegasusContent").style.display = "none";
}
function brooke() {
document.getElementById("FinnContent").style.display = "none";
document.getElementById("GillContent").style.display = "none";
document.getElementById("MomContent").style.display = "none";
document.getElementById("DadContent").style.display = "none";
document.getElementById("BrookeContent").style.display = "block";
document.getElementById("XTremeContent").style.display = "none";
document.getElementById("GilbertContent").style.display = "none";
document.getElementById("CoralContent").style.display = "none";
document.getElementById("PegasusContent").style.display = "none";
}
function xtreme() {
document.getElementById("FinnContent").style.display = "none";
document.getElementById("GillContent").style.display = "none";
document.getElementById("MomContent").style.display = "none";
document.getElementById("DadContent").style.display = "none";
document.getElementById("BrookeContent").style.display = "none";
document.getElementById("XTremeContent").style.display = "block";
document.getElementById("GilbertContent").style.display = "none";
document.getElementById("CoralContent").style.display = "none";
document.getElementById("PegasusContent").style.display = "none";
}
function gilbert() {
document.getElementById("FinnContent").style.display = "none";
document.getElementById("GillContent").style.display = "none";
document.getElementById("MomContent").style.display = "none";
document.getElementById("DadContent").style.display = "none";
document.getElementById("BrookeContent").style.display = "none";
document.getElementById("XTremeContent").style.display = "none";
document.getElementById("GilbertContent").style.display = "block";
document.getElementById("CoralContent").style.display = "none";
document.getElementById("PegasusContent").style.display = "none";
}
function coral() {
document.getElementById("FinnContent").style.display = "none";
document.getElementById("GillContent").style.display = "none";
document.getElementById("MomContent").style.display = "none";
document.getElementById("DadContent").style.display = "none";
document.getElementById("BrookeContent").style.display = "none";
document.getElementById("XTremeContent").style.display = "none";
document.getElementById("GilbertContent").style.display = "none";
document.getElementById("CoralContent").style.display = "block";
document.getElementById("PegasusContent").style.display = "none";
}
function pegasus() {
document.getElementById("FinnContent").style.display = "none";
document.getElementById("GillContent").style.display = "none";
document.getElementById("MomContent").style.display = "none";
document.getElementById("DadContent").style.display = "none";
document.getElementById("BrookeContent").style.display = "none";
document.getElementById("XTremeContent").style.display = "none";
document.getElementById("GilbertContent").style.display = "none";
document.getElementById("CoralContent").style.display = "none";
document.getElementById("PegasusContent").style.display = "block";
}
function darkTheme() {
document.getElementById("DarkTheme").style.display = "none";
document.getElementById("LightTheme").style.display = "block";
document.body.style.backgroundImage = "url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfg1e0t-29641225-f784-4150-bb78-c2b4c5ba66e6.jpg/v1/fill/w_1198,h_667,q_70,strp/goldfish_kingdom___backgrounds___outside__night__by_oftenartist_dfg1e0t-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzEzIiwicGF0aCI6IlwvZlwvN2RjMTM5MDgtYzc4MC00ZjZlLThhMDEtMzZhNDRmYzM0YjAzXC9kZmcxZTB0LTI5NjQxMjI1LWY3ODQtNDE1MC1iYjc4LWMyYjRjNWJhNjZlNi5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.hZUcZxr-ZTepcZrmAY2EJNKAkS1QpeL4mNjSC_32niU')";
document.getElementsByClassName("Side")[0].style.backgroundColor = "#333333";
document.getElementsByClassName("Side")[0].style.color = "#FFFFFF";
document.getElementsByClassName("Main")[0].style.backgroundColor = "#000000";
document.getElementsByClassName("Main")[0].style.color = "#FFFFFF";
}
function lightTheme() {
document.getElementById("DarkTheme").style.display = "block";
document.getElementById("LightTheme").style.display = "none";
document.body.style.backgroundImage = "url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7dc13908-c780-4f6e-8a01-36a44fc34b03/dfe8qjj-6acd84c4-731b-4e2e-9e22-71e60598a7aa.jpg/v1/fill/w_1192,h_670,q_70,strp/goldfish_kingdom___backgrounds___outside_by_oftenartist_dfe8qjj-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzIwIiwicGF0aCI6IlwvZlwvN2RjMTM5MDgtYzc4MC00ZjZlLThhMDEtMzZhNDRmYzM0YjAzXC9kZmU4cWpqLTZhY2Q4NGM0LTczMWItNGUyZS05ZTIyLTcxZTYwNTk4YTdhYS5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.irDCnqZFMlBBX7Wv3SwWbIzlSDaX_YKPqLWQm0aongs')";
document.getElementsByClassName("Side")[0].style.backgroundColor = "#F1F1F1";
document.getElementsByClassName("Side")[0].style.color = "#000000";
document.getElementsByClassName("Main")[0].style.backgroundColor = "#FFFFFF";
document.getElementsByClassName("Main")[0].style.color = "#000000";
}
</script>
</body>
</html>