-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (93 loc) · 5.17 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
<!doctype html>
<html lang="en-GB" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" href="/dst/css/stylesheet.css">
<title>Pride flags</title>
</head>
<body>
<header class="masthead" role="banner">
<h1 class="masthead__title">Guide to Pride Flags</h1>
</header>
<section class="section">
<header class="section__header">
<h2 class="section__title">Sexuality</h2>
<div class="section__description">
<p>Used to represent sexual attraction to one or more gender identities or biological sexes.</p>
</div>
</header>
<div class="grid">
<div class="flag flag--asexual" id="asexual"><span class="flag__label">Asexual</span></div>
<div class="flag flag--bisexual" id="bisexual"><span class="flag__label">Bisexual</span></div>
<div class="flag flag--rainbow" id="rainbow"><span class="flag__label">Gay / Rainbow Flag</span></div>
<div class="flag flag--lesbian" id="lesbian"><span class="flag__label">Lesbian</span></div>
<div class="flag flag--lipstick-lesbian" id="lipstick-lesbian"><span class="flag__label">Lipstick Lesbian</span></div>
<div class="flag flag--pansexual" id="pansexual"><span class="flag__label">Pansexual</span></div>
<div class="flag flag--polysexual" id="polysexual"><span class="flag__label">Polysexual</span></div>
</div>
</section>
<section class="section">
<header class="section__header">
<h2 class="section__title">Romanticism</h2>
<div class="section__description">
<p>Used to represent <em>romantic</em> attraction to one or more gender identities or biological sexes. This can be distinct from sexual attraction for multiple reasons.</p>
</div>
</header>
<div class="grid">
<div class="flag flag--aromantic" id="aromantic"><span class="flag__label">Aromantic</span></div>
<div class="flag flag--aromantic-alt" id="aromantic-alt"><span class="flag__label">Aromantic (alternate)</span></div>
<div class="flag flag--lithoromantic" id="lithoromantic"><span class="flag__label">Lithoromantic</span></div>
</div>
</section>
<section class="section">
<header class="section__header">
<h2 class="section__title">Gender identity</h2>
<div class="section__description">
<p>Used to represent an individual's gender identity, whuch may be the same or different from the one they were assigned at birth.</p>
</div>
</header>
<div class="grid">
<div class="flag flag--agender" id="agender"><span class="flag__label">Agender</span></div>
<div class="flag flag--bigender" id="bigender"><span class="flag__label">Bigender</span></div>
<div class="flag flag--genderfluid" id="genderfluid"><span class="flag__label">Genderfluid</span></div>
<div class="flag flag--genderqueer" id="genderqueer"><span class="flag__label">Genderqueer</span></div>
<div class="flag flag--intersex" id="intersex"><span class="flag__label">Intersex</span></div>
<div class="flag flag--non-binary" id="non-binary"><span class="flag__label">Non-binary</span></div>
<div class="flag flag--transgender" id="transgender"><span class="flag__label">Transgender</span></div>
</div>
</section>
<section class="section">
<header class="section__header">
<h2 class="section__title">Kink</h2>
<div class="section__description">
<p>Used to represent attraction to physical attributes, situations or other paraphernalia. Although generally considered part of the LGBT+ umbrella, users of these flags are not necessarily part of the LGBT+ community.</p>
</div>
</header>
<div class="grid">
<div class="flag flag--bear-brotherhood" id="bear-brotherhood"><span class="flag__label">Bear Brotherhood</span></div>
<div class="flag flag--fat" id="fat"><span class="flag__label">Fat</span></div>
<div class="flag flag--leather" id="leather"><span class="flag__label">Leather / BDSM</span></div>
<div class="flag flag--master-slave" id="master-slave"><span class="flag__label">Master-Slave</span></div>
<div class="flag flag--military" id="military"><span class="flag__label">Military / Uniform</span></div>
<div class="flag flag--ownership" id="ownership"><span class="flag__label">Ownership</span></div>
<div class="flag flag--pony" id="pony"><span class="flag__label">Pony</span></div>
<div class="flag flag--rubber" id="rubber"><span class="flag__label">Rubber</span></div>
<div class="flag flag--twink" id="twink"><span class="flag__label">Twink</span></div>
</div>
</section>
<section class="section">
<header class="section__header">
<h2 class="section__title">Other</h2>
</header>
<div class="grid">
<div class="flag flag--ally" id="ally"><span class="flag__label">Allies for Equality</span></div>
<div class="flag flag--polyamorous" id="polyamorous"><span class="flag__label">Polyamorous</span></div>
<div class="flag flag--rainbow-original" id="rainbow-original"><span class="flag__label">Rainbow (original)</span></div>
<div class="flag flag--rainbow-transitional" id="rainbow-transitional"><span class="flag__label">Rainbow (transitional)</span></div>
</div>
</section>
</body>
</html>