-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
384 lines (323 loc) · 22.9 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
<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>Home | Given Mikaela Andaya</title>
<!-- CSS -->
<link rel="stylesheet" href="style/general.css">
<link rel="stylesheet" href="style/utility.css">
<link rel="stylesheet" href="style/home.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/bb83019d49.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!-- header -->
<header>
<!-- Navigation -->
<nav>
<ul class="navigation">
<li>
<a href="index.html"><i class="fa-solid fa-house"></i> Home</a>
</li>
<li>
<a href="about.html"> <i class="fa-solid fa-user"></i> About <i class="fa-solid fa-caret-down"></i></a>
<!-- Sub Nav -->
<div class="sub-nav">
<a href="favorites.html"> <i class="fa-solid fa-star"></i> Favorites</a>
<a href="likes.html"> <i class="fa-solid fa-thumbs-up"></i></i> Likes & Dislikes</a>
</div>
</li>
<li>
<a href="hobbies.html"><i class="fa-solid fa-palette"></i> Hobbies <i class="fa-solid fa-caret-down"></i> </a>
<!-- Sub Nav -->
<div class="sub-nav">
<a href="hobbies.html"> <i class="fa-solid fa-paintbrush"></i> Art</a>
<a href="games.html"> <i class="fa-solid fa-gamepad"></i> Games</a>
<a href="favorites.html"> <i class="fa-solid fa-film"></i> Media</a>
</div>
</li>
<li>
<a href="gallery.html"><i class="fa-solid fa-images"></i> Gallery</a>
</li>
<li>
<a href="contacts.html"><i class="fa-solid fa-address-book"></i> Contacts</a>
</li>
</ul>
<div class="line"></div>
<div class="action">
<button class="btn btn-cta ft-primary"> <i class="fa-solid fa-pen"></i> Write me a message!</button>
<i class="fa-solid fa-star"></i>
</div>
</nav>
</header>
<main>
<div class="introduction">
<div class="bg-decor">
<div class="first circle"></div>
<div class="second circle"></div>
<div class="third circle"></div>
<div class="forth circle"></div>
</div>
<!-- Title Section -->
<section id="title" class="confine">
<div class="content">
<div class="image">
<img src="media/image/picture/main.png" alt="given" class=" br-small ol-white">
</div>
<article class="text-part ta-right">
<div class="pre-title">
<p class="ft-secondary cr-white">`g-i-v-e-n` `m-i-k-a-e-l-a` `a-n-d-a-y-a`</p>
<div class="stars cr-blue">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
<h1 class="title cr-white ft-alt">Given <span class="cr-blue">Mikalea Andaya</span></h1>
<div class="line"></div>
<p class="description ft-primary"><span class="special ft-alt cr-white">Hiiii!, I'm Given</span>, but I’m usually called Ven, I’ve been homeschooled for about 3 years now, and No, it doesnt mean I dont have any social life.<br>
<br> I hate sports and walking, well I just dont like moving in general, but my body still aches all the time, I get scared a lot and overthink stuff, but I try my best to improve!
</p>
<div class="cta">
<i class="fa-solid fa-star cr-white"></i>
<button class="btn btn-cta">Say Hi! <i class="fa-solid fa-envelope"></i></button>
<img src="media/image/decor/line1.svg" class="pointer">
</div>
</article>
</div>
</section>
<!-- Introduction Section -->
<section id="intro" class="confine">
<div class="section-title">
<div class="line"></div>
<div class="line"></div>
<h2 class="cr-white">Introduction</h2>
</div>
<div class="intro-content grid-left">
<article class="text-part">
<div class="panel ol-purple bg-purple br-small">
<div class="legend"><h2>Nice to meet u!</h2></div>
<p>Talking to other ppl sure is <span class="bold">tiring</span> but im an extrovert to ppl im comfy with,<br> ╰\(´︶`)/╯♡<br><p>
<p> I cant make jokes for my life cuz im slow, i mean it (c" ತ,ತ).
im rlly rlly r e a l l y slow,
im more of a person that <span class="cr-darkerPurple">laughs</span> at other ppl’s jokes.</p>
<p>Im a bit of a <span class="cr-blue">perfectionist</span> when it comes to things i do, i will only settle for the best b-(ò_óˇ)-d</p>
<img src="media/image/decor/line2.svg" class="pointer2">
</div>
<button class="btn btn-cta">More <i class="fa-solid fa-arrow-right"></i></button>
</article>
<div class="image ol-white bg-purple br-small ">
<img src="media/image/graphic/chibi.png" alt="chibi art">
</div>
</div>
</section>
</div>
<!-- Introduction Section -->
<section id="hobby" class="confine">
<div class="section-title">
<h2 class="cr-white">Hobbies & Liking</h2>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="grid-right">
<div class="image">
<div class="fixed ol-white bg-purple br-small "> <img src="media/image/graphic/drawing.png" alt="given's drawing"></div>
</div>
<article class="text-part">
<div class="panel ol-purple bg-purple br-small">
<div class="legend"><h2>More about me !</h2></div>
<p>To get to know me better, my birthday’s on <span class="cr-blue">March 31</span>, n e v e r forget it.</p>
<p>I like playing games like <span class="bold td-underline">Genshin</span> and <span class="bold td-underline">Cookie Run Kingdom</span> and im an expert at <span class="bold td-underline">Bandori</span> (^з^)-☆.</p>
<p>My fav food is <span class="cr-lightYellow">eggs</span> cuz its the only thing i can cook- and <span class="cr-lightYellow">Cheetos</span> urgh its to die for TAT.</p>
<p><span class="bold">I’M A HARDCORE</span> <span class="bold cr-velvet"> REVELUV</span>and i listen to <span class="cr-pink">Lilypichu</span> on a daily basis.</p>
</div>
<img src="media/image/decor/line3.svg" class="pointer3">
<div class="panel sekon ol-purple bg-purple br-small">
<div class="legend"><h2>What I do</h2></div>
<p>Oh and i <span class="td-underline cr-blue">sing</span> but <span class="td-underline cr-blue">draw</span> most of the time<br><span class="td-underline">(thats my drawing showed on the pic btw)</span></p>
</div>
<button class="btn btn-cta">More <i class="fa-solid fa-arrow-right"></i></button>
</article>
</div>
</section>
<div class="relative">
<img src="media/image/decor/purple-top.svg" alt="wave" class="wave-end">
</div>
<!-- Family Section -->
<section id="family">
<!-- Content -->
<div class="confine">
<!-- General Section -->
<div class="general">
<article class="text-part ta-justify">
<h2>My Family</h2>
<p> My family r mostly girls as u can see, there’s only like 3 guys and one of em is adopted already-<br> We’re rlly anything but a normal family, but is any family rlly “normal</p>
</article>
<div class="image">
<img src="media/image/picture/family-pic.png" alt="given's family">
</div>
</div>
<!-- Family Page-->
<div class="members pages" data-index="0">
<!-- Member -->
<article class="member page">
<!-- Image Part -->
<div class="image">
<img src="media/image/picture/cousin.png" alt="aiden rei">
<h2 class="member-name">Aiden Rei</h2>
<div class="line"></div>
<p class="member-detail">My 3yo Cousin</p>
</div>
<!-- Text Part -->
<div class="text-part ta-justify">
<p>My kyot fat charming genius 3yo baby cousin, u wouldnt believe he’s 3. if u saw him irl and u wouldnt believe it even more if i said he’s premature Becuz, yes he is.</p>
<p>He weighs 25kg (thats like half my weight and apparently on the borderline of being obese).
</p>
<p>He’s very very very smart, when ur talking to him ur going to know more bout trucks and vehicles.Man, i didnt even know police cars, ambulances, and fire trucks had different sounds</p>
<p>When ur with him, u cant stay in one place cuz he always walks around and he’s rlly fast even tho he cant run from how heavy his body is. If u get stepped by him ur d e d </p>
<p>Very very kyot without trying<br>
King of messes <span class="ft-initial">ƪ ( ˘ ⌣ ˘ ) ʃ</span> <br>
(i hav to clean it O-O)<br>
</p>
</div>
</article>
<!-- Member -->
<article class="member page page-hidden">
<!-- Image Part -->
<div class="image">
<img src="media/image/picture/second-cousin.png" alt="lyndell ashley">
<h2 class="member-name">Lyndell Ashley</h2>
<div class="line"></div>
<p class="member-detail">My other cousin</p>
</div>
<!-- Text Part -->
<div class="text-part ta-justify">
<p>She’s older than me by like 7 years but we argue bout little things like we’re the same age ಠಠ </p>
<p>We always get mistaken as sisters cuz we apparently look alike? (We both disagree)</p>
<p>But well we are technically like sisters cuz we’re together most of the time even tho i live in the province and she’s at the city.</p>
<p>But one time we did live together for a while, cuz she was at my mom’s house with me and she just stayed there the entire quarantine, since it was only the two of us there she could swear as much as she wanted while she played games</p>
<p>It was very very excruciating hearing swearing at every sentences every day and every minute (c" ತ,ತ)</p>
<p>Aaaanyways, aside all of that she’s pretty nice and rlly likes animals and we can vent bout other ppl (specifically our family) to each other.</p>
</div>
</article>
<!-- Member -->
<article class="member page page-hidden">
<!-- Image Part -->
<div class="image">
<img src="media/image/picture/sister.png" alt="rich gavin">
<h2 class="member-name">Rich Gavin</h2>
<div class="line"></div>
<p class="member-detail">My Sister</p>
</div>
<!-- Text Part -->
<div class="text-part ta-justify">
<p>My actual biological sister, Y e s, she rlly is my sister ik we dont look alike cuz yk, different fathers.</p>
<p>I havent spent that much time with her so we’re not too too close yet but also cuz she’s still like 4 so I dont rlly hav much to say yet about her,</p>
<p>But she hates vegetables (like any other kid aiden’s good tho). And oh god feeding her is e x h a u s t i n g</p>
<p>Well, i cant judge since when i was that age too i ate meals for 5 hours.</p>
</div>
</article>
<div class="controls">
<button class="prev btn-arrow"><i class="fa-solid fa-arrow-left"></i></button>
<button class="next btn-arrow"><i class="fa-solid fa-arrow-right"></i></button>
</div>
</div>
</div>
</section>
<div class="relative no-height">
<img src="media/image/decor/purple-bottom.svg" alt="wave" class="wave-start">
</div>
<!-- Friends Section -->
<section id="friend">
<div class="section-header">
<h2>My Friends</h2>
</div>
<div class="friend-content selection">
<!-- Select Menu -->
<div class="friend-select select-menu">
<div class="left flex-col-center">
<img src="media/image/picture/jairus.png" alt="jairus" class="select-open" data-select-open="jairus">
</div>
<div class="right flex-col-center">
<img src="media/image/picture/nine.png" alt="nine" class="select-open" data-select-open="nine">
<img src="media/image/picture/shuba.png" alt="shuba" class="select-open" data-select-open="shuba">
</div>
</div>
<!-- Select item -->
<div class="select-items hidden">
<button class="prev btn btn-arrow select-menu-btn"><i class="fa-solid fa-arrow-left"></i></button>
<!-- Friend: Nine -->
<div class="friend select-item" data-select="nine">
<div class="panel ol-purple bg-purple br-small relative">
<div class="legend">Nine</div>
<p>My story of when we first met is too interesting to not share so here, I got rlly intimidated by her at first for no reason even tho we didnt talk</p>
<p>We had a pretty deep convo cuz my friend wanted to ask her if she’s together with the person she had a crush on, </p>
<p>Mind u, we rlly never ever talked to each other or interacted at all but i didnt get too shy to talk to her since it was just online, she ended up telling me bout the person she actually liked and i was rlly struggling on thinking what to say to her.</p>
<p>A while after that, we talked a lil more and got closer </p>
<p>My feeling of intimidation to her got less over time, especially when i heard her tiny voice (=^▽^)σ</p>
<p>We were supposed to meet irl on a convention before she leaves the country but my mom forgot to buy the tickets (c" ತ,_ತ) buckets of tears were spent that day</p>
</div>
<img src="media/image/picture/nine.png" alt="nine picture">
</div>
<!-- Friend: Jairus -->
<div class="friend select-item hidden" data-select="jairus">
<div class="panel ol-purple bg-purple br-small relative">
<div class="legend">Jairus</div>
<p>Another very weird and interesting friend i hav, i dont befriend normies to be clear so if im rlly close with u yk why now </p>
<p>Extremely smart on a n y t h i n g (im so jealous m(..)m )</p>
<p>Very cool guy, earns thousands of money with commissions ??? (Oh commission him too) and is a vtuber??? A n d had a convo with the graphic designer of T H E PORTER ROBINSON’s concert?? Wah Σ（ﾟдﾟlll）</p>
<p>Although i am close to this guy, i am still a bit awkward sometimes (c" ತ,_ತ) well im awkward to pretty much everyone Im a lil deaf and slow, so it’ll take me a while to process ur jokes and what ur saying so ppl get tired of talking to me quickly （−＿−；）</p>
<p>Sorry for that jai, ha ha (。-∀-)</p>
<p>I thought he was talking about yae miko to someone one time at church, so i determinedly talked to him first when i had the opportunity, turns out they were n o t talking about yae miko buuut they did play genshin so its a win</p>
</div>
<img src="media/image/picture/jairus.png" alt="jairus picture">
</div>
<!-- Friend: Nine -->
<div class="friend select-item hidden" data-select="shuba">
<div class="panel ol-purple bg-purple br-small relative">
<div class="legend">Shuba</div>
<p>My bestest friend that made this whole website for me W(0)W. As u can see already from this whole thing he’s very very good at making sites (commissions would be most welcomed wjshjjw) and rlly good at playing piano too i mean rlly rlly rlly good </p>
<p>Even tho he’s all of that he still thinks negatively about himself most of the time, a bit of a pessimistic guy (´ー｀) </p>
<p>He’s my most closest friend and the only one im not pressured on making good jokes on cuz as i said earlier im bad at jokes ( TT)＼(^-^ ) </p>
<p>He helped me a lot with my art before when i was rlly rlly bad T-T man i thought that just doodling was practicing art, and even still now i ask him for help</p>
<p>We first met in genshin during Baal’s banner, he’s a real huge simp for raiden cuz he even had the courage to talk to strangers to farm for her weapon on other worlds. He kept hitting me with the fishing rod and since i only befriend those who i think r interesting, we became friends since then</p>
<p>I befriended him cuz he was interesting but stayed cuz he’s honest (brutally sometimes) </p>
</div>
<img src="media/image/picture/shuba.png" alt="nine picture">
</div>
</div>
</div>
</section>
<!-- Picture Section -->
<section id="picture" class=" confine">
<div class="section-title">
<h2 class="cr-white">Picture</h2>
<div class="line"></div>
<div class="line"></div>
</div>
<img src="media/image/graphic/plate.png" alt="pictures" class="mg-center block image" >
<button class="btn btn-cta block mg-center">Gallery <i class="fa-solid fa-arrow-right"></i></button>
</section>
<!-- Cat section -->
<section id="cat">
<img src="media/image/graphic/paw.png" alt="cat-paws" class="l-paw paw">
<img src="media/image/graphic/cat-head.png" alt="cat-head" class="head">
<img src="media/image/graphic/paw.png" alt="cat-paws" class="r-paw paw">
</section>
</main>
<!-- Footer -->
<footer>
<h2 class="ft-alt web-name">Given Mikalea Andaya</h2>
<p class="ft-primary maker ">Website Design By <span class="name cr-blue">Vincent Auriol Liussyaputra</span> 🞄 Shubamium</p>
</footer>
</div>
<!-- Page Script -->
<script src="script/page.js"></script>
<!-- Select Script -->
<script src="script/select.js"></script>
</body>
</html>