This repository has been archived by the owner on Aug 21, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
462 lines (430 loc) · 20 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
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
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="An interactive look at the History of Drag Queens">
<meta name="keywords" content="web design, student, Maryville, drag, lgbt, history">
<meta name="author" content="James Lewandowski">
<!-- ===================
CSS links -->
<link href="css/index.css" rel="stylesheet" type="text/css">
<!-- font links -->
<link rel="stylesheet" href="">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/glacial-indifference" type="text/css" />
<link rel="stylesheet" href="https://use.typekit.net/vtj8oat.css">
<title>What a Drag</title>
</head>
<body>
<!-- ===================
main navigation -->
<nav>
<div class="navLine"></div>
<ul>
<li>
<a href="#s_01">
<div class="navCirs">
<div class="inner rel"></div>
</div>
<p>Religious</p>
</a>
</li>
<li>
<a href="#s_02">
<div class="navCirs">
<div class="inner vaud"></div>
</div>
<p>Vaudeville</p>
</a>
</li>
<li>
<a href="#s_03">
<div class="navCirs">
<div class="inner pro"></div>
</div>
<p>Probation</p>
</a>
</li>
<li>
<a href="#s_04">
<div class="navCirs">
<div class="inner stone"></div>
</div>
<p>Stonewall</p>
</a>
</li>
<li>
<a href="#s_05">
<div class="navCirs">
<div class="inner main"></div>
</div>
<p>Mainstream Film</p>
</a>
</li>
<li>
<a href="#s_06">
<div class="navCirs">
<div class="inner drag"></div>
</div>
<p>RuPauls Drag Race</p>
</a>
</li>
</ul>
</nav>
<!-- ===================
header -->
<!-- <div class="grid"> -->
<header id="top">
<!-- <div class="navCircle"></div> -->
<div class="alaskaHead">
<img src="images/header/alaska.png">
</div>
<div class="blueColors">
<div class="rgtBlue"></div>
<div class="mdlBlue"></div>
<div class="lftBlue"></div>
</div>
<!-- <div class="content-width"> -->
<div class="textHead">
<h1 class="line01">WHAT</h1>
<h1 class="line02">a</h1>
<h1 class="line03">DRAG</h1>
</div>
<div class="descriptionHead">
<p>An interactive guide through the history of drag culture.</p>
</div>
<div class="scrollDownInd">
<p>Scroll Down</p>
<svg xmlns="http://www.w3.org/2000/svg" width="74.459" height="14.446" viewBox="0 0 74.459 14.446">
<path d="M1708.094,1023.652c39.862,26.182,72.7,0,72.7,0" transform="translate(-1707.271 -1022.398)"
fill="none" stroke="#fff" stroke-width="3" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="74.459" height="14.446" viewBox="0 0 74.459 14.446">
<path d="M1708.094,1023.652c39.862,26.182,72.7,0,72.7,0" transform="translate(-1707.271 -1022.398)"
fill="none" stroke="#fff" stroke-width="3" /></svg>
</div>
<!-- </div> -->
</header>
<!-- ===================
primary sections -->
<div class="s_01bluebar"></div>
<section id="s_01">
<div class="s_01wrapper">
<div class="header">
<h1>The Religious Era</h1>
</div>
<div class="s_01header">
<img class="img1" src="images/1religious/Group 2@2x.png">
<img class="img2" src="images/1religious/monks@2x.png">
</div>
<div class="s_01txtblk">
<div class="infoBlock s_01t1">
<!-- <div class="imgBlock ">
image here
</div> -->
<p>
Drag began centuries ago in the form of religious plays.
</p>
</div>
<div class="infoBlock s_01t2">
<!-- <div class="imgBlock">
image here
</div> -->
<p>
But first. It all began in Ancient Greece. Woman of this time were
barred from participation in dramatic performances that were deemed "too dangerous".
</p>
</div>
<div class="infoBlock s_01t3">
<!-- <div class="imgBlock">
image here
</div> -->
<p>The Catholic church ended up taking, and keeping this tradition for
what they considered "Moralistic precautions."</p>
</div>
<div class="infoBlock s_01t4 ">
<!-- <div class="imgBlock">
image here
</div> -->
<p>Theater existed soley in the form of church pageants and
reenacted biblica stories. If there was a woman to be portrayed in the act, the
role was portrayed by men.</p>
</div>
</div>
</div>
</section>
<section id="s_02">
<div class="s_02wrapper">
<div class="header">
<h1>The Vaudeville Era</h1>
</div>
<video playsinline autoplay muted loop poster="images/2vaudeville/vaude@2x.png" class="vvid">
<source src="mov/vaudebg.webm" type="video/webm">
</video>
<div class="s_02txtline">
<ul>
<li>
<p class="txt line01">Vaudeville is an entertainment type that began in the early 20th
century.
It featured special acts such as burlesque, comedy, song, and dance.
</p>
</li>
<li>
<p class="txt line02">It came before the rise of movie theaters in the United States in
the form of travelling shows.
It became one of the most popular forms of family fun entertainment between the years of
1870 and 1920.</p>
</li>
<li>
<p class="txt line03">Early drag entertainments during this period intended to mock
rather than praise woman. The vaudeville types of drag would today translate to "glamour
drag."</p>
</li>
</ul>
</div>
</div>
<!-- <div class="s_02wrapper"> -->
<!-- </div> -->
</section>
<section id="s_03">
<div class="s_03wrapper">
<div class="header">
<h1>The Prohibition Period</h1>
</div>
<div class="scn scene01">
<img class="img01" src="images/3prohibition/1.gif">
<img class="img02" src="images/3prohibition/2.jpg">
<img class="img03" src="images/3prohibition/3.jpg">
<p class="txt">Its the 1920's and the Prohibition has begun. During this time alcohol was
infamously banned and those seeking it were forced into underground bars called "Speakeasies.</p>
</div>
<div class="scn scene02">
<img class="img01" src="images/3prohibition/5.jpg">
<p class="txt">During this era, gay men, too, found a place to express an underground art
form which had came to be called Drag during the occuring 'pansy craze' going on at the time.</p>
</div>
<div class="scn scene03">
<img class="img01" src="images/3prohibition/6.jpg">
<p class="txt">It was at the turn of century when men began to use drag. However, as gay men
gradually came out of the closet, drag became more closely linked to homosexuallity and was forced
into an underground art.</p>
</div>
<div class="scn scene04">
<img class="img01" src="images/3prohibition/7.jpg">
<p class="txt">Prohibition gave gay men a place to congregate away from the eyes of the law
and more and more bars were created to cater exclusively to gay clientel.</p>
</div>
<div class="scn scene05">
<img class="img01" src="images/3prohibition/8.jpg">
<img class="img02" src="images/3prohibition/9.jpg">
<p class="txt">Even after the Prohibition gay bars featuring drag continued thriving up until
the 1950's and 60's when culture really began to crimilize gay culture and the police cracked down
on these gay bars.</p>
</div>
</div>
</section>
<section id="s_04">
<div class="wrapper">
<div class="imagecover"></div>
<div class="header">
<h1>1950's, 60's and the Mafia</h1>
</div>
<div class="blks01">
<ul class="blk01">
<li>
<p class="txt t01">The 50's and 60's were a tough time to be homosexual.</p>
</li>
<li>
<p class="txt t02">It became illegal to serve alcohol to homosexual individuals or for them
</p>
</li>
<li>
<p class="txt t03">to dance together. They were, ultimately, forced back underground.</p>
</li>
</ul>
<ul class="blk02">
<li>
<p class="txt t04">Police had begun cracking down on gay friendly establishments.</p>
</li>
<li>
<p class="txt t05">They enforced anti-cross-dressing laws; in New York men were legally forced
to wear no</p>
</li>
<li>
<p class="txt t06">fewer than three pieces of male clothing in order to not be arrested for
drag.</p>
</li>
</ul>
<ul class="blk03">
<li>
<p class="txt t07">In 1965 the Imperial Court System was founded as the first</p>
</li>
<li>
<p class="txt t08">Drag Queen Organization</p>
</li>
</ul>
</div>
<div class="blks02">
<ul class="blk04">
<li>
<p class="txt t09">In the year 1966 a member of the Genovese crime family</p>
</li>
<li>
<p class="txt t10">purchased the Stonewall in Manhattans Greenwich Village.</p>
</li>
<li>
<p class="txt t11">It would soon become a hub of gay culture and the center of a series of
riots in 1969 known as the Stonewall Riots.</p>
</li>
</ul>
<ul class="blk05">
<li>
<p class="txt t12">At the forefront of the Stonewall Riots was the drag queen</p>
</li>
<li>
<p class="txt t13">Flawless Sabrina who organized multiple pageants across the United States
to showcase drag queens</p>
</li>
<li>
<p class="txt t14">in a scene much like a traditional beauty pageant.</p>
</li>
</ul>
<ul class="blk06">
<li>
<p class="txt t15">At the time of the Stonewall Riots homosexual acts were illegal in every
state except Illinois.</p>
</li>
<li>
<p class="txt t16">On June 28th, New York Police Officers raided the bar seeking to arrest
homosexual patrons.</p>
</li>
</ul>
</div>
<div class="blks03">
<ul class="blk07">
<li>
<p class="txt t17">The crowd decided, instead of being arrested</p>
</li>
<li>
<p class="txt t18">to fight back. High heel-wearing drag queens and transsexuals were on the
frontlines</p>
</li>
<li>
<p class="txt t19">of the six-day skirmish that officially signaled the started of the gay
rights movement in the United States.</p>
</li>
</ul>
<ul class="blk08">
<li>
<p class="txt t20">Even with legal oppressiona, drag queen communites organized more formally
by the mid 1960's.</p>
</li>
<li>
<p class="txt t21">As a response to the police shutting down a string of gay bars Jose Julio
Sarria, San Fransicos first openly gay political candidate</p>
</li>
<li>
<p class="txt t22">and performer founded the Imperial Court System.</p>
</li>
</ul>
</div>
</div>
</section>
<section id="s_05">
<div class="s_05wrapper">
<div class="header">
<h1>Drag in Mainstream</h1>
</div>
<div class="rocky">
<img class="bg" src="images/5movies/rockyheader.jpg">
<div class="txt">
<p>Released in 1975, Rocky Horror Picture Show became an immediatly cult hit which became known
as a midnight movie.</p>
<p>Audience members would dress as the characters and reenact similar performances based on the
movie.</p>
<p>Members of the LGBT Community comprised a large part of the Rocky Horror Cult following.
They embraced the idea of sexual liberation and androgyny.</p>
<p>It became one of the first movies to bring Drag Culture and Gender Bending performances to
the mainstream light.</p>
</div>
</div>
<div class="paris">
<img class="bg" src="images/5movies/parisisburning header.jpg">
<!-- <div class="txt"> -->
<div class="txt blk01">
<p>1983, A New York University Student Jennie Livingston met a group of gay men who were
dancing and posing in washington square park.</p>
<p>She asked what they were doing and they told her they were "Voguing." The idea of Paris
is Burning was formed.</p>
</div>
<div class="txt blk02">
<p>The film, which was released on September 13th, 1990 explored the elaborate ball
competitions in which contestants adhered to categories or themes and must "walk" like in a
fashion walk.</p>
<p>Contestants are judged on their dance talent, the beauty of their clothing, and the
"realness" of their drag. </p>
</div>
<div class="txt blk03">
<p>It inlcuded Queens who were prominent members of the Drag Scene such as Pepper LaBeija,
Dorian Corey, Angie Xtravaganza, and Willi Ninja.</p>
<p>The film also featured subjects of importance such as the issues of AIDS, racism,
poverty, violence, and homophobia.</p>
</div>
<!-- </div> -->
</div>
</div>
</section>
<section id="s_06">
<div class="wrapper">
<img class="rupaulbg1" src="images/6rupaul/bg1.jpg">
<div class="header">
<!-- <img class="s_06rupaulimg" src="images/6rupaul/logo.png">
-->
<h1>RuPaul</h1>
</div>
<div class="txt">
<p class="txt1">Born in San Diego, California on November 17, 1960. Ernestine "Toni" Charles, or
known today as RuPaul, pursued performing arts at the age of 15.</p>
<p class="txt2">In 1982 he debuted on an Atlanta show called The American Music Show. Soon after he
helped create a low-budget film title Star Booty and an album by the same name. </p>
<p class="txt3">His first prominent national exposure came in 1989 when he starred as an extra,
dancing in the video for "Love Shack" by the B52s.</p>
<p class="txt4">In the early 1990's RuPaul worked the Georgia club scene, participating in gender
bender style performances.</p>
<p class="txt5">In 1993, RuPaul recorded the dance hit "Supermodel (You Better Work). It was,
unexpectedly, a huge success on the MTV Channels and peaked at number 45 on the Billboard Hot 100.
</p>
<p class="txt6">Then in 2008, RuPaul began the production of RuPaul's Drag Race, a reality
television game show which aired on Logo.</p>
</div>
<div class="videobg">
<video playsinline autoplay muted loop poster="images/2vaudeville/vaude@2x.png" class="ruVid">
<source src="mov/ruVid.mp4" type="video/mp4">
</video>
</div>
<div class="theater"></div>
<div class="theatertxt">
<p>RuPauls Drag Race premiered in 2009 and since then has become a popular phenomenon.</p>
<p>It shot Drag Entertainers to the mainstream and as of now, it is on its 11th Season.</p>
<p>Beyond its history, Drag has found a fan base through the various means of television, internet and
as Drag has entered the Mainstream media, it seems it is here to stay.</p>
</div>
</div>
</section>
<section id="s_07">
<h1>You've Read it All. Now, Sashay Away.</h1>
<a href="#top">
<p>Return to Top</p>
</a>
</section>
<!-- ===================
scripts -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"
integrity="sha256-hzFNvfa40yrwN2f2YvKFEMOM7ooIaoX9fJwVomCFcBk=" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" src="js/scene_01.js"></script> -->
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>