-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (67 loc) · 3.38 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outside The Panels</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<link rel="stylesheet" href="public/styles/style.min.css">
</head>
<body>
<header>
<h1>Outside The Panels</h1>
<h2>An LGBTQ* & POC Comics Database</h2>
<h3 class="subtitle">We think People of Colour and LGBTQ* makers and characters are important in comics. That’s why we built this tool to help you find them!</h3>
<div class="container">
<form class="choose-comics">
<div class="dropdown--container">
<button class="dropdown" id="dropdown">
I only want comics that have:
</button>
<div class="dropdown--options">
<div class="checkbox--container">
<input type="checkbox" value="authorpoc" class="checkbox" id="checkbox-1">
<label class="label" for="checkbox-1">Artists/Authors of Colour</label>
</div>
<div class="checkbox--container">
<input type="checkbox" value="characterpoc" class="checkbox" id="checkbox-2">
<label class="label" for="checkbox-2">Characters of Colour</label>
</div>
<div class="checkbox--container">
<input type="checkbox" value="authorlgbtq" class="checkbox" id="checkbox-3">
<label class="label" for="checkbox-3">LGBTQ* Artists/Authors</label>
</div>
<div class="checkbox--container">
<input type="checkbox" value="characterlgbtq" class="checkbox" id="checkbox-4">
<label class="label" for="checkbox-4">LGBTQ* Characters</label>
</div>
</div> <!-- dropdown--options -->
</div>
<input type="submit" value="Find A Comic" id="submit">
</form> <!-- choose-comics -->
</div> <!-- container -->
<p class="small">POC = People of Colour</p>
<p class="small">LGBTQ* = Lesbian, Gay, Bisexual, Trans, Queer, Questioning, Intersex, 2 Spirit, Asexual, Pansexual</p>
</header>
<!-- loader -->
<div class="spinner"></div>
<!-- form results-->
<main id="results">
<div id="container">
<div id="wrapper"></div>
<div id ="pagination"></div>
</div>
</main>
<!-- credits -->
<footer>
<p class="small">Made with ♥ by <a href="http://sarahhamdi.com" target="_blank">Sarah Hamdi</a>, who is not-so-secretly a vampire slayer.</p>
<p class="small">Comic contributions from the Scoobies: Cindy Ma, Heather Mawby, Keira Mawby, May El-Abdallah, and David Missio.</p>
<p class="small">This site uses <a href="https://sheetsu.com/">Sheetsu</a> + the <a href="https://www.goodreads.com/api">Goodreads</a> & <a href="https://openlibrary.org/dev/docs/api/covers" target="_blank">Open Library</a> APIs.
</p>
</footer>
<!--scripts-->
<script src="https://www.gstatic.com/firebasejs/5.9.3/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<script type="module" src="public/scripts/main.min.js"></script>
</body>
</html>