Add first content (GAFAM French PDFs) and footer

CHANGES.rst

@@ -6,6 +6,10 @@ www.gafam.info CHANGES
 in progress
 -----------
 
+2018-01-12 0.1.0
+----------------
+- Add first content (GAFAM French PDFs) and footer
+
 2018-01-11 0.0.0
 ----------------
 - Simple HTML page based on jQuery, Bulma, Font Awesome and webpack

htdocs/index.html

@@ -39,7 +39,7 @@
                     </h1>
                     <p class="subtitle">
                         We collect, maintain and care for localization of material from the
-                        <strong><a target="_blank" href="https://twitter.com/laquadrature/status/942764007286591490">LQDN GAFAM</a></strong> campaign.
+                        <strong><a target="_blank" href="https://wiki.laquadrature.net/QSPTAG#Campagne_de_dons_2017">LQDN GAFAM</a></strong> campaign.
                         <br/>
                         CC0 licensed and a friendly community.
                     </p>
@@ -51,6 +51,79 @@
         </div>
     </section>
 
+    <section class="section">
+        <div class="container">
+        <div class="columns">
+
+        <div class="column is-4">
+        <div class="card">
+          <header class="card-header">
+            <div class="card-header-title">
+            <div class="columns" style="width: 100%">
+                <div class="column is-7">
+                    <div class="tags has-addons">
+                      <span class="tag is-medium">Language</span>
+                      <span class="tag is-medium is-primary">French</span>
+                    </div>
+                </div>
+                <div class="column is-5">
+                    <div class="tags has-addons">
+                      <span class="tag is-medium">Format</span>
+                      <span class="tag is-medium is-link">PDF</span>
+                    </div>
+                </div>
+            </div>
+            </div>
+          </header>
+          <div class="card-image">
+            <figure class="image">
+                <a class="level-right" target="_blank" href="https://wiki.laquadrature.net/images/5/50/Lqdn_affiche_gafam.pdf"><img src="static/img/gafam-french.jpg"/></a>
+            </figure>
+          </div>
+          <div class="card-content">
+            <div class="media">
+              <div class="media-left">
+                <figure class="image is-48x48">
+                    <img src="static/img/lqdn-logo.jpg"/>
+                </figure>
+              </div>
+              <div class="media-content">
+                <p class="title is-4">La Quadrature du Net</p>
+                <p class="subtitle is-6"><a target="_blank" href="https://twitter.com/laquadrature">@laquadrature</a></p>
+              </div>
+            </div>
+
+            <div class="content">
+              By popular demand, the PDFs of the campaign posters.
+              LQDN has already covered Paris and counts on you to cover the rest of the country and the world!
+              The posters were printed on A3 colored paper, but do as you please! CC0
+              <br/><br/>
+              <a class="level-right" target="_blank" href="https://wiki.laquadrature.net/images/5/50/Lqdn_affiche_gafam.pdf">Download as PDF</a>
+              <br/>
+              Source: <a target="_blank" href="https://twitter.com/laquadrature/status/942764007286591490"><time datetime="2017-12-18">6:30 AM - 18 Dec 2017</time></a>
+            </div>
+          </div>
+        </div>
+        </div>
+
+        </div>
+        </div>
+    </section>
+
+    <footer class="footer">
+      <div class="container">
+        <div class="content has-text-centered">
+          <p>
+            <strong>The GAFAM resource toolkit</strong> by <a href="mailto:hello@gafam.info">The GAFAM tech collective</a>.
+            <br/>
+            The website content is licensed
+            <a target="_blank" href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0</a>
+            and <a href="https://github.com/gafam/www.gafam.info" target="_blank">available on GitHub</a>.
+          </p>
+        </div>
+      </div>
+    </footer>
+
 </body>
 
 </html>