-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (108 loc) · 4.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Eroica</title>
<link rel="icon" href="./img/icons/favicon.ico">
<style>
html {
height: 100%;
margin: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-image: url('./img/bg-2.jpg');
background-repeat: repeat repeat;
}
a {
color: whitesmoke;
margin-left: 20px;
text-decoration:none;
}
a:hover {
cursor: pointer;
text-decoration: underline;
color: #daa520;
}
.nav-wrapper {
min-height: 50px;
}
#nav {
font-family: 'Didact Gothic', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 20px;
background-color: #222222;
border-bottom: #93742A;
border-width: 5px;
text-align: center;
vertical-align: text-bottom;
line-height: 2;
min-height: 40px;
}
#mainWrapper {
display: flex;
justify-content: center;
}
</style>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav-wrapper" >
<div id="nav">
<a href="index.html">Eroica</a>
<a href="urworld.html">Ur World</a>
<a href="progress.html">Progress</a>
<a href="help.html">Help</a>
<a href="about.html">About</a>
</div>
</div>
<div id="mainWrapper">
<div id="introduction" style="color: whitesmoke; font-family: 'Century Gothic', 'Helvetica', sans-serif;max-width: 800px">
<p>
Dear Traveler,
</p>
<p>
Welcome to Eroica, Here you will encounter three worlds:
</p>
<ul>
<li>
fin de siecle Vienna shimmering <br/>on the banks of the Danube<br/> with a pallid light<br/>
<img src="./img/vienna.png"/>
</li>
<li>
a strange mid-century mansion<br/> overlooking the lower Hudson River,<br/> still darkened by WWII<br/>
<img src="./img/tarrytown.png" />
</li>
<li>
The city of Manaus and a tribal compound<br/> on the upper Amazon early in the 21st century,<br/> sites of the ravaging of the great river <br/>
<img src="./img/amazon.png" />
</li>
</ul>
<p style="max-width: 640px">
Each place has it's unique images and inhabitants, but each also is the stage for a familiar drama: the struggles of the artist of the new in conflict with a resistant culture.
</p>
<p style="max-width: 640px">
More particularly, you will find in each place an innovative composer, the composer's lover, the composer's artistic friend, and an antagonist who represents the dominant culture.
</p>
<div style="max-width: 640px;">
<img src="./img/ur-path-sm.png" style="padding-left: 120px"/>
<p>
Eroica is part narrative and part mosaic. How you experience it depends in part on the navigation system the makers have created and in part on decisions you make as you explore the work.
</p>
</div>
<div style="max-width: 640px; padding-bottom: 40px; padding-left: 420px">
<button onclick="window.location='urworld.html'">
Enter the Ur-World
</button>
</div>
</div>
</div>
</body>
</html>