-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
251 lines (201 loc) · 9.3 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- test -->
<title>SPEEDRUNHOME.PAGE</title>
<link rel="icon" type="image/x-icon" href="/images/heart-blue.gif">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<meta name="author" content="SHAWNÉ MICHAELAIN HOLLOWAY">
<meta name="description" content="SPEEDRUNHOME.PAGE" content ="Over the course of 30 days, SPEEDRUNHOME.PAGE (2022) presents an HTML/CSS-constructed "speedrun" of queer spaces. This work is meant to be viewed from time to time, set as a viewer/users's brower homepage. Each day for thirty days it offers a refreshed set of poetry, images, and audio testimonials that reflect on how queerness is mobilized in the space of the day—alongwith the pleasures and discontents—in persuit of finding "home." Directly inspired by Ana Anthropy's 2008 video game the Mighty Jill Off, SPEEDRUNHOME.PAGE draws on the Girl in the Tower trope of many popular video games and fantasy stories by inviting viewers to refect on the pleasure of the process (Work) as well as the goal.">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="mobileOverFlow">
<!-- circle icon-->
<div id="circle"></div>
<!-- popup modal -->
<div id="modal">
<p> Over the course of 30 days, SPEEDRUNHOME.PAGE (2022) presents an HTML/CSS-constructed "speedrun" of queer spaces. This work is meant to be viewed from time to time, set as a viewer/user's browser homepage. Each day for thirty days it offers a refreshed set of poetry, images, and audio testimonials that reflect on how queerness is mobilized in the space of the day—alongwith the pleasures and discontents—in persuit of finding "home" through that space. Directly inspired by Ana Anthropy's 2008 video game the Mighty Jill Off, SPEEDRUNHOME.PAGE draws on the Girl in the Tower trope of many popular video games and fantasy stories by inviting viewers to reflect on the pleasure of the process as well as the prize. <br><br>
This work was originally comissioned for the exhibition <a href="https://artmuseum.utoronto.ca/exhibition/pleasurehome-desiring-queer-space/">pleasurehome: desiring queer space</a> by <a href="https://www.title66.com/the-company">Logan Williams.</a><br><br>
Created in 2022 by SHAWNÉ MICHAELAIN HOLLOWAY with development support by KT Duffy.</p>
</div>
<!-- test-Vid -->
<!-- <video id="test-Vid" width="640" height="360" autoplay muted loop>
<source src="images/house-BACKOUT.mp4" type="video/mp4">
</video> -->
<div id="dayVideosWrapper">
<!-- vid april 7 -->
<video id="v7" width="640" height="360" autoplay loop>
<source src="images/house-BACKOUT.mp4" type="video/mp4">
</video>
<!-- vid april 8 -->
<video id="v8" width="640" height="360" autoplay muted loop>
<source src="images/car_out.mp4" type="video/mp4">
</video>
<!-- vid april 9 -->
<video id="v9" width="640" height="360" autoplay muted loop>
<source src="images/bathroom.mp4" type="video/mp4">
</video>
<!-- vid april 10 -->
<video id="v10" width="640" height="360" autoplay muted loop>
<source src="images/bedroom_out.mp4" type="video/mp4">
</video>
<!-- vid april 11 -->
<video id="v11" width="640" height="360" autoplay muted loop>
<source src="images/groceryStore_out.mp4" type="video/mp4">
</video>
<!-- vid april 12 -->
<video id="v12" width="640" height="360" autoplay muted loop>
<source src="images/6sidewalk.mp4" type="video/mp4">
</video>
<!-- vid april 13 -->
<video id="v13" width="640" height="360" autoplay muted loop>
<source src="images/7festival.mp4" type="video/mp4">
</video>
<!-- vid april 14 -->
<video id="v14" width="640" height="360" autoplay loop>
<source src="images/8salon.mp4" type="video/mp4">
</video>
<!-- vid april 15 -->
<video id="v15" width="640" height="360" autoplay muted loop>
<source src="images/9gym_1.mp4" type="video/mp4">
</video>
<!-- vid april 16 -->
<video id="v16" width="640" height="360" autoplay muted loop>
<source src="images/10classroom.mp4" type="video/mp4">
</video>
<!-- vid april 17 -->
<video id="v17" width="640" height="360" autoplay muted loop>
<source src="images/11pool.mp4" type="video/mp4">
</video>
<!-- vid april 18 -->
<video id="v18" width="640" height="360" autoplay muted loop>
<source src="images/11pool.mp4" type="video/mp4">
</video>
<!-- vid april 19 -->
<video id="v19" width="640" height="360" autoplay muted loop>
<source src="images/17cards_1.mp4" type="video/mp4">
</video>
<!-- vid april 20 -->
<video id="v20" width="640" height="360" autoplay muted loop>
<source src="images/14clothingStore.mp4" type="video/mp4">
</video>
<!-- vid april 21 -->
<video id="v21" width="640" height="360" autoplay muted loop>
<source src="images/15secondLife.mp4" type="video/mp4">
</video>
<!-- vid april 22 -->
<video id="v22" width="640" height="360" autoplay muted loop>
<source src="images/16bondage.mp4" type="video/mp4">
</video>
<!-- vid april 23 -->
<video id="v23" width="640" height="360" autoplay muted loop>
<source src="images/17cards_1.mp4" type="video/mp4">
</video>
<!-- vid april 24 -->
<video id="v24" width="640" height="360" autoplay muted loop>
<source src="images/18movieTheatre.mp4" type="video/mp4">
</video>
<!-- vid april 25 -->
<video id="v25" width="640" height="360" autoplay muted loop>
<source src="images/19studioSpace.mp4" type="video/mp4">
</video>
<!-- vid april 26 -->
<video id="v26" width="640" height="360" autoplay muted loop>
<source src="images/20train.mp4" type="video/mp4">
</video>
<!-- vid april 27 -->
<video id="v27" width="640" height="360" autoplay muted loop>
<source src="images/21poolTable.mp4" type="video/mp4">
</video>
<!-- vid april 28 -->
<video id="v28" width="640" height="360" autoplay muted loop>
<source src="images/22skatepark.mp4" type="video/mp4">
</video>
<!-- vid april 29 -->
<video id="v29" width="640" height="360" autoplay muted loop>
<source src="images/23carnival.mp4" type="video/mp4">
</video>
<!-- vid april 30 -->
<video id="v30" width="640" height="360" autoplay muted loop>
<source src="images/24airport.mp4" type="video/mp4">
</video>
<!-- vid may 1 -->
<video id="mv1" width="640" height="360" autoplay muted loop>
<source src="images/25arcade.mp4" type="video/mp4">
</video>
<!-- vid may 2 -->
<video id="mv2" width="640" height="360" autoplay muted loop>
<source src="images/26park.mp4" type="video/mp4">
</video>
<!-- vid may 3 -->
<video id="mv3" width="640" height="360" autoplay muted loop>
<source src="images/27beach.mp4" type="video/mp4">
</video>
<!-- vid may 4 -->
<video id="mv4" width="640" height="360" autoplay muted loop>
<source src="images/28bus.mp4" type="video/mp4">
</video>
<!-- vid may 5 -->
<video id="mv5" width="640" height="360" autoplay muted loop>
<source src="images/29club.mp4" type="video/mp4">
</video>
<!-- vid may 6 -->
<video id="mv6" width="640" height="360" autoplay muted loop>
<!-- webcam - what is this video -->
</video>
<!-- vid may 7 -->
<div id="vidContainer">
<video autoplay="true" id="videoElement">
</video>
</div>
<!-- vid may 7
<script>
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (err0r) {
console.log("Something went wrong!");
});
}
</script>
vid may 7 -->
<div id="ladder"></div>
<!-- speedrunhomeGuyMedium -->
<div id="guy">
<img src="images/speedrunhomeGuyMedium.gif">
</div>
<!-- stanza lines for haiku -->
<div id="haikuContainer">
<h2 lang="en" id="lineOne"></h2>
<h2 lang="en" id="lineTwo"></h2>
<h2 lang="en" id="lineThree"></h2>
</div>
<!-- castle overlay -->
<div id="castle"></div>
<div id="vin"></div>
<!-- blue heart gifs -->
<div class="blueHeartOne"></div>
<div class="blueHeartTwo"></div>
<div class="blueHeartThree"></div>
<div class="blueHeartFour"></div>
<!-- red heart gifs -->
<div class="redHeartOne"></div>
<div class="redHeartTwo"></div>
<div class="redHeartThree"></div>
<div class="redHeartFour"></div>
<!-- red heart gifs -->
<div class="pinkHeartOne"></div>
<div class="pinkHeartTwo"></div>
<div class="pinkHeartThree"></div>
<div class="pinkHeartFour"></div>
</div>
</body>
</html>