-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (136 loc) · 6.05 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
<!DOCTYPE HTML>
<!--
Massively by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Real freedom</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper" class="fade-in">
<!-- Intro -->
<div id="intro">
<h1>What is <br>real freedom</h1>
<p>Discover timeless stories of freedom and choice from the greatest thinkers of history.<br>
Inspired by <strong>Global Perspectives on Society.</strong></p>
<ul class="actions">
<li><a href="#header" class="button icon solid solo fa-arrow-down scrolly">Continue</a></li>
</ul>
</div>
<!-- Header -->
<header id="header">
<a href="index.html" class="logo">REAL FREEDOM</a>
</header>
<!-- Main -->
<div id="main">
<!-- Featured Post -->
<article class="post">
<!-- <header class="major">
<h2>Welcome</h2>
</header> -->
<p>“Freedom is an ever-elusive concept. For centuries, philosophers, writers, and dreamers have grappled with its meaning. Is freedom the ability to choose? The courage to resist? Or the wisdom to embrace the natural order of life?
<br>Here, we invite you to step into the minds of four visionary thinkers. Through their stories, explore the depths of freedom and its challenges. Every choice you make will lead to a different path—and perhaps, a deeper understanding of yourself.”</p>
</article>
<!-- Posts -->
<section class="posts">
<article>
<header>
<span class="date">Zhuangzi</span>
<h2><a href="zhuangzi/zhuangzi.html">Butterfly Dream</a></h2>
</header>
<a href="zhuangzi/zhuangzi.html" class="image fit">
<img src="zhuangzi/outcome_2.png" alt="" />
</a>
<p>Are you dreaming, or is life itself a dream? Explore the fluidity of identity and freedom.</p>
<ul class="actions special">
<li><a href="zhuangzi/zhuangzi.html" class="button">Enter the Dream</a></li>
</ul>
</article>
<article>
<header>
<span class="date">Plato</span>
<h2><a href="plato/plato.html">Allegory of the Cave</h2>
</header>
<a href="plato/plato.html" class="image fit"><img src="images/Pluto Introduction Scene.png" alt="" /></a>
<p>Can you escape the shadows to find the light of truth? Journey from illusion to enlightenment.</p>
<ul class="actions special">
<li><a href="plato/plato.html" class="button">Escape the Cave</a></li>
</ul>
</article>
<article>
<header>
<span class="date">Shakespare</span>
<h2><a href="romeo/romeo_juliet.html">Romeo and Juliet</a></h2>
</header>
<a href="romeo/romeo_juliet.html" class="image fit"><img src="images/Romeo and Juliet cover.png" alt="" /></a>
<p>Can love defy societal chains? Make choices that shape the fate of forbidden love.</p>
<ul class="actions special">
<li><a href="romeo/romeo_juliet.html" class="button">Explore Love’s Freedom</a></li>
</ul>
</article>
<article>
<header>
<span class="date">George Orwell</span>
<h2><a href="#">1984</a></h2>
</header>
<a href="1984/1984.html" class="image fit"><img src="1984/1984.png" alt="" /></a>
<p>In a world of surveillance and control, will you submit or resist? Test the limits of freedom.</p>
<ul class="actions special">
<li><a href="1984/1984.html" class="button">Challenge the Party</a></li>
</ul>
</article>
<article>
<header>
<span class="date">Tom Schulman</span>
<h2><a href="dps/dead.html">Dead Poets Society</a></h2>
</header>
<a href="dps/dead.html" class="image fit"><img src="images/Rip out the page.png" alt="" /></a>
<p>Can you break free from tradition? Follow your passions and seize the day.</p>
<ul class="actions special">
<li><a href="dps/dead.html" class="button">Unleash Your Inner Voice</a></li>
</ul>
</article>
<article>
<header>
<span class="date">Dostoevsky</span>
<h2><a href="nfu/nfu.html">Notes from Underground</a></h2>
</header>
<a href="nfu/nfu.html" class="image fit"><img src="note/images/note.png" alt="" /></a>
<p>Step into the mind of rebellion. Will you embrace chaos or seek redemption?</p>
<ul class="actions special">
<li><a href="nfu/nfu.html" class="button">Embrace the Unknown</a></li>
</ul>
</article>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<section class="split contact">
<section class="alt">
<p style="text-align: center;">“Freedom is the power to act or not to act, and so to shape one’s life.”
— Aristotle</p>
</section>
</section>
</footer>
<!-- Copyright -->
<div id="copyright">
<ul><li>Yue, Temmujin, Zhihan, Madeline, Milos</li><li><a href="https://html5up.net">HTML5 UP</a></li><li>Photos by ChatGPT</li><</ul>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>