Added FSFE Infographic project page

css/style.css

@@ -373,6 +373,9 @@ body {
 .button.rustfest::before {
   background: #b20f32; }
 
+.button.fsfe::before {
+  background:  #53b749; }
+
 .button.boxed.white {
   border: 1px solid #fff;
   background: none;
@@ -503,6 +506,15 @@ body {
   color: #fff;
   background: #b20f32; }
 
+.button.boxed.fsfe {
+  border: 1px solid #53b749;
+  background: none;
+  color: #53b749; }
+
+.button.boxed.fsfe:hover {
+  color: #fff;
+  background: #53b749; }
+
 .button.boxed.openlabs {
   border: 1px solid #2BBBB0;
   background: none;

projects/fsfe-infographic.html

@@ -0,0 +1,89 @@
+---
+layout: default
+section_id: portfolio
+title: FSFE Infographic
+---
+
+<div style="background-color: #53b749;" class="full new">
+  <div class="section-title new">
+    <div class="row">
+      <div class="medium-10 medium-centered columns">
+        <h1 class="wow slideInUp" style="color: white; font-size: 2rem;">FSFE Infographic</h1>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="full text">
+  <div class="row">
+    <div class="large-8 columns">
+      <img class="lazy" data-src="../images/projects/FSFE-infographic-horizontal.jpg" alt="Horizontal">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/FSFE-infographic-vertical.jpg" alt="Vertical">
+    </div>
+    <div class="large-4 columns">
+      <div class="project-intro">
+        <p>Free Software Foundation Europe is a charity that empowers users to control technology.</p>
+        <p>We were approached to work on this project after previous successful collaborations with the Free Software Foundation Europe.</p>
+        <hr>
+        <div class="spacing"></div>
+        <h4>Date</h4>
+        <p><span>December, 2018</span></p>
+        <h4>Clients</h4>
+        <p><span><a href="https://fsfe.org/" target="_blank" rel="noopener">FSFE</a></span></p>
+        <h4>Category</h4>
+        <p><span>Infographic</span></p>
+         <hr>
+        <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/FSFE Infographic" target="_blank" rel="noopener"><i class="fab fa-github"></i> Sources</a><br />
+        <a class="button boxed fsfe" href="https://fsfe.org" target="_blank" rel="noopener"><i class="fas fa-globe"></i> Website</a><br />
+      </div>
+    </div>
+  </div>
+</div>
+<hr>
+<div class="full">
+  <div class="section-title">
+    <div class="row">
+      <div class="medium-10 medium-centered columns">
+        <h2>Related projects</h2>
+      </div>
+    </div>
+  </div>
+  <div class="related-works">
+    <div class="row">
+      <div class="large-4 columns">
+        <div class="work-wrapper">
+          <a href="reproducible-builds" class="work">
+            <img class="lazy" data-src="../images/projects/rb_thumbnail.png" alt="">
+            <div class="info">
+              <h3>Reproducible Builds Style Guide</h3>
+              <p>Style Guide</p>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div class="large-4 columns">
+        <div class="work-wrapper">
+          <a href="thunderbird" class="work">
+          <img class="lazy" data-src="../images/projects/tb_overview.png" alt="">
+          <div class="info">
+            <h3>Thunderbird Style Guide and Usability Study</h3>
+            <p>Style Guide | Usability Study</p>
+          </div>
+        </a>
+        </div>
+      </div>
+      <div class="large-4 columns">
+        <div class="work-wrapper">
+          <a href="i2p" class="work">
+            <img class="lazy" data-src="../images/projects/i2p_overview.png" alt="">
+            <div class="info">
+              <h3>I2P Style Guide and Usability Study</h3>
+              <p>Style Guide | Usability Study</p>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>

projects/index.html

@@ -2,10 +2,14 @@
 layout: default
 section_id: portfolio
 works_left:
-- title: RustFest Rome Visual Identity
-  link_to: rustfestrome
-  image: images/projects/rustfestrome-thumb.png
-  categories: Visual Identity
+- title: FSFE Infographic
+  link_to: fsfe-infographic
+  image: images/projects/fsfe-thumb.png
+  categories: Infographic
+- title: Reproducible Builds Style Guide
+  link_to: reproducible-builds
+  image: images/projects/rb_thumbnail.png
+  categories: Style Guide
 - title: SecureDrop Style Guide
   link_to: securedrop
   image: images/projects/securedrop_overview.png
@@ -19,9 +23,9 @@ works_left:
   image: images/projects/poster_SFK.jpg
   categories: Visual Identity, Print
 works_middle:
-- title: LibOCon 2018 Visual Identity
-  link_to: libocon
-  image: images/projects/libocon_overview.png
+- title: RustFest Rome Visual Identity
+  link_to: rustfestrome
+  image: images/projects/rustfestrome-thumb.png
   categories: Visual Identity
 - title: I2P Style Guide and Usability Study
   link_to: i2p
@@ -36,10 +40,10 @@ works_middle:
   image: images/projects/penguins_thumb.jpg
   categories: Illustration
 works_right:
-- title: Reproducible Builds Style Guide
-  link_to: reproducible-builds
-  image: images/projects/rb_thumbnail.png
-  categories: Style Guide
+- title: LibOCon 2018 Visual Identity
+  link_to: libocon
+  image: images/projects/libocon_overview.png
+  categories: Visual Identity
 - title: Enigmail Rebranding
   link_to: enigmail
   image: images/projects/enigmail_overview.png