MichaelaCastle.github.io/Adam.html at main · MichaelaCastle/MichaelaCastle.github.io · GitHub

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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
<!DOCTYPE html>
<html lang="en" data-selected-theme="alt">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Adam Zondervan</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@400;500;600;700;800&family=Spectral:wght@200;300;400;600;700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/Favicons/Adam512.png" sizes="512x512">
    <link rel="icon" type="image/png" href="images/Favicons/Adam256.png" sizes="256x256">
    <link rel="icon" type="image/png" href="images/Favicons/Adam180.png" sizes="180x180">
    <link rel="icon" type="image/png" href="images/Favicons/Adam128.png" sizes="128x128">
    <link rel="icon" type="image/png" href="images/Favicons/Adam96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="images/Favicons/Adam32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="images/Favicons/Adam16.png" sizes="16x16">
    <style>
        :root {
            --hue: 40;
            --hue1: 40deg;
            --hue2: 55deg;
            --angle: 160deg;
            --middleHR: "✿";
            --middleImageHR: "༺♥༻❀༺♥༻";
            --middleLength: 7;
            --middleAddition: "──";
            --aDecor: "➽─❥ ";

            /* --bodyText: "Baloo Bhaijaan 2", serif;
            --headingText: "Expletus Sans", serif;
            --headingTextAdjustment: 1.5rem; */
        }
        .PersonalityFlexbox{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        details{
            flex: 1 1 auto;
            width: clamp(40%, 50%, 90%);
        }
        .content{
            border: 3px var(--h2-0-8) solid;
            border-top: 0px;
            border-radius: 0px 0px 10px 10px;
        }
        @media (max-width: 950px){
            details{
                width: clamp(45%, 70%, 100%);
            }
        }
        @media (max-width: 650px){
            details{
                width: clamp(45%, 70%, 100%);
            }
            #Personality{
                padding: 0 0rem 0 0rem;
            }
            #Personality p:not(details p){
                padding: 0 5rem 0 5rem;
            }
        }
        @media (max-width: 529px){
            #Personality p:not(details p){
                padding: 0 3rem 0 3rem;
            }
        }
    </style>
    <link rel="stylesheet" href="CSS/Defaults.css">
    <link rel="stylesheet" href="CSS/Wiki.css">
    <link rel="stylesheet" href="CSS/HrCSS.css">
    <script src="nav.js"></script>
    <script>
        // let current = 0;
        // let names = ["  Cave In   -   Owl City  ", "  East To West   -   Casting Crowns  "];
        // let songs = ["Audio/Cave In.ogg", "Audio/East To West.ogg"];
        </script>
    <!-- <script src="Audioplayer.js"></script> -->
</head>
<body>
    <header>
        <div class="navbar">
            <h3 id="SiteName">Prismoria</h3>
            <div class="flex-container">
                <a href="index.html" id="TheParticle">The Particle</a>
                <div class="dropdown">
                    <button class="dropbtn Selected" id="Characters">Characters
                    </button>
                    <div class="dropdown-content">
                        <a href="Jay.html">Jay Star</a>
                        <a href="Jacob.html">Jacob Jackson</a>
                        <a href="Sam.html">Samuel Broteez</a>
                        <a href="Elliot.html">Elliot Evans</a>
                        <a href="River.html">River Lucero</a>
                        <a href="Lucian.html">Lucian Draven</a>
                        <a href="Adam.html">Adam Zondervan</a>
                    </div>
                </div>
                <!-- <a href="SomeStories.html" id="SomeStories">Some Stories</a> -->
                <a href="Updates.html" id="Updates">Site Updates</a>
            </div>
        </div>
    </header>
    <main>
        <h1 class="sectionHeader">Adam Zondervan</h1>
        <h1 class="sectionHeader">Character Sheet</h1>
        <div class="tw">
            <!-- <div class="audio-player">
                <div class="title">
                    <button onclick="playPrev()" class="audioButtons"><i class="fa fas fa-caret-left"></i></button>
                    <span id="SongName">  Mr. Johnson    -    David Reid  </span>
                    <button onclick="playNext()" class="audioButtons"><i class="fa fas fa-caret-right"></i></button>
                </div>
                <div class="controls">
                    <button onclick="playOrPause()" class="audioButtons"><i id="play" class="fa fas fa-play"></i></button>
                    <div class="range">
                        <input type="range" id="player-slider" value="0" aria-valuemax="100"/>
                    </div>
                    <audio preload="auto" onended="playNext()" id="player" src="Audio/Mr. Johnson.mp3" type="audio/mpeg" controls controlsList="nodownload noplaybackrate"></audio>
                </div>
            </div> -->
            <p>╭━━━━━━━━━━━━━━━━╮</p>
            <p>Trigger Warnings</p>
            <p>Not sure</p>
            <p>╰━━━━━━━━━━━━━━━━╯</p>
        </div>
        <div class="sectionLabel">
            <hr>
            <p><b>Contents</b></p>
            <hr>
        </div>
        <p>I. Teaser</p>
        <p>II. Basic info</p>
        <p>III. Health and Abilities</p>
        <p>IV. Appearance</p>
        <p>V. Personality</p>
        <p>VI. Self Perception</p>
        <p>VII. Relations</p>
        <p>VIII. Roleplay Info</p>
        <hr class="ImageTop">
        <img src="images/Adam/Guitar.jpg">
        <p class="quoteCaption">“It's not hard to make someone cry from being upset; it's harder to make someone cry from laughing, and that is my goal.”</p>
        <hr class="ImageBottom">
        <div class="sectionLabel">
            <hr>
            <p><b>Teaser</b></p>
            <hr>
        </div>
        <p id="TeaserText"></p>
        <hr class="ImageTop">
        <img src="images/Adam/Diary.jpg">
        <p class="quoteCaption">“Me? Cheating at connect four? Noooo~ It doesn't say anything about tickling in the rule book!”</p>
        <hr class="ImageBottom">
        <div class="sectionLabel">
            <hr>
            <p><b>Basic Info</b></p>
            <hr>
        </div>
        <section class="info" id="BasicInfo">
            <p class='q'>Birth Name</p>
            <p class='a'>Abagael Zondervan (Fun fact, Dutch don't have middle names. If they had 3 names, it would be 2 first names and 1 last name)</p>
            <p class='q'>Current Name</p>
            <p class='a'>Adam Zondervan</p>
            <div class='br'></div>
            <p class='q'>Birth First Name</p>
            <p class='a'>Abagael</p>
            <p class='q'>Meaning</p>
            <p class='a'>Father of joy</p>
            <div class='br'></div>
            <p class='q'>Current First Name</p>
            <p class='a'>Adam</p>
            <p class='q'>Meaning</p>
            <p class='a'>Red Earth</p>
            <p class='q'>Significance</p>
            <p class='a'>He did not care about the meaning when he chose this name, he just wanted something somewhat close to his birth name</p>
            <div class='br'></div>
            <p class='q'>Last Name</p>
            <p class='a'>Zondervan</p>
            <p class='q'>Meaning</p>
            <p class='a'>Without a surname</p>
            <div class='br'></div>
            <p class='q'>Nicknames</p>
            <p class='a'>Addy</p>
            <div class='br'></div>
            <p class='q'>Biological Gender</p>
            <p class='a'>Female</p>
            <p class='q'>Preferred Gender</p>
            <p class='a'>Male</p>
            <p class='q'>Pronouns</p>
            <p class='a'>He/him</p>
            <div class='br'></div>
            <p class='q'>Sexual Orientation</p>
            <p class='a'>Pansexual</p>
            <p class='q'>Romantic Orientation</p>
            <p class='a'>Panromantic</p>
            <div class='br'></div>
            <p class='q'>Age</p>
            <p class='a'>22 - 23</p>
            <p class='q'>Birthday</p>
            <p class='a'>May 24th</p>
            <p class='q'>Zodiac Sign</p>
            <p class='a'>Gemini</p>
            <div class='br'></div>
            <p class='q'>Occupation</p>
            <p class='a'>Guitarist</p>
            <div class='br'></div>
            <p class='q'>Where they live</p>
            <p class='a'>Prismoria</p>
            <div class='br'></div>
            <p class='q'>Languages</p>
            <p class='a'>Dutch</p>
            <p class='a'>English</p>
            <p class='a'>French</p>
            <p class='a'>Spanish</p>
        </section>
        <hr class="ImageTop">
        <img src="images/Adam/Heart.jpg">
        <p class="quoteCaption">“Laughter is the best medicine”</p>
        <hr class="ImageBottom">
        <div class="sectionLabel">
            <hr>
            <p><b>Health and Abilities</b></p>
            <hr>
        </div>
        <section class="info" id="Health">
            <p class='q'>Physical Illnesses</p>
            <p class='a'>Heart disease</p>
            <p class='q'>Mental Illnesses</p>
            <p class='a'>None</p>
            <div class='br'></div>
            <p class='q'>Triggers</p>
            <p class='a'>None that is known of</p>
            <div class='br'></div>
            <p class='q'>Mutation / Power</p>
            <p class='a'>Wind Manipulation</p>
            <p class='q'>How long have they had it</p>
            <p class='a'>About 7 years</p>
            <p class='q'>How do they use it</p>
            <p class='a'>Shutting doors, picking things up, annoying people</p>
        </section>
        <hr class="ImageTop">
        <img src="images/Adam/HotCocoa.jpg">
        <p class="quoteCaption">“I know I'm cute~”</p>
        <hr class="ImageBottom">
        <div class="sectionLabel">
            <hr>
            <p><b>Appearance</b></p>
            <hr>
        </div>
        <section class="info" id="Appearance">
            <p class='q'>Height</p>
            <p class='a'>5'7"</p>
            <p class='a'>170.18 cm</p>
            <p class='q'>Weight</p>
            <p class='a'>123 lbs.</p>
            <p class='a'>55.79 kg</p>
            <div class='br'></div>
            <p class='q'>Hair color</p>
            <p class='a'>Light brown</p>
            <div class='br'></div>
            <p class='q'>Eye color(s)</p>
            <p class='a'>Hazel</p>
            <div class='br'></div>
            <p class='q'>Piercings</p>
            <p class='a'>None</p>
            <p class='q'>Scars</p>
            <p class='a'>None</p>
            <p class='q'>Tattoos</p>
            <p class='a'>None</p>
            <p class='q'>Birthmark</p>
            <p class='a'>Some discoloration on his left forearm</p>
            <p class='q'>Freckles</p>
            <p class='a'>Yes</p>
            <div class='br'></div>
            <p class='q'>Accent / Voice</p>
            <p class='a'>He has a Dutch accent. It's not that thick, but when he gets worried or scared, it does become more prominent in his voice. His laugh is also very infectious</p>
        </section>
        <hr class="ImageTop">
        <img src="images/Adam/MusicSheet.png">
        <p class="quoteCaption">“What is there to like about me? Well... I'm funny?”</p>
        <hr class="ImageBottom">
        <div class="sectionLabel">
            <hr>
            <p><b>Personality</b></p>
            <hr>
        </div>
        <section class="info" id="Personality">
            <p class='q'>Closest Stereotype</p>
            <p class='a'>Goofball</p>
            <p class='q'>Overall Description</p>
            <p class='a'>Adam is a pretty chill guy when you first meet him. He's not exactly outgoing, nor is he timid. He's just an average, nice guy. Once he gets to know someone and becomes friends with them, he opens up a bit more and starts playing around with them. He can be really funny and he also likes to tease people, but he is respectful of their boundaries. If someone tells him that they genuinely dislike when he jokes around about xyz, he'll never mention it around them again, and he expects they will do the same for him. Also, he does like to swear. It's not excessive, but he does swear.</p>
            <div class='br'></div>
            <p class='q'>Likes</p>
            <p class='a'>Laughter. In general. Felt like it was cheating to say "Making people laugh/smile", "The sound of laughter", "Being able to make someone cry from laughing so much" and "People who make him laugh as well" in separate bullets, so now it's just one</p>
            <p class='a'>Hot chocolate. He will drink it as much as other people will drink coffee</p>
            <p class='a'>Pulling pranks and just playing around with friends</p>
            <p class='a'>Soft, fluffy things</p>
            <p class='a'>Sweaters</p>
            <div class='br'></div>
            <p class='q'>Dislikes</p>
            <p class='a'>Being called adorable or pretty. He can take cute, but he grew up in a family of only girls and used to be a girl himself. Those words are just too girly to him</p>
            <p class='a'>Snow and the cold. He gets cold easily</p>
            <p class='a'>Super serious, all work people</p>
            <p class='a'>Violations of personal space / constant physical affection</p>
            <div class='br'></div>
            <p class='q'>Positive Traits</p>
            <p class='a'>He's playful, funny, and charming</p>
            <p class='a'>Open about most of his issues. He's not secretive and won't hold a grudge</p>
            <p class='a'>Protective and loyal towards his friends</p>
            <div class='br'></div>
            <p class='q'>Negative Traits</p>
            <p class='a'>He is not open about his health issues</p>
            <p class='a'>He doesn't take things seriously sometimes</p>
            <p class='a'>He lets his fears dictate his future</p>
            <div class='br'></div>
            <p class='q'>Fears</p>
            <p class='a'>That he has Huntington's just like his mother. He's too scared to get tested. And he's scared of passing that on if he ever has kids</p>
            <p class='a'>Spiders or really any creepy crawly bugs</p>
            <p class='a'>Heights</p>
            <div class='br'></div>
            <p class='q'>Hobbies</p>
            <p class='a'>Playing the guitar</p>
            <p class='a'>Writing in his diary</p>
            <div class='br'></div>
            <p class='q'>Love Language(s)</p>
            <p class='a'>Quality Time: This love language is all about giving your undivided attention to that one special person, without the distraction of television, phone screens, or any other outside interference. They have a strong desire to actively spend time with their significant other, having meaningful conversations or sharing recreational activities.</p>
        </section>
        <hr class="ImageTop">
        <img src="images/Adam/Diary2.jpg">
        <p class="quoteCaption">“I only use my diary to be able to remember everything, so, s-sh... Shut up!”</p>
        <hr class="ImageBottom">
        <div class="sectionLabel">
            <hr>
            <p><b>Self-Perception</b></p>
            <hr>
        </div>
        <section class="info" id="Perception">
            <p class='q'>How they feel about themselves</p>
            <p class='a'>Adam is confident with himself. He doesn't dislike himself for the most part.</p>
            <div class='br'></div>
            <p class='q'>How they would describe themselves</p>
            <p class='a'>An ambivert who likes to play guitar and have fun with friends.</p>
            <div class='br'></div>
            <p class='q'>What they think is their best trait</p>
            <p class='a'>His sense of humor</p>
            <div class='br'></div>
            <p class='q'>What they think is their worst trait</p>
            <p class='a'>His inability to get over his fears</p>
            <div class='br'></div>
            <p class='q'>How they think other perceive them</p>
            <p class='a'>The funny but reliable friend</p>
            <div class='br'></div>
            <p class='q'>What they would like to change about themselves</p>
            <p class='a'>His gender assigned at birth</p>
        </section>
        <hr class="ImageTop">
        <img src="images/Adam/Aesthetic.jpg">
        <p class="quoteCaption">“Three feet, you're in my bubble.”</p>
        <hr class="ImageBottom">
        <div class="sectionLabel">
            <hr>
            <p><b>Relations</b></p>
            <hr>
        </div>
        <section class="info" id="Relations">
            <p class='q'>Mother</p>
            <p class='a'>Mila Zondervan</p>
            <p class='q'>Status</p>
            <p class='a'>Dying</p>
            <div class='br'></div>
            <p class='q'>Father</p>
            <p class='a'>Stijn Zondervan</p>
            <p class='q'>Status</p>
            <p class='a'>Dead</p>
            <div class='br'></div>
            <p class='q'>Sister</p>
            <p class='a'>Roseline Zondervan</p>
            <p class='q'>Status</p>
            <p class='a'>Alive</p>
            <div class='br'></div>
            <p class='q'>Sister</p>
            <p class='a'>Fleur Zondervan</p>
            <p class='q'>Status</p>
            <p class='a'>Alive</p>
        </section>
        <hr class="ImageTop">
        <img src="images/Adam/Aesthetic2.jpg">
        <p class="quoteCaption">“Every one needs to loosen up a bit. We've all gotten stressed and weighed down with work and society that we've forgotten what life is truly meant for. To be happy.”</p>
        <hr class="ImageBottom">
        <div class="sectionLabel">
            <hr>
            <p><b>Roleplay Info</b></p>
            <hr>
        </div>
        <section class="info" id="RpInfo">
            <p class='q'>Availability</p>
            <p class='a'>Open</p>
            <div class='br'></div>
            <p class='q'>Genres</p>
            <p class='a'>Fantasy</p>
            <p class='a'>Angst</p>
            <p class='a'>Sci-Fi</p>
            <p class='a'>Romance</p>
        </section>
    </main>
    <footer>
        <button data-theme="normal" aria-pressed="false" id="NormalMode"></button>
        <button data-theme="alt" aria-pressed="true" id="AltMode"></button>
        <!-- <button data-theme="custom" aria-pressed="false" id="CustMode"></button> -->
    </footer>
</body>
</html>