Skip to content

Commit dc59643

Browse files
pkobypkoby
authored
Updated data
1 parent c08f38a commit dc59643

File tree

3 files changed

+426
-361
lines changed

3 files changed

+426
-361
lines changed

Diff for: ‎index.html

+205
Original file line numberDiff line numberDiff line change
@@ -1 +1,206 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6+
<!-- <link rel="stylesheet" href="normalize.css" /> -->
7+
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏳️‍🌈</text></svg>">
8+
<link rel="stylesheet" href="style.css" />
9+
<title>LGBTQ+ Flag Filter</title>
10+
</head>
11+
<body>
12+
<h1>LGBTQ+ Flag Filter</h1>
13+
<h4>Click names for more info, click flags to go to the original image</h4>
14+
<div class="container">
15+
<aside id="filterMenu">
16+
<a href="javascript:void(0)" class="menubutton" onclick="closeNav()">&times;</a>
17+
<h2>Filters</h2>
18+
<div>
19+
<button>Reset</button>
20+
</div>
21+
<h3>Color</h3>
22+
<div>
23+
<div><input type="checkbox" name="Red" value="red" id="red"><label for="red" class="red">Red</label></div>
24+
<div><input type="checkbox" name="Orange" value="orange" id="orange"><label for="orange" class="orange">Orange</label></div>
25+
<div><input type="checkbox" name="Yellow" value="yellow" id="yellow"><label for="yellow" class="yellow">Yellow</label></div>
26+
<div><input type="checkbox" name="Green" value="green" id="green"><label for="green" class="green">Green</label></div>
27+
<div><input type="checkbox" name="Blue" value="blue" id="blue"><label for="blue" class="blue">Blue</label></div>
28+
<div><input type="checkbox" name="Purple" value="purple" id="purple"><label for="purple" class="purple">Purple</label></div>
29+
<div><input type="checkbox" name="White" value="white" id="white"><label for="white" class="white">White</label></div>
30+
<div><input type="checkbox" name="Pink" value="pink" id="pink"><label for="pink" class="pink">Pink</label></div>
31+
<div><input type="checkbox" name="Turquoise" value="turquoise" id="turquoise"><label for="turquoise" class="turquoise">Turquoise</label></div>
32+
<div><input type="checkbox" name="Brown" value="brown" id="brown"><label for="brown" class="brown">Brown</label></div>
33+
<div><input type="checkbox" name="Black" value="black" id="black"><label for="black" class="black">Black</label></div>
34+
<div><input type="checkbox" name="Gray" value="gray" id="gray"><label for="gray" class="gray">Gray</label></div>
35+
</div>
36+
<h3>Features</h3>
37+
<div>
38+
<div><input type="checkbox" name="Stripes" value="stripes" id="stripes"><label for="stripes">Stripes</label></div>
39+
<div><input type="checkbox" name="Chevrons" value="chevrons" id="chevrons"><label for="chevrons">Chevrons</label></div>
40+
<div><input type="checkbox" name="Symbols" value="symbols" id="symbols"><label for="symbols">Symbols</label></div>
41+
</div>
42+
<h3>Stripe Count</h3>
43+
<div>
44+
<div><input type="checkbox" name="Count" value="three" id="three"><label for="three">3</label></div>
45+
<div><input type="checkbox" name="Count" value="four" id="four"><label for="four">4</label></div>
46+
<div><input type="checkbox" name="Count" value="five" id="five"><label for="five">5</label></div>
47+
<div><input type="checkbox" name="Count" value="six" id="six"><label for="six">6</label></div>
48+
<div><input type="checkbox" name="Count" value="seven" id="seven"><label for="seven">7</label></div>
49+
<div><input type="checkbox" name="Count" value="eight" id="eight"><label for="eight">8</label></div>
50+
<div><input type="checkbox" name="Count" value="nine" id="nine"><label for="nine">9</label></div>
51+
</div>
52+
</aside>
53+
<main id="main">
54+
<button class="menubutton" onclick="openNav()">&#9776;</button><br>
55+
<!--
56+
<div class="flag white stripes">
57+
<a href="" target="_blank"><h3>Title</h3></a>
58+
59+
</div>
60+
-->
61+
<div class="flag black gray white green stripes seven">
62+
<a href="https://en.wikipedia.org/wiki/Non-binary_gender#Agender" target="_blank"><h3>Agender</h3></a>
63+
<a title="Salem Fontana, CC BY-SA 4.0 &lt;https://creativecommons.org/licenses/by-sa/4.0&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Agender_pride_flag.svg" target="_blank"><img alt="Agender pride flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Agender_pride_flag.svg/256px-Agender_pride_flag.svg.png"></a>
64+
</div>
65+
<div class="flag red orange yellow green blue purple black white stripes chevrons six">
66+
<a href="https://en.wikipedia.org/wiki/Straight_ally" target="_blank"><h3>Ally</h3></a>
67+
<a title="SVG file authored by AnonMoos, abstract flag design by http://straight-allies-for-equality.tumblr.com/, Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Straight_Ally_flag.svg"><img alt="Straight Ally flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Straight_Ally_flag.svg/256px-Straight_Ally_flag.svg.png"></a>
68+
</a>
69+
</div>
70+
<div class="flag black gray white green stripes five">
71+
<a href="https://en.wikipedia.org/wiki/Romantic_orientation#Aromanticism" target="_blank"><h3>Aromantic</h3></a>
72+
<a title="Cameron Whimsey, Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Aromantic_Pride_Flag.svg" target="_blank"><img alt="Aromantic Pride Flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Aromantic_Pride_Flag.svg/256px-Aromantic_Pride_Flag.svg.png"></a>
73+
</div>
74+
<div class="flag black gray white purple stripes four">
75+
<a href="https://en.wikipedia.org/wiki/Asexuality" target="_blank"><h3>Asexual</h3></a>
76+
<a title="AnonMoos (SVG file); AVEN (flag design), Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Asexual_Pride_Flag.svg" target="_blank"><img alt="Asexual Pride Flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Asexual_Pride_Flag.svg/256px-Asexual_Pride_Flag.svg.png"></a>
77+
</a>
78+
</div>
79+
<div class="flag brown orange yellow white gray black stripes symbols seven">
80+
<a href="https://en.wikipedia.org/wiki/Bear_flag_(gay_culture)" target="_blank"><h3>Bear</h3></a>
81+
<a title="Fibonacci., CC BY-SA 3.0 &lt;http://creativecommons.org/licenses/by-sa/3.0/&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Bear_Brotherhood_flag.svg" target="_blank"><img alt="Bear Brotherhood flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Bear_Brotherhood_flag.svg/256px-Bear_Brotherhood_flag.svg.png"></a>
82+
</div>
83+
<div class="flag purple pink white turquoise blue stripes seven">
84+
<a href="https://en.wikipedia.org/wiki/Non-binary_gender#Bigender" target="_blank"><h3>Bigender</h3></a>
85+
<a title="JavacBenny, Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Bigender_Flag.svg"><img alt="Bigender Flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Bigender_Flag.svg/256px-Bigender_Flag.svg.png"></a>
86+
</div>
87+
<div class="flag blue purple pink stripes three">
88+
<a href="https://en.wikipedia.org/wiki/Bisexual_pride_flag" target="_blank"><h3>Bisexual (1998)</h3></a>
89+
<a title="Michael Page, Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Bisexual_Pride_Flag.svg"><img alt="Bisexual Pride Flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Bisexual_Pride_Flag.svg/256px-Bisexual_Pride_Flag.svg.png"></a>
90+
<p>🧠 Michael Page</p>
91+
</div>
92+
<div class="flag black white purple gray stripes chevrons three">
93+
<a href="https://en.wikipedia.org/wiki/Gray_asexuality#Demisexuality" target="_blank"><h3>Demisexual</h3></a>
94+
<a title="!Original: VimopuVector: AnonMoos, Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Demisexual_Pride_Flag.svg"><img alt="Demisexual Pride Flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Demisexual_Pride_Flag.svg/256px-Demisexual_Pride_Flag.svg.png"></a>
95+
</div>
96+
<div class="flag turquoise white blue purple stripes seven">
97+
<a href="https://en.wikipedia.org/wiki/Gay_men" target="_blank"><h3>Gay</h3></a>
98+
<a title="gayflagblog, CC BY-SA 4.0 &lt;https://creativecommons.org/licenses/by-sa/4.0&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Gay_Men_Pride_Flag.svg"><img alt="Gay Men Pride Flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Gay_Men_Pride_Flag.svg/256px-Gay_Men_Pride_Flag.svg.png"></a>
99+
</div>
100+
<div class="flag pink white purple black blue stripes five">
101+
<a href="https://en.wikipedia.org/wiki/Non-binary_gender#Genderfluid" target="_blank"><h3>Genderfluid</h3></a>
102+
<a title="JJ Pole. McLennonSon, CC BY-SA 4.0 &lt;https://creativecommons.org/licenses/by-sa/4.0&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Genderfluidity_Pride-Flag.svg"><img alt="Genderfluidity Pride-Flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Genderfluidity_Pride-Flag.svg/256px-Genderfluidity_Pride-Flag.svg.png"></a>
103+
</div>
104+
<div class="flag purple white green stripes three">
105+
<a href="https://en.wikipedia.org/wiki/Non-binary_gender#Symbols_and_observances" target="_blank"><h3>Genderqueer</h3></a>
106+
<a title="Marilyn Roxie, McLennonSon, Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Genderqueer_Pride_Flag.svg"><img alt="Genderqueer Pride Flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Genderqueer_Pride_Flag.svg/256px-Genderqueer_Pride_Flag.svg.png"></a>
107+
</div>
108+
<div class="flag yellow purple symbols">
109+
<a href="https://en.wikipedia.org/wiki/Intersex_flag" target="_blank"><h3>Intersex (2013)</h3></a>
110+
<a title="Morgan Carpenter (SVG file simplification by AnonMoos), CC0, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Intersex_Pride_Flag.svg"><img alt="Intersex Pride Flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Intersex_Pride_Flag.svg/256px-Intersex_Pride_Flag.svg.png"></a>
111+
</div>
112+
<div class="flag black purple white stripes symbols nine">
113+
<a href="https://en.wikipedia.org/wiki/Leather_Pride_flag" target="_blank"><h3>Leather (1989)</h3></a>
114+
<a title="Icey at English Wikipedia, Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Leather,_Latex,_and_BDSM_pride_-_Light.svg"><img alt="Leather, Latex, and BDSM pride - Light" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Leather%2C_Latex%2C_and_BDSM_pride_-_Light.svg/256px-Leather%2C_Latex%2C_and_BDSM_pride_-_Light.svg.png"></a>
115+
<p>🧠 Tony DeBlase</p>
116+
</div>
117+
<div class="flag purple black white symbols">
118+
<a href="https://en.wikipedia.org/wiki/Lesbian_feminism" target="_blank"><h3>Labrys Lesbian</h3></a>
119+
<a title="Thespoondragon, CC0, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Labrys_Lesbian_Flag.svg"><img alt="Labrys Lesbian Flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Labrys_Lesbian_Flag.svg/256px-Labrys_Lesbian_Flag.svg.png"></a>
120+
</div>
1121

122+
123+
124+
<div title="Intersex-Inclusive Progress Pride (2018)" class="flag red orange yellow green blue purple turquoise pink brown black white stripes chevrons symbols six">
125+
<a href="https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)#Variations" target="_blank">
126+
<h3>Intersex-Inclusive Progress Pride (2018)</h3>
127+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Intersex-inclusive_pride_flag.svg/
128+
256px-Intersex-inclusive_pride_flag.svg.png">
129+
</a>
130+
</div>
131+
<div class="flag red orange yellow green blue purple turquoise pink brown black white stripes six">
132+
<a href="https://en.wikipedia.org/wiki/New_Pride_Flag" target="_blank">
133+
<h3>New Pride (2018)</h3>
134+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/New_Pride_Flag_by_Julia_Feliz_2018.png/256px-New_Pride_Flag_by_Julia_Feliz_2018.png">
135+
<p>🧠 Julia Feliz</p>
136+
</a>
137+
</div>
138+
<div class="flag yellow white purple black stripes four">
139+
<a href="https://en.wikipedia.org/wiki/Non-binary_gender" target="_blank"><h3>Non-Binary (2014)</h3></a>
140+
<a title="Kye Rowan, CC0, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Nonbinary_flag.svg" target="_blank"><img alt="Nonbinary flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Nonbinary_flag.svg/256px-Nonbinary_flag.svg.png"></a>
141+
<p>🧠 Kye Rowan</p>
142+
</div>
143+
<div class="flag red orange yellow green blue purple brown black stripes eight">
144+
<a href="https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)#Variations" target="_blank"><h3>Philly Pride (2017)</h3></a>
145+
<a title="Philadelphia City Council and Tierney, Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Philadelphia_Pride_Flag.svg"><img alt="Philadelphia Pride Flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Philadelphia_Pride_Flag.svg/256px-Philadelphia_Pride_Flag.svg.png"></a>
146+
</div>
147+
<div class="flag red orange yellow green blue purple turquoise pink stripes eight">
148+
<a href="https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)#Origin" target="_blank">
149+
<h3>Pride (1978)</h3>
150+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Gay_flag_8.svg/256px-Gay_flag_8.svg.png">
151+
<p>🧠 Gilbert Baker</p>
152+
</a>
153+
</div>
154+
<div class="flag red orange yellow green blue purple turquoise stripes seven">
155+
<a href="https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)#1978_to_1979" target="_blank">
156+
<h3>Pride (1978&ndash;79)</h3>
157+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Gay_flag_7.svg/256px-Gay_flag_7.svg.png">
158+
</a>
159+
</div>
160+
<div class="flag red orange yellow green blue purple stripes six">
161+
<a href="https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)#1978_to_1979" target="_blank">
162+
<h3>Pride (1979&ndash;present)</h3>
163+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Gay_Pride_Flag.svg/256px-Gay_Pride_Flag.svg.png">
164+
</a>
165+
</div>
166+
<div class="flag red orange yellow green blue purple turquoise pink stripes nine">
167+
<a href="https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)#Variations" target="_blank">
168+
<h3>Pride (2017)</h3>
169+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/2017-diversity-flag.png/256px-2017-diversity-flag.png">
170+
<p>🧠 Gilbert Baker</p>
171+
</a>
172+
</div>
173+
<div title="Pride (2018) (Estêvão Romane)" class="flag red orange yellow green blue purple turquoise pink white stripes nine">
174+
<a href="https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)#Variations" target="_blank">
175+
<h3>Pride (2018)</h3>
176+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/9stripeLGBTDiversity.svg/256px-9stripeLGBTDiversity.svg.png">
177+
<p>🧠 Estêvão Romane</p>
178+
</a>
179+
</div>
180+
<div class="flag red orange yellow green blue purple turquoise pink brown black white stripes chevrons six">
181+
<a href="https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)#Variations" target="_blank">
182+
<h3>Progress Pride (2018)</h3>
183+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/LGBTQ%2B_rainbow_flag_Quasar_%22Progress%22_variant.svg/
184+
256px-LGBTQ%2B_rainbow_flag_Quasar_%22Progress%22_variant.svg.png">
185+
</a>
186+
</div>
187+
<div class="flag red orange yellow green blue black stripes chevrons six">
188+
<a href="https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)#Variations" target="_blank">
189+
<h3>Social Justice Pride (2018)</h3>
190+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Social_Justice_Pride_Flag.png/256px-Social_Justice_Pride_Flag.png">
191+
</a>
192+
</div>
193+
<div class="flag blue turquoise pink white stripes five">
194+
<a href="https://en.wikipedia.org/wiki/Transgender_flag" target="_blank"><h3>Transgender (1999)</h3></a>
195+
<a title="SVG file Dlloyd based on Monica Helms design, Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Transgender_Pride_flag.svg"><img alt="Transgender Pride flag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Transgender_Pride_flag.svg/256px-Transgender_Pride_flag.svg.png"></a>
196+
<p>🧠 Monica Helms</p>
197+
</div>
198+
</main>
199+
</div>
200+
<footer></footer>
201+
202+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
203+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script>
204+
<script src="scripts.js"></script>
205+
</body>
206+
</html>

0 commit comments

Comments
 (0)