-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
325 lines (282 loc) · 16 KB
/
about.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
<!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/space.css">
<link rel="stylesheet" href="style/about.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/bb83019d49.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- 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>
<div class="planet">
<img src="media/image/graphic/header.png" class="planet-header">
<h1 class="planet-title">ABOUT</h1>
<h1 class="planet-title">ABOUT</h1>
<h1 class="planet-title">ABOUT</h1>
</div>
<div class="decor">
<img src="media/image/decor/saturn.png" class="saturn-top">
<img src="media/image/decor/saturn.png" class="saturn-next">
<img src="media/image/decor/bluegiants.png" class="giants-one">
<img src="media/image/decor/bluegiants.png" class="giants-two">
<img src="media/image/decor/catstronauts.png" class="catstronauts">
<img src="media/image/decor/curved-arrows.png" class="arrow-top-l">
<img src="media/image/decor/star-sparkle-l.png" class="stars-top-l">
<img src="media/image/decor/curved-arrows.png" class="arrow-top-r">
<img src="media/image/decor/star-sparkle-r.png" class="stars-top-r">
</div>
<main>
<div class="decor">
<img src="media/image/decor/tape.png" class="l-tape">
<img src="media/image/decor/tape.png" class="r-tape">
<img src="media/image/decor/const1.png" class="const">
</div>
<!-- Title Section -->
<section id="title">
<div class="text-part">
<h2 class="heading">Hello Again!</h2>
<p class="paragraph">im glad ur still interested in knowing more about me (๑╹ω╹๑ )♡. </p>
</div>
<div class="image">
<img src="media/image/graphic/neko-planet.png" alt="mimi and neko">
</div>
</section>
<!-- About Name Section -->
<section id="about-name">
<div class="image">
<img src="media/image/graphic/neko-planet-pls.png" alt="mimi and neko">
</div>
<div class="text-part ta-right">
<h2 class="heading">About My Name</h2>
<p class="paragraph">As u already know, my whole name’s <span class="cr-blue">Given Mikaela Andaya</span>, u can call me ven or ben. <span class="italic">(filipino pronunciation makes my name sound basic) </span>or <span class="bold td-underline">mika </span>for short</p>
<p class="paragraph">Fun facts about my name, it was actually supposed to be <span class="td-underline">Given Gabriel</span> but thanks to my mom she changed it to <span class="bold">Mikaela</span> which means <span class="cr-lightYellow">“Face of God’’</span>˚✧₊⁎❝᷀ົཽ≀ˍ̮ ❝᷀ົཽ⁎⁺˳✧༚ </p>
<p class="paragraph">now yk why i look so good</p>
</div>
</section>
<!-- Planet Section Divider -->
<div id="section-divider">
<img src="media/image/decor/planet-overlay.png" class="planet-bg">
<img src="media/image/decor/saturn.png" class="planet">
</div>
<!-- Younger Section -->
<section id="younger">
<div class="image">
<img src="media/image/decor/ufo.png" alt="ufo" class="ufo">
<img src="media/image/picture/childhood.png" alt="younger given" class="mg-center block">
</div>
<article class="text-part ta-center">
<h2 class="heading-small">When I was younger</h2>
<p class="paragraph mg-center">I grew up with my aunt when i was just 3 weeks old cuz my mom was too tired with work, especially cuz i never liked walking even when i was a baby(´∀｀*)
</p>
</article>
</section>
<img src="media/image/decor/const3.png" alt="stars" class="block mg-center">
<!-- About mom section -->
<section id="moms">
<article class="text-part">
<h2 class="heading-small">
About my moms
</h2>
<p class="paragraph">So i basically hav two moms, it makes up a lot for not having a dad.</p>
<p class="paragraph">But i never grew up or knew my dad anyway so there wasnt anything missing either, im not one to get jealous too so,</p>
<p class="paragraph">Since i didnt rlly get to be with my mom as much as she’s busy working, we didnt rlly hav a normal mother and daughter relationship until recently and we’re still working on it even now</p>
</article>
<div class="image">
<img src="media/image/picture/moms.png" alt="moms">
<img src="media/image/decor/rockets.png" class="rockets">
</div>
</section>
<!-- Negative Section -->
<section id="negative">
<div class="top-text ta-center mg-center">
<div class="paragraph">My mom likes going out and exploring different places so it contrasts with my personality</div>
</div>
<img src="media/image/graphic/neko-womp.png" alt="mimi and neko">
<div class="bottom-text ta-center mg-center">
<p class="paragraph"> But recently i’ve actually quite liked going out, maybe cuz our relationship got better or a change of <span class="cr-blue">my negative mindset</span> or both</p>
</div>
</section>
<!-- Friends section -->
<section id="friends">
<div class="image"> <img src="media/image/picture/friends.png" alt="given and friend" class="mg-center block"></div>
<article class="text-part ta-center">
<p class="paragraph"><span class="bold">Things hav been getting a lot lot better than before now, i finally found</span> <span class="cr-blue">good friends</span> although my social skills <span class="light">maaay hav decreased</span></p>
</article>
</section>
<!-- Q&A Section -->
<section id="qa">
<div class="section-header ta-center"><h2 class="heading-small">Q&A</h2></div>
<p class="paragraph ta-center"> <span class="bold">Hover/Hold</span> to reveal the answer</p>
<div class="answer-cards">
<div class="answer-card">
<div class="inner-card">
<div class="card question">
<h2 class="heading-small">question:</h2>
<p class="paragraph">What's your favorite genre?</p>
</div>
<div class="card answer">
<h2 class="heading-small">answer:</h2>
<p class="paragraph">I read and watch more <span class="cr-blue"> fantasy</span> stuff, any other genre is too boring for me</p>
</div>
</div>
</div>
<div class="answer-card">
<div class="inner-card">
<div class="card question">
<h2 class="heading-small">question:</h2>
<p class="paragraph">Who's your favorite character?</p>
</div>
<div class="card answer">
<h2 class="heading-small">answer:</h2>
<p class="paragraph">Mmmm for shows its prob <span class="td-underline cr-pink">tohru</span> from <span class="bold cr-pink">fruits basket</span></span>
</p>
<p class="paragraph"> <br>mmmmmmmmmmm for comics its <span class="cr-lightYellow">emi</span> and <span class="cr-lightYellow">remilia</span> from <span class="bold cr-lightYellow ">the one within the villainess</p>
</div>
</div>
</div>
<div class="answer-card">
<div class="inner-card">
<div class="card question">
<h2 class="heading-small">question:</h2>
<p class="paragraph">If you could pick a name for youself, What name would it be?</p>
</div>
<div class="card answer">
<h2 class="heading-small">answer:</h2>
<p class="paragraph"><span class="bold td-underline cr-blue">raven</span> jahsjshdkjw</p>
<p class="paragraph"><br>Cuz it just sounds cool and i watched <span class="td-underline">teen titans</span> ajshsjhwk</p>
</div>
</div>
</div>
<div class="answer-card">
<div class="inner-card">
<div class="card question">
<h2 class="heading-small">question:</h2>
<p class="paragraph">What annoys you the most?</p>
</div>
<div class="card answer">
<h2 class="heading-small">answer:</h2>
<p class="paragraph">Ppl ig? More specifically when <span class="td-underline italic light">ppl get irritated without reason</span>, like uhhh the <span class="cr-velvet">tone of their voice</span> and stuff</p>
</div>
</div>
</div>
<div class="answer-card">
<div class="inner-card">
<div class="card question">
<h2 class="heading-small">question:</h2>
<p class="paragraph">What would be you dream job?</p>
</div>
<div class="card answer">
<h2 class="heading-small">answer:</h2>
<p class="paragraph">Making a living off of <span class="cr-blue">being an artist</span>, mmm and <span class="italic td-underline">ik im far far faaaaaaaar away</span> from even being able to color well, but i just <span class="cr-lightYellow">daydreamed</span> something recently bout like having my art on a gallery like uhhh irl <span class="bold">like a museum but for my art</span>? Oh and <span class="italic">selling it</span> too skdnjd</p>
</div>
</div>
</div>
<div class="answer-card">
<div class="inner-card">
<div class="card question">
<h2 class="heading-small">question:</h2>
<p class="paragraph">What's your favorite color?</p>
</div>
<div class="card answer">
<h2 class="heading-small">answer:</h2>
<p class="paragraph">Purple and <span class="cr-velvet">wine red</span></p>
</div>
</div>
</div>
<div class="answer-card">
<div class="inner-card">
<div class="card question">
<h2 class="heading-small">question:</h2>
<p class="paragraph">What's your favorite flavor?</p>
</div>
<div class="card answer">
<h2 class="heading-small">answer:</h2>
<p class="paragraph">Mmmmmmmmm hmmmm <span class="cr-lightYellow"> cookies and cream</span>
</p>
<p class="paragraph"><br><span class="cr-velvet">Red velvet</span> too</p>
</div>
</div>
</div>
<div class="answer-card">
<div class="inner-card">
<div class="card question">
<h2 class="heading-small">question:</h2>
<p class="paragraph">What type of music do you listen to?</p>
</div>
<div class="card answer">
<h2 class="heading-small">answer:</h2>
<p class="paragraph"><span class="bold td-underline">Kpop mostly</span>, and <span class="cr-lightYellow">soft comfy music</span></p>
<p class="paragraph"><br>Lily pichu, hikaru station, red velvet, ive, gidle, wjsn i’ve been getting into more recently, and stayc oh and new jeans
Le sserafim tooo</p>
<p class="paragraph">And and and billlie (specifically three l’s)</p>
</div>
</div>
</div>
<div class="answer-card">
<div class="inner-card">
<div class="card question">
<h2 class="heading-small">question:</h2>
<p class="paragraph">What animals do you want as a pet?</p>
</div>
<div class="card answer">
<h2 class="heading-small">answer:</h2>
<p class="paragraph"><span class="td-underline">Bunnies</span>, <span class="td-underline">cats</span> and mmmmmmmmm <span class="bold td-underline">whales</span> maybe</p>
</div>
</div>
</div>
</div>
</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>
</body>
</html>