-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
221 lines (192 loc) · 12 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type With Pride</title>
<meta name="description" content="To honor the memory of Gilbert Baker, NewFest and NYC Pride partnered with Fontself to create a free font inspired by the design language of the iconic Rainbow Flag, the font was named 'Gilbert' after Mr. Baker.">
<meta property="og:site_name" content="Type With Pride">
<meta property="og:title" content="Type With Pride">
<meta property="og:url" content="https://www.typewithpride.com">
<meta property="og:type" content="website">
<meta property="og:description" content="To honor the memory of Gilbert Baker, NewFest and NYC Pride partnered with Fontself to create a free font inspired by the design language of the iconic Rainbow Flag, the font was named 'Gilbert' after Mr. Baker.">
<meta property="og:image" content="TypeWithPride_files/flag.jpg?format=1500w">
<meta property="og:image:width" content="302">
<meta property="og:image:height" content="201">
<meta itemprop="name" content="Type With Pride">
<meta itemprop="url" content="https://www.typewithpride.com">
<meta itemprop="description" content="To honor the memory of Gilbert Baker, NewFest and NYC Pride partnered with Fontself to create a free font inspired by the design language of the iconic Rainbow Flag, the font was named 'Gilbert' after Mr. Baker.">
<meta itemprop="thumbnailUrl" content="TypeWithPride_files/flag.jpg?format=1500w">
<link rel="image_src" href="TypeWithPride_files/flag.jpg?format=1500w">
<meta itemprop="image" content="TypeWithPride_files/flag.jpg?format=1500w">
<meta name="twitter:title" content="Type With Pride">
<meta name="twitter:image" content="TypeWithPride_files/flag.jpg?format=1500w">
<meta name="twitter:url" content="https://www.typewithpride.com">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="To honor the memory of Gilbert Baker, NewFest and NYC Pride partnered with Fontself to create a free font inspired by the design language of the iconic Rainbow Flag, the font was named 'Gilbert' after Mr. Baker.">
<link rel="icon" type="image/x-icon" href="TypeWithPride_files/favicon.ico?format=100w">
<link rel="canonical" href="https://www.typewithpride.com/">
<style>
body {
color: #999;
background-color: white;
font-family: Arial, sans-serif;
}
.container {
margin: 0 auto;
padding: 20px;
margin-top: :50px;
margin-bottom: :50px;
text-align: center;
max-width: 800px;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
text-transform: uppercase;
}
.menu a {
color: #ccc;
font-size: 0.9rem;
}
.menu div {
padding: 0 1rem;
}
a {
color: #7cc2d0;
text-decoration: none;
}
p {
text-align: left;
}
.image-cycle {
position: relative; /* This allows positioning the next image */
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden; /* Hides overflowing content */
}
.image-cycle img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
opacity: 0; /* Initially hide all images */
transition: opacity 1s ease-in-out; /* Set smooth fade transition */
}
.image-cycle img:first-child {
opacity: 1; /* Show the first image initially */
}
</style>
</head>
<body>
<div class="container">
<div id="twp-section"/>
<div class="menu">
<div><a href="#twp-section">About</a></div>
<div><a href="#download-section">Download</a></div>
<div><img src="TypeWithPride_files/flag.jpg" width="40px" alt="Type With Pride"></div>
<div><a href="#gallery-section">Gallery</a></div>
<div><a href="#press-section">Press</a></div>
</div>
<p><img src="TypeWithPride_files/PRkit.jpg" alt="PRkit.jpg" width="100%" height="auto"></p>
<p>On 31 March, 2017, Gilbert Baker the creator of the iconic Rainbow Flag sadly passed away. Mr. Baker was both an LGBTQ activist and artist, and was known for helping friends create banners for protests and marches. To honor the memory of Gilbert Baker, <a href="http://newfest.org/" target="_blank">NewFest</a> and <a href="https://www.nycpride.org" target="_blank">NYC Pride</a> partnered with <a href="https://www.fontself.com/" target="_blank">Fontself</a> to create a free font inspired by the design language of the iconic Rainbow Flag, the font was named 'Gilbert' after Mr. Baker. A preview version of the font can be downloaded for free in the download section.</p>
<script src="https://player.vimeo.com/api/player.js"></script>
<div style="padding:50% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/316215965" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
<div style="padding:50% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/213887934" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
<div id="download-section"/>
<h2>Download Gilbert</h2>
<p class="" style="white-space:pre-wrap;">The Gilbert font was originally designed for striking headlines and statements that could live on banners for rallies and protests and it is now currently being built out into a whole family of weights and styles. The font is available in two versions, a standard vector font and a color font (in OpenType-SVG format) currently usable in Photoshop CC 2017, Illustrator CC 2018, InDesign CC 2019 and above. Both fonts are early beta previews that you can download below for free, and you can follow <a href="https://www.instagram.com/typewithpride/" target="_blank">@TypeWithPride</a> on Instagram and <a href="https://stories.fontself.com/type-with-pride-a-color-font-chronicle-bb61fda31566" target="_blank">on our development blog</a> for news about new font weights, styles and creative contests.</p>
<p class="" style="white-space:pre-wrap;">Learn more about color fonts on Fontself’s dedicated website: <a href="https://www.colorfonts.wtf" target="_blank">colorfonts.wtf</a> <br></p>
<p style="text-align:center;white-space:pre-wrap;" class="">NEW: now includes Katakana characters <br>カタカナ文字を含む</p>
<diw>
<a href="https://github.com/Fontself/TypeWithPride/releases/download/1.005/Gilbert_1.005_alpha.zip" target="_blank">
<img src="TypeWithPride_files/download.png" width="245" height="62"style="">
</a>
</diw>
<p> </p>
<div class="image-cycle" id="cycle1">
<img src="TypeWithPride_files/GB.jpg" alt="Image 1" />
<img src="TypeWithPride_files/C.jpg" alt="Image 2" />
<img src="TypeWithPride_files/D.jpg" alt="Image 3" />
<img src="TypeWithPride_files/coming.jpg" alt="Image 4" />
<img src="TypeWithPride_files/A.jpg" alt="Image 5" />
<img src="TypeWithPride_files/B.jpg" alt="Image 6" />
</div>
<p> </p>
<h2>Download Gilbert Animated</h2>
<p>Type with Pride partnered with <a href="https://animography.net/">Animography</a> to create Gilbert Animated, a motion-ready typography resource designed for animation, film, video, social posts, GIFs and much more. The free animated font is useable in Adobe After Effects. Find out more at <a href="https://animography.net/">animography.net</a>
</p>
<p><a href="https://animography.net/products/gilbert">
<div><img src="TypeWithPride_files/download(1).png" alt="download.png"></div></a>
</p>
<p> </p>
<div><img src="TypeWithPride_files/image-asset.gif" width="100%" height="auto" alt="image-asset"></div>
<p> </p>
<div id="gallery-section"/>
<p> </p>
<h2>Gallery</h2>
<p>Gilbert Baker was both an LGBTQ activist and artist, and was known for helping friends create banners for protests and marches. In the spirit of Mr. Baker's creative and collaborative nature, we've created free downloadable art intended to be printed and held high at pride events, protests and rallies.</p>
<div class="image-cycle" id="cycle2">
<img src="TypeWithPride_files/L.jpg" alt="Image L" />
<img src="TypeWithPride_files/01.jpg" alt="Image G" />
<img src="TypeWithPride_files/B(1).jpg" alt="Image B" />
<img src="TypeWithPride_files/T.jpg" alt="Image T" />
<img src="TypeWithPride_files/Q.jpg" alt="Image Q" />
</div>
<img src="TypeWithPride_files/image-asset(1).gif" width="100%" height="auto" alt="" >
<p> </p>
<img src="TypeWithPride_files/image-asset(3).jpeg" width="100%" height="auto" alt="image-asset(3).jpeg" >
<p> </p>
<img src="TypeWithPride_files/Katakana-Behance-Image.png" width="100%" height="auto" alt="Katakana-Behance-Image.png" >
<p> </p>
<img src="TypeWithPride_files/image-asset(19).jpeg" width="100%" height="auto" alt="image-asset.jpeg(19)" >
<div id="press-section"/>
<p> </p>
<h2>Type With Pride in the news</h2>
<div>
<a href="https://www.fastcodesign.com/90111607/the-rainbow-flag-is-now-an-awesome-font"><img src="TypeWithPride_files/fastco.png" width="200" alt="fastco.png"></a>
<a href="http://www.adweek.com/creativity/lgbtq-pride-marchers-now-have-their-very-own-font-for-signs/"><img src="TypeWithPride_files/adweek.png" width="200" alt="adweek.png"></a>
<a href="http://create.adobe.com/2017/4/21/free_font_inspired_by_a_flag_.html"><img src="TypeWithPride_files/adobe.png" width="200" alt="adobe.png"></a>
<a href="https://www.bustle.com/p/this-font-inspired-by-the-rainbow-flag-in-honor-of-gilbert-baker-lets-you-type-every-letter-with-pride-53170"><img src="TypeWithPride_files/bustle.png" width="200" alt="bustle.png"></a>
<a href="http://www.creativebloq.com/news/rainbow-flag-designer-commemorated-with-free-font-family"><img src="TypeWithPride_files/creativebloq.png" width="200" alt="creativebloq.png"></a>
<a href="http://www.huffingtonpost.com/entry/gilbert-baker-font-queer-rainbow_us_59072c1de4b02655f83e894b"><img src="TypeWithPride_files/huffpost.png" width="200" alt="huffpost.png"></a>
<a href="http://www.itsnicethat.com/news/gilbert-baker-rainbow-flag-designer-typeface-type-with-pride-240417"><img src="TypeWithPride_files/itsnicethat.png" width="200" alt="itsnicethat.png"></a>
<a href="http://mashable.com/2017/04/21/gilbert-baker-type-with-pride-lgbtq-font"><img src="TypeWithPride_files/mashable.png" width="200" alt="mashable.png"></a>
</div>
<p> </p>
<h2>Partners</h2>
<p><img src="TypeWithPride_files/image-asset.png" width="100%" alt="image-asset"></p>
<div>
<a href="//www.iubenda.com/privacy-policy/8100319" class="iubenda-white iubenda-embed" title="Privacy Policy">Privacy Policy</a>
</div>
<div>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/80x15.png"></a>
</div>
<br>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>
</div>
<script type="text/javascript">
function startImageCycle(cycleId) {
const images = document.querySelectorAll(`#${cycleId} img`);
let currentImage = 0;
function changeImage() {
images[currentImage].style.opacity = 0;
currentImage = (currentImage + 1) % images.length;
images[currentImage].style.opacity = 1;
}
setInterval(changeImage, 2500);
}
// Start individual cycles
startImageCycle('cycle1');
startImageCycle('cycle2');
</script>
</body>
</html>