generated from risadams/repo-template
-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
300 lines (292 loc) · 12.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LGBT+ Pride Flags Demo</title>
<link rel="stylesheet" href="src/demo.css">
<link rel="stylesheet" href="dist/pride-flags.min.css">
</head>
<body>
<article>
<h1>LGBTQ+ Flags Coded in CSS</h1>
<section>
<h2>Gilbert Baker Pride Flag</h2>
<div class="flag gilbert-baker" role="img"
aria-label="Gilbert Baker Pride Flag. Eight vertical bars of equal size: hot pink, red, orange, yellow, green, turquoise, blue, and indigo.">
</div>
</section>
<section>
<h2>1978 Pride Flag</h2>
<div class="flag pride-1978" role="img"
aria-label="1978 Pride Flag. Seven vertical bars of equal size: red, orange, yellow, green, turquoise, blue, and indigo">
</div>
</section>
<section>
<h2>Traditional Gay Pride Flag</h2>
<div class="flag traditional" role="img"
aria-label="Traditional Gay Pride Flag. Six vertical bars of equal size: red, orange, yellow, green, blue, and indigo">
</div>
</section>
<section>
<h2>Philadelphia Pride Flag</h2>
<div class="flag philadelphia" role="img"
aria-label="Philadelphia Pride Flag. Eight vertical bars of equal size: black, brown, red, orange, yellow, green, blue, and indigo.">
</div>
</section>
<section>
<h2>Progress Pride Flag</h2>
<div class="flag progress" role="img"
aria-label="Progress Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. On the left side, it has triangles of color: white, pink, light blue, brown, and black.">
</div>
</section>
<section>
<h2>Intersex-Inclusive Pride Flag</h2>
<div class="flag intersex-inclusive" role="img"
aria-label="Intersex-Inclusive Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. On the left side, it has triangles of color: yellow (with a violet ring inside), white, pink, light blue, brown, and black.">
</div>
</section>
<section>
<h2>New Pride Flag</h2>
<div class="flag new-pride" role="img"
aria-label="New Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. And diagonally from top-left to bottom-right (until half) bars of white, pink, light blue, brown, and black.">
</div>
</section>
<section>
<h2>Social Justice Pride Flag</h2>
<div class="flag social-justice" role="img"
aria-label="New Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. And triangles on the right side: red, blue, and black.">
</div>
</section>
<section>
<h2>Ally Pride Flag</h2>
<div class="flag ally-pride" role="img"
aria-label="Ally Pride Flag. Six bars of equal height in black and white. The traditional gay pride flag is on top cropped in an A shape">
</div>
</section>
<section>
<h2>Pink Triangle Flag</h2>
<div class="flag pink-triangle" role="img"
aria-label="Pink Triangle Flag. An inverted pink triangle over a black background."></div>
</section>
<section>
<h2>Intersex Pride Flag</h2>
<div class="flag intersex" role="img"
aria-label="Intersex Pride Flag. A yellow flag with a purple ring in the center"></div>
</section>
<section>
<h2>Labrys Lesbian Pride Flag</h2>
<div class="flag labrys" role="img"
aria-label="Labrys Lesbian Pride Flag. A double-side white axe, inside a black inverted triangle over a purple background.">
</div>
</section>
<section>
<h2>Pride of Africa flag</h2>
<div class="flag pride-of-africa" role="img"
aria-label="Pride of Africa Flag. Colorful cubist design divided in 6 columns and 2 rows with shapes that forms the letters 'Pride of africa'">
</div>
</section>
<section>
<h2>Drag Pride Flag</h2>
<div class="flag drag" role="img"
aria-label="drag Pride Flag. Three vertical bars of equal size purple, white, and blue. A pink crown with stars in the center.">
</div>
</section>
<section>
<h2>Puppy Pride Flag</h2>
<div class="flag puppy" role="img"
aria-label="Puppy Pride Flag. Diagonal black and blue lines with a white line in the middle. There is a red bone at the center of the flag.">
</div>
</section>
<section>
<h2>Leather Pride Flag</h2>
<div class="flag leather" role="img"
aria-label="Leather Pride Flag. Nine vertical bars of equal size black and blue intercalated. The middle one os white, and it has a heart at the top left.">
</div>
</section>
<section>
<h2>Rubber Pride Flag</h2>
<div class="flag rubber" role="img"
aria-label="Rubber Pride Flag. Lines of black, red, and yellow, forming some angles."></div>
</section>
<section>
<h2>Lesbian Pride Flag</h2>
<div class="flag lesbian" role="img"
aria-label="Lesbian Pride Flag. Seven vertical bars of equal size: three shades of red/orange (to lighter), white, and three shades of pink (to darker)">
</div>
</section>
<section>
<h2>Bear Brotherhood Flag</h2>
<div class="flag bear-brotherhood" role="img"
aria-label="Bear Brotherhood Pride Flag. Seven vertical bars of equal size: four shades of brown (to lighter), white, gray, and black.">
</div>
</section>
<section>
<h2>Gay Male Pride Flag</h2>
<div class="flag trans-inclusive" role="img"
aria-label="trans-inclusive gay men's Pride Flag. Seven vertical bars of equal size: three shades of green (to lighter), white, and three shades of blue (to darker).">
</div>
</section>
<section>
<h2>Agender Pride Flag</h2>
<div class="flag agender" role="img"
aria-label="Agender Pride Flag. Seven vertical bars of equal size: black, gray, white, light green, white, gray, black.">
</div>
</section>
<section>
<h2>Bigender Pride Flag</h2>
<div class="flag bigender" role="img"
aria-label="Bigender Pride Flag. Seven vertical bars of equal size: dark pink, light pink, purple, white, purple, light blue, blue.">
</div>
</section>
<section>
<h2>Metagender Pride Flag</h2>
<div class="flag metagender" role="img"
aria-label="Metagender Pride Flag. Seven vertical bars of equal size: black, lime, yellow, white, yellow, lime, and black.">
</div>
</section>
<section>
<h2>Transgender Pride Flag</h2>
<div class="flag transgender" role="img"
aria-label="Transgender Pride Flag. Five bars of equal height: light blue, pink, white, pink, light blue.">
</div>
</section>
<section>
<h2>Genderfluid Pride Flag</h2>
<div class="flag genderfluid" role="img"
aria-label="Genderfluid Pride Flag. Five bars of equal height: pink, white, fuchsia, black, and blue."></div>
</section>
<section>
<h2>Aromantic Pride Flag</h2>
<div class="flag aromantic" role="img"
aria-label="Aromantic Pride Flag. Five bars of equal height: dark green, light green, white, gray, black.">
</div>
</section>
<section>
<h2>Abrosexual Pride Flag</h2>
<div class="flag abrosexual" role="img"
aria-label="Aromantic Pride Flag. Five bars of equal height: green, light green, white, light pink, hot pink.">
</div>
</section>
<section>
<h2>Graysexual Pride Flag</h2>
<div class="flag graysexual" role="img"
aria-label="Graysexual Pride Flag. Five bars of equal height: purple, gray, white, gray, and purple."></div>
</section>
<section>
<h2>Hijra Pride Flag</h2>
<div class="flag hijra" role="img"
aria-label="Hijra Pride Flag. Five bars (first and last double the size as the others): light blue, white, dark red, white, light pink.">
</div>
</section>
<section>
<h2>Bisexual Pride Flag</h2>
<div class="flag bisexual" role="img"
aria-label="Bisexual Pride Flag. Three horizontal lines Fuchsia, Pink, and Blue. The middle one half the size of the others.">
</div>
</section>
<section>
<h2>Demisexual Pride Flag</h2>
<div class="flag demisexual" role="img"
aria-label="Demisexual Pride Flag. Three horizontal lines white, purple (thin line), and light gray. And a black triangle on the left side.">
</div>
</section>
<section>
<h2>Demiromantic Pride Flag</h2>
<div class="flag demiromantic" role="img"
aria-label="Demiromantic Pride Flag. Three horizontal lines white, green (thin line), and light gray. And a black triangle on the left side.">
</div>
</section>
<section>
<h2>Nonbinary Pride Flag</h2>
<div class="flag nonbinary" role="img"
aria-label="Nonbinary Pride Flag. Four horizontal lines of the same size yellow, white, purple, and black.">
</div>
</section>
<section>
<h2>Asexual Pride Flag</h2>
<div class="flag asexual" role="img"
aria-label="Asexual Pride Flag. Four horizontal lines of the same size black, gray, white, and violet."></div>
</section>
<section>
<h2>Pansexual Pride Flag</h2>
<div class="flag pansexual" role="img"
aria-label="Pansexual Pride Flag. Three horizontal lines of the same size pink, gold, and light blue."></div>
</section>
<section>
<h2>Genderqueer Pride Flag</h2>
<div class="flag genderqueer" role="img"
aria-label="Genderqueer Pride Flag. Three bars of equal height: light violet, white, and green."></div>
</section>
<section>
<h2>Polysexual Pride Flag</h2>
<div class="flag polysexual" role="img"
aria-label="Polysexual Pride Flag. Three bars of equal height: magenta, light green, and light blue."></div>
</section>
<section>
<h2>Polyamory Flag (no scale)</h2>
<div class="flag polyamory" role="img"
aria-label="Polyamory Pride Flag. Three horizontal lines of the same size blue, red, and black. The symbol of pi at the center in yellow.">
</div>
</section>
<section>
<h2>Twink Pride Flag</h2>
<div class="flag twink" role="img"
aria-label="Twink Pride Flag. Three horizontal lines of the same size pink, white, and yellow. In the center of the flag, two interlaced male symbols.">
</div>
</section>
<section>
<h2>Androgyne Flag</h2>
<div class="flag androgyne" role="img"
aria-label="Androgyne Pride Flag. Three vertical lines of the same size: pink, purple, and blue."></div>
</section>
</article>
<hr />
<article>
<h1>Icon versions</h1>
<section>
<div class="flag icon pink-triangle"></div>
<div class="flag icon gilbert-baker"></div>
<div class="flag icon pride-1978"></div>
<div class="flag icon traditional"></div>
<div class="flag icon philadelphia"></div>
<div class="flag icon progress"></div>
<div class="flag icon intersex-inclusive"></div>
<div class="flag icon new-pride"></div>
<div class="flag icon social-justice"></div>
<div class="flag icon ally-pride"></div>
<div class="flag icon intersex"></div>
<div class="flag icon labrys"></div>
<div class="flag icon pride-of-africa"></div>
<div class="flag icon drag"></div>
<div class="flag icon puppy"></div>
<div class="flag icon leather"></div>
<div class="flag icon rubber"></div>
<div class="flag icon lesbian"></div>
<div class="flag icon bear-brotherhood"></div>
<div class="flag icon trans-inclusive"></div>
<div class="flag icon agender"></div>
<div class="flag icon bigender"></div>
<div class="flag icon metagender"></div>
<div class="flag icon transgender"></div>
<div class="flag icon genderfluid"></div>
<div class="flag icon aromantic"></div>
<div class="flag icon abrosexual"></div>
<div class="flag icon graysexual"></div>
<div class="flag icon hijra"></div>
<div class="flag icon bisexual"></div>
<div class="flag icon demisexual"></div>
<div class="flag icon demiromantic"></div>
<div class="flag icon nonbinary"></div>
<div class="flag icon asexual"></div>
<div class="flag icon pansexual"></div>
<div class="flag icon genderqueer"></div>
<div class="flag icon polysexual"></div>
<div class="flag icon twink"></div>
<div class="flag icon androgyne"></div>
<div class="flag icon polyamory"></div>
</section>
</article>
</body>
</html>