This repository has been archived by the owner on Jun 9, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinterests.html
323 lines (266 loc) · 19.2 KB
/
interests.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
<!doctype html>
<html lang='en'>
<!--
Author: Ang Yak Hng
Filename: interests.html
Last edit: 16 Aug 2019
-->
<head>
<title>Interests</title>
<!-- Required tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Links to external files -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel='stylesheet' href='global.css' type='text/css'>
<link rel='stylesheet' href="interests.css" type="text/css">
<script src="https://kit.fontawesome.com/efbe37c53e.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light ">
<a class="navbar-brand" href="index.html"><strong>Yak</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="education.html">Education </a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Interests<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
</ul>
</div>
</nav>
<!-- Splash screen -->
<div class='jumbotron jumbotron-fluid' id='jumbo'>
<div class='container'>
<h1 class='display-4'><strong>Interests</strong></h1>
<p class='lead'>The various things I do in my free time.</p>
</div>
</div>
<!-- Content -->
<div class='container'>
<div class='row'>
<div class='col-12 col-lg-6'>
<h2>Games</h2>
<p>I play many games in my free time, mostly to relieve the stresses of school, but sometimes I play to satiate my bordom at home.</p>
<div class='row'>
<!-- Minecraft card -->
<div class='col-12 col-md-6'>
<div class='card'>
<a href='#mc-content' data-toggle='collapse' aria-expanded='false' aria-controls='mc-content'><img src='Images/minecraft.svg' class='card-img-top p-3' alt='minecraft logo'></a>
<div class='collapse' id='mc-content'>
<div class='card-body'>
<h5 class='card-title'>Minecraft</h5>
<p class='card-text'>Minecraft is a hyper-successful game developed by Mojang all the way back in 2011, with tens of millions of copies sold. It slowly lost popularity over the years, but has received a strange revitalisation in recent months. I love this game to bits, since the creativity you can unleash here is unparallelled and the potential is near infinite.</p>
</div>
</div>
</div>
<!-- Overwatch card -->
<div class='card'>
<a href='#ow-content' data-toggle='collapse' aria-expanded='false' aria-controls='ow-content'><img src='Images/overwatch.svg' class='card-img-top p-3' alt='overwatch logo'></a>
<div class='collapse' id='ow-content'>
<div class='card-body'>
<h5 class='card-title'>Overwatch</h5>
<p class='card-text'>Overwatch is a team-based shooter developed by Blizzard in 2015. It is a fast paced game, with so much happening all at once, but despite all of that, it is exhilarating playing this game. The community is really nice too, which is somewhat rare in this genre.</p>
</div>
</div>
</div>
</div>
<div class='col-12 col-md-6'>
<!-- GTAV card -->
<div class='card'>
<a href='#gta-content' data-toggle='collapse' aria-expanded='false' aria-controls='gta-content'><img src='Images/gtav.png' class='card-img-top p-2' id='gtav-img' alt='gta 5 logo'></a>
<div class='collapse' id='gta-content'>
<div class='card-body'>
<h5 class='card-title'>GTA 5</h5>
<p class='card-text'>Ever since it's release in 2013, GTA 5 has been a top-selling game on both PC and consoles, and is still going strong today, with new DLC being released. The primary reason why I like this game is because it is an open-world game, which means that you, the player, can roam around the in-game world freely, doing whatever that you want. </p>
</div>
</div>
</div>
<!-- Cities Skylines card -->
<div class='card'>
<a href='#cs-content' data-toggle='collapse' aria-expanded='false' aria-controls='cs-content'><img src='Images/cities-skylines.png' class='card-img-top p-3' alt='cities skylines logo' id='cs-logo'></a>
<div class='collapse' id='cs-content'>
<div class='card-body'>
<h5 class='card-title'>Cities Skylines</h5>
<p class='card-text'>Cities Skylines is, in my opinion, what Simcity 2013 should have been. It is a city-building simulator that is known for it's depth and ability to suck up all your time. I love it as it helps me relax when I am stressed.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-12 col-lg-6'>
<h2>Shows</h2>
<p>Like any other person, I watch shows that I like, be it on Netflix or on Youtube. I very much prefer "slice of life" type shows, as clearly evident below.</p>
<div class='row'>
<div class='col-12 col-md-6'>
<div class='card'>
<a href='#konosuba-content' data-toggle='collapse' aria-expanded='false' aria-controls='konosuba-content'><img src='Images/konosuba.png' class='card-img-top p-3' alt='konosuba logo'></a>
<div class='collapse' id='konosuba-content'>
<!-- Konosuba card -->
<div class='card-body'>
<h5 class='card-title'>Konosuba!</h5>
<p class='card-text'>This is a comedy anime that does not conform to the traditional standards, which is why I like it so much. It revolves around 4 characters, of which one is from another world, and their daily lives as a group of adventurers in a fantasy world. I also recommend watching this.</p>
</div>
</div>
</div>
</div>
<div class='col-12 col-md-6'>
<!-- Toradora card -->
<div class='card'>
<a href='#toradora-content' data-toggle='collapse' aria-expanded='false' aria-controls='toradora-content'><img src='Images/toradora.png' class='card-img-top p-3' alt='toradora logo'></a>
<div class='collapse' id='toradora-content'>
<div class='card-body'>
<h5 class='card-title'>Toradora!</h5>
<p class='card-text'>This is a super sweet anime where the main character, Ryuji, starts off by taking care of the school bully, Taiga, more affectionally known as the Palm-top Tiger. They both fall for each other over time, their feelings and behaviours changing.</p>
</div>
</div>
</div>
<!-- Kaguyasama card -->
<div class='card'>
<a href='#kaguya-content' data-toggle='collapse' aria-expanded='false' aria-controls='kaguya-content'><img src="Images/kaguyasama.png" class='card-img-top p-2' alt='kaguyasama logo' id='kaguyasama'></a>
<div class='collapse' id='kaguya-content'>
<div class='card-body'>
<h5 class='card-title'>Kaguya-Sama - Love is war</h5>
<p class='card-text'>This is a hilarious anime about two student council members, Kaguya Shinomiya, the vice president, and Miyuki Shirogane, the president, trying to get each other to confess their love to them, leading to situations where they embarass themselves.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2 class='mt-2'>Play games with me</h2>
<p>If you want to join me in playing some games, fill in the form below.</p>
<form class='needs-validation' novalidate action='thankyou.html'>
<div class='form-row'>
<!-- Name -->
<div class='col-md-6 mb-3'>
<label for='name'>Name</label>
<input type='text' class='form-control' name='name' id='name' placeholder='John Smith' required>
<div class='valid-feedback'>Looks good.</div>
<div class='invalid-feedback'>Cannot be empty.</div>
</div>
<!-- Discord username -->
<div class='col-md-3 mb-3'>
<label for='discord'>Discord Tag</label>
<input type='text' class='form-control' name='discord' id='discord' placeholder='username#6969' pattern='^[^#]{2,32}#\d{4}$' required>
<div class='invalid-feedback'>Please enter a valid discord tag.</div>
</div>
<!-- Steam username -->
<div class='col-md-3 mb-3'>
<label for='steam'>Steam Username</label>
<input type='text' class='form-control' name='steam' id='steam' placeholder='username' pattern='^[^#]{2,32}$'>
<div class='invalid-feedback'>Please enter a valid steam username.</div>
</div>
</div>
<div class='form-row'>
<!-- Email -->
<div class='col-md-6 mb-3'>
<label for='email'>Email Address</label>
<input type='email' class='form-control' name='email' id='email' placeholder='[email protected]' required>
<div class='invalid-feedback'>Please enter a valid email.</div>
<div class='valid-feedback'>Looks good.</div>
</div>
<!-- Games -->
<div class='col-md-6 mb-3'>
<label for='games'>Games you play</label>
<input type='text' class='form-control' name='games' id='games' placeholder='Type in your games here'>
</div>
</div>
<!-- Submit button -->
<button class='btn btn-primary' type='submit'>Submit</button>
</form>
<script src='validate.js'></script>
</div>
<!-- Credit Modal -->
<div class="modal fade" id="credits" tabindex="-1" role="dialog" aria-labelledby="credit-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="credit-label">Credits</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class='table'>
<thead class='thead-dark'>
<tr>
<th scope='col'>Image Link</th>
<th scope='col'>Credits</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href='https://unsplash.com/photos/Nmeu6odqoNM'>Jumbotron background</a></td>
<td>Photo by Paweł Czerwiński on Unsplash</td>
</tr>
<tr>
<td><a href='https://seeklogo.com/vector-logo/284418/minecraft'>Minecraft logo</a></td>
<td>Logo from seeklogo.com</td>
</tr>
<tr>
<td><a href='http://www.sclance.com/pngs/gta-v-logo-png/view-page-1.htm'>GTA V Logo</a></td>
<td>Logo from sclance.com</td>
</tr>
<tr>
<td><a href='https://www.reddit.com/r/Overwatch/comments/2lowlm/logo_vectors_for_everyone/'>Overwatch logo</a></td>
<td>Logo by u/blandsauce on Reddit</td>
</tr>
<tr>
<td><a href='https://es.wikipedia.org/wiki/Cities:_Skylines'>Cities Skylines logo</a></td>
<td>Logo by Paradox Interactive on Wikipedia</td>
</tr>
<tr>
<td><a href='https://i.imgur.com/aU0JR8J.png'>Konosuba! logo</a></td>
<td>Logo from imgur.com</td>
</tr>
<tr>
<td><a href='https://occ-0-92-1722.1.nflxso.net/dnm/api/v6/5e0byrbbfBPBmtxyXMpKqMuqOQY/AAAABTZkLjM_ZMc7j64DXGn-DSDNsdXBOFzpSHFrwfJloDaRCZfT_dPGlUzy7gR2w-2IC2nFq88bJNWv0hng0pWZ_tnpkkz1mHQ0FqsW578tew.png?r=39b'>Toradora! Logo</a></td>
<td>Logo from Netflix</td>
</tr>
<tr>
<td><a href='https://upload.wikimedia.org/wikipedia/fr/5/55/Kaguya-sama_-_Love_is_War_Logo_anglais.png'>Kaguya-Sama Love is War logo</a></td>
<td>Logo from Wikipedia</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer py-3 mt-3" id='footer'>
<div class="container-fluid">
<div class='row'>
<div class='col-6 my-auto'>
<a href='https://www.instagram.com/yakhnggg/' class='btn rounded-circle' id='insta-btn' target='_blank'><i class="fab fa-instagram"></i></a>
<a href='https://reddit.com/u/ayyyyyh' class='btn rounded-circle' id='reddit-btn' target='_blank'><i class='fab fa-reddit'></i></a>
</div>
<div class='col-6 text-right'>
<a class='btn' href='#' data-toggle="modal" data-target="#credits">© Ang Yak Hng, 2019</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>