Add files via upload

Fontself · Feb 20, 2024 · 2bedde8 · 2bedde8
commit 2bedde8
Show file tree

Hide file tree

Showing 64 changed files with 676 additions and 0 deletions.
diff --git a/TypeWithPride_files/01.jpg b/TypeWithPride_files/01.jpg
diff --git a/TypeWithPride_files/06(1).jpg b/TypeWithPride_files/06(1).jpg
diff --git a/TypeWithPride_files/06.jpg b/TypeWithPride_files/06.jpg
diff --git a/TypeWithPride_files/15.jpg b/TypeWithPride_files/15.jpg
diff --git a/TypeWithPride_files/213887934.html b/TypeWithPride_files/213887934.html
diff --git a/TypeWithPride_files/316215965.html b/TypeWithPride_files/316215965.html
diff --git a/TypeWithPride_files/80x15.png b/TypeWithPride_files/80x15.png
diff --git a/TypeWithPride_files/A.jpg b/TypeWithPride_files/A.jpg
diff --git a/TypeWithPride_files/B(1).jpg b/TypeWithPride_files/B(1).jpg
diff --git a/TypeWithPride_files/B.jpg b/TypeWithPride_files/B.jpg
diff --git a/TypeWithPride_files/C.jpg b/TypeWithPride_files/C.jpg
diff --git a/TypeWithPride_files/D.jpg b/TypeWithPride_files/D.jpg
diff --git a/TypeWithPride_files/GB.jpg b/TypeWithPride_files/GB.jpg
diff --git a/TypeWithPride_files/Katakana-Behance-Image.png b/TypeWithPride_files/Katakana-Behance-Image.png
diff --git a/TypeWithPride_files/L.jpg b/TypeWithPride_files/L.jpg
diff --git a/TypeWithPride_files/PRkit.jpg b/TypeWithPride_files/PRkit.jpg
diff --git a/TypeWithPride_files/PRkit4.jpg b/TypeWithPride_files/PRkit4.jpg
diff --git a/TypeWithPride_files/Q.jpg b/TypeWithPride_files/Q.jpg
diff --git a/TypeWithPride_files/T.jpg b/TypeWithPride_files/T.jpg
diff --git a/TypeWithPride_files/TypeWithPride-03.jpg b/TypeWithPride_files/TypeWithPride-03.jpg
diff --git a/TypeWithPride_files/TypeWithPride-04.jpg b/TypeWithPride_files/TypeWithPride-04.jpg
diff --git a/TypeWithPride_files/TypeWithPride-07.jpg b/TypeWithPride_files/TypeWithPride-07.jpg
diff --git a/TypeWithPride_files/TypeWithPride-11.jpg b/TypeWithPride_files/TypeWithPride-11.jpg
diff --git a/TypeWithPride_files/adobe.png b/TypeWithPride_files/adobe.png
diff --git a/TypeWithPride_files/adweek.png b/TypeWithPride_files/adweek.png
diff --git a/TypeWithPride_files/bustle.png b/TypeWithPride_files/bustle.png
diff --git a/TypeWithPride_files/coming.jpg b/TypeWithPride_files/coming.jpg
diff --git a/TypeWithPride_files/creativebloq.png b/TypeWithPride_files/creativebloq.png
diff --git a/TypeWithPride_files/download(1).png b/TypeWithPride_files/download(1).png
diff --git a/TypeWithPride_files/download.png b/TypeWithPride_files/download.png
diff --git a/TypeWithPride_files/fastco.png b/TypeWithPride_files/fastco.png
diff --git a/TypeWithPride_files/favicon.ico b/TypeWithPride_files/favicon.ico
diff --git a/TypeWithPride_files/flag.jpg b/TypeWithPride_files/flag.jpg
diff --git a/TypeWithPride_files/huffpost.png b/TypeWithPride_files/huffpost.png
diff --git a/TypeWithPride_files/image-asset(1).gif b/TypeWithPride_files/image-asset(1).gif
diff --git a/TypeWithPride_files/image-asset(10).jpeg b/TypeWithPride_files/image-asset(10).jpeg
diff --git a/TypeWithPride_files/image-asset(11).jpeg b/TypeWithPride_files/image-asset(11).jpeg
diff --git a/TypeWithPride_files/image-asset(12).jpeg b/TypeWithPride_files/image-asset(12).jpeg
diff --git a/TypeWithPride_files/image-asset(13).jpeg b/TypeWithPride_files/image-asset(13).jpeg
diff --git a/TypeWithPride_files/image-asset(14).jpeg b/TypeWithPride_files/image-asset(14).jpeg
diff --git a/TypeWithPride_files/image-asset(15).jpeg b/TypeWithPride_files/image-asset(15).jpeg
diff --git a/TypeWithPride_files/image-asset(16).jpeg b/TypeWithPride_files/image-asset(16).jpeg
diff --git a/TypeWithPride_files/image-asset(17).jpeg b/TypeWithPride_files/image-asset(17).jpeg
diff --git a/TypeWithPride_files/image-asset(18).jpeg b/TypeWithPride_files/image-asset(18).jpeg
diff --git a/TypeWithPride_files/image-asset(19).jpeg b/TypeWithPride_files/image-asset(19).jpeg
diff --git a/TypeWithPride_files/image-asset(2).jpeg b/TypeWithPride_files/image-asset(2).jpeg
diff --git a/TypeWithPride_files/image-asset(20).jpeg b/TypeWithPride_files/image-asset(20).jpeg
diff --git a/TypeWithPride_files/image-asset(21).jpeg b/TypeWithPride_files/image-asset(21).jpeg
diff --git a/TypeWithPride_files/image-asset(22).jpeg b/TypeWithPride_files/image-asset(22).jpeg
diff --git a/TypeWithPride_files/image-asset(3).jpeg b/TypeWithPride_files/image-asset(3).jpeg
diff --git a/TypeWithPride_files/image-asset(4).jpeg b/TypeWithPride_files/image-asset(4).jpeg
diff --git a/TypeWithPride_files/image-asset(5).jpeg b/TypeWithPride_files/image-asset(5).jpeg
diff --git a/TypeWithPride_files/image-asset(6).jpeg b/TypeWithPride_files/image-asset(6).jpeg
diff --git a/TypeWithPride_files/image-asset(7).jpeg b/TypeWithPride_files/image-asset(7).jpeg
diff --git a/TypeWithPride_files/image-asset(8).jpeg b/TypeWithPride_files/image-asset(8).jpeg
diff --git a/TypeWithPride_files/image-asset(9).jpeg b/TypeWithPride_files/image-asset(9).jpeg
diff --git a/TypeWithPride_files/image-asset.gif b/TypeWithPride_files/image-asset.gif
diff --git a/TypeWithPride_files/image-asset.jpeg b/TypeWithPride_files/image-asset.jpeg
diff --git a/TypeWithPride_files/image-asset.png b/TypeWithPride_files/image-asset.png
diff --git a/TypeWithPride_files/itsnicethat.png b/TypeWithPride_files/itsnicethat.png
diff --git a/TypeWithPride_files/mashable.png b/TypeWithPride_files/mashable.png
diff --git a/TypeWithPride_files/player.css b/TypeWithPride_files/player.css
diff --git a/TypeWithPride_files/site.css b/TypeWithPride_files/site.css
diff --git a/index.html b/index.html
@@ -0,0 +1,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 &#39;Gilbert&#39; 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 &#39;Gilbert&#39; 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 &#39;Gilbert&#39; 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 &#39;Gilbert&#39; 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.&nbsp;To honor the memory of Gilbert Baker, <a href="http://newfest.org/" target="_blank">NewFest</a>&nbsp;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.&nbsp;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>&nbsp;<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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
+    <div><img src="TypeWithPride_files/image-asset.gif" width="100%" height="auto" alt="image-asset"></div>
+    <p>&nbsp;</p>
+
+    <div id="gallery-section"/>
+    <p>&nbsp;</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>&nbsp;</p>
+
+    <img src="TypeWithPride_files/image-asset(3).jpeg" width="100%" height="auto" alt="image-asset(3).jpeg" >
+    <p>&nbsp;</p>
+    <img src="TypeWithPride_files/Katakana-Behance-Image.png" width="100%" height="auto" alt="Katakana-Behance-Image.png" >
+    <p>&nbsp;</p>
+    <img src="TypeWithPride_files/image-asset(19).jpeg" width="100%" height="auto" alt="image-asset.jpeg(19)" >
+
+
+    <div id="press-section"/>
+    <p>&nbsp;</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>&nbsp;</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>