-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (79 loc) · 4.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
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8" />
<title>MC Holodomor Memorial</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="Holodomor memorial" />
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <link rel="icon" href="favicon.png"> -->
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="preload.css" />
<link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Merriweather" rel="stylesheet" type='text/css'>
</head>
<body>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<h1 class="intro">Raffles Presents...</h1>
<h1 class="intro" style="top:93%; font: 400 15px/1.8 'Lato', sans-serif; letter-spacing: 2px;">By Ryan, Samuel, Tulaash, Xavier Teo and Darryl</h1>
<image class="intro-logo" src="assets/rilogo.png"></image>
</div>
<div id="particles-js"></div>
<div class="banner b1">
<div class="caption">
<span class="border">Minecraft Holodomor Memorial</span>
</div>
</div>
<div style="height: 'auto'; padding: 10% 10%;">
<h3>Why Holodomor?</h3>
<p>
Besides it being a catastrophic famine, the incident had a major effect on the Ukrainian spirit and identity. 27 Countries and the EU have recognised it as a genocide, where Stalin deliberately aimed at eliminating Ukrainian spirit, however the matter is still under debate. Despite an estimated 3.5 to 5 million Ukrainians perishing during the famine, the event further solidified Ukrainian spirit as they united in suffering against the soviet government. Today, Holodomor Memorial Day is an important yearly commemoration in Ukraine, and serves as a reminder to Ukrainians to protect Ukrainian spirit and identity fiercely. The event has become more relevant in light of the recent Russo-Ukrainian War (Ongoing as of May 2023).
</p>
</div>
<div class="banner b2"></div>
<div style="padding:10% 10%;">
<h3>Why Minecraft?</h3>
<p>
Our main target audience is the younger population who are interested in video games. The primary target outcome of our memorial is for participants to learn more about how collectivisation was carried out and its effects on Ukrainian peasants through a model of a collective farm. Simultaneously, they can also understand its impacts on Ukrainian identity through the structures such as the torch, tree of life and fountain of peace, which highlight how the Ukrainian spirit grew ever stronger after the Holodomor. We hope that they can be sympathetic and aware of atrocities committed under the soviet regime which Russia has yet to recognise and take accountability for.
</p>
<h3>Gallery</h3>
<div id="gallery">
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="assets/tree.png" alt="" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="assets/fount.png" alt="" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="assets/flag.png" alt="" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="assets/ches.png" alt="" style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container">
<!-- <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span> -->
<img id="expandedImg">
<div id="imgtext"></div>
</div>
</div>
<iframe style="margin-top: 10%;" width="100%" height="500px" src="https://www.youtube.com/embed/LxRjYULY-x0">
</iframe>
<div id="btnholder">
<button id="download" data-download="assets/world.zip"><i class="fa fa-download"></i> Download World </button>
<!-- <button id="download"><i class="fa fa-download"></i> Download</button> -->
<form action="https://github.com/spfaul/holodomor" method="get" target="_blank">
<button id="source" type="submit" ><i class="fa fa-github"></i> Website Source</button>
</form>
</div>
<script type="text/javascript" src="./particles.js"></script>
<script type="text/javascript" src="./particle_splash.js"></script>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>