-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
153 lines (142 loc) · 6.29 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
<!DOCTYPE HTML>
<!--
Photon by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Pride by Pronouny</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
</head>
<body>
<!-- Header -->
<section id="header">
<div class="inner">
<span class="icon major fa-flag"></span>
<h1>Hey, this is a little service<br> for getting pride flags on demand</h1>
<p>We host <b id="amount">1000</b> pride flags from "pride-flags" on DeviantArt.</p>
<ul class="actions">
<li><a href="#one" class="button scrolly">Learn More</a></li>
</ul>
</div>
</section>
<!-- One -->
<section id="one" class="main style1">
<div class="container">
<div class="row 150%">
<div class="6u 12u$(medium)">
<header class="major">
<h2>Get PNG flags with ease</h2>
</header>
<p>This service hosts a directory with a host of pride flags. <code>http://pride.pronouny.xyz/flags/[name].png</code></p>
</div>
<div class="6u$ 12u$(medium) important(medium)">
<span class="image fit"><img src="flags/mogii.png" alt="" /></span>
</div>
</div>
</div>
</section>
<!-- Two -->
<section id="two" class="main style2">
<div class="container">
<div class="row 150%">
<div class="6u 12u$(medium)">
<ul class="major-icons">
<li><span class="icon style1 major fa-paint-brush"></span></li>
<li><span class="icon style2 major fa-flag"></span></li>
<li><span class="icon style3 major fa-deviantart"></span></li>
<li><span class="icon style4 major fa-code"></span></li>
<li><span class="icon style5 major fa-github"></span></li>
<li><span class="icon style6 major fa-link"></span></li>
</ul>
</div>
<div class="6u$ 12u$(medium)">
<header class="major">
<h2>Built for <a href="https://pronouny.xyz"><i>Pronouny</i></a> <br>
using the work of <a href="http://pride-flags.deviantart.com"><i class="fa fa-deviantart"></i> <i>Pride-Flags</i></a><br></h2>
</header>
<p>Pronouny is a new service for sharing personal pronouns with friends. Users can create accounts and add their pronouns. They can connect with their friends and recieve alerts when their friends pronouns change. It is entirely open source and permissively licensed. Pronouny is being built as a student project with no outside funding.</p>
<p>This service will allow users on Pronouny to easily select pride flags to feature on their profiles.</p>
<p>The flags used are pulled directly from "pride-flags" on DeviantArt. They have been renamed and are hosted on more reliable infrastructure. They will gradually become available in SVG format.</p>
</div>
</div>
</div>
</section>
<!-- Three -->
<section id="three" class="main style1 special">
<div class="container">
<header class="major">
<h2>Examples</h2>
</header>
<p>Here are some examples of the service. All flags are located at <code>/flags/[name].png</code>. If there are multiple versions of a flag, they will be marked using <code>[name]-2.png</code>, <code>[name]-3.png</code>, and so on. Most flags are 5:3.</p>
<div class="row 150%">
<div class="4u 12u$(medium)">
<span class="image fit"><img id="exampleOneImg" src="flags/genderflux.png" alt="" /></span>
<h3 id="exampleOneName">Genderflux</h3>
<p><code id="exampleOneCode">/flags/genderflux.png</code></p>
<ul class="actions">
<li><a href="/flags/genderflux.png" id="exampleOneLink" class="button">Download</a></li>
</ul>
</div>
<div class="4u 12u$(medium)">
<span class="image fit"><img id="exampleTwoImg" src="flags/pan.png" alt="" /></span>
<h3 id="exampleTwoName">Pan</h3>
<p><code id="exampleTwoCode">/flags/pan.png</code></p>
<ul class="actions">
<li><a href="/flags/pan.png" id="exampleTwoLink" class="button">Download</a></li>
</ul>
</div>
<div class="4u$ 12u$(medium)">
<span class="image fit"><img id="exampleThreeImg" src="flags/quoiromantic.png" alt="" /></span>
<h3 id="exampleThreeName">Quoiromantic</h3>
<p><code id="exampleThreeCode">/flags/quoiromantic.png</code></p>
<ul class="actions">
<li><a href="/flags/quoiromantic.png" id="exampleThreeLink" class="button">Download</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Four -->
<section id="four" class="main style2 special">
<div class="container">
<ul class="actions uniform">
<li><a href="https://pronouny.xyz" class="button">Pronouny</a></li>
<li><a href="https://pride-flags.deviantart.com" class="button">DeviantArt</a></li>
</ul>
</div>
</section>
<!-- Five -->
<section id="five" class="main style1">
<div class="container">
<header class="major">
<h2>List</h2>
</header>
<div class="row" id="list">
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<ul class="icons">
<li><a href="https://github.com/pronouns/pride-flags-png" class="icon alt fa-github"><span class="label">GitHub</span></a></li>
</ul>
<ul class="copyright">
<li>Made with <i class="fa fa-heart"></i> and <i class="fa fa-code"></i> by Pronouny using "pride-flags", GitHub Pages, <a href="http://html5up.net">HTML5 UP</a>, and CloudFlare. </li>
</ul>
</section>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>