Add sections "How to reproduce?" and "What else?"

CHANGES.rst

@@ -17,6 +17,8 @@ in progress
 - Improve responsiveness
 - Improve wording
 - Add "About" section to both index.html and README.rst
+- Add sections "How to reproduce?" and "What else?"
+
 
 2018-01-12 0.2.0
 ----------------

htdocs/index.html

@@ -111,6 +111,104 @@
     </div>
 </section>
 
+<!-- How to reproduce -->
+<section class="section" id="reproduce">
+    <div class="container">
+        <h3 class="title">
+            How to reproduce?
+        </h3>
+
+        <p class="content is-spaced">
+            Read all about how to print the posters locally.
+            <ol>
+                <li class="content is-spaced">
+                    Get access to a laser printer. Please don't use Inkjets as they will
+                    draw too much ink for filling the black areas. Really, don't do it.
+                </li>
+                <li class="content is-spaced">
+                    Get some colored paper which fits your printer. You will need red, white, blue, yellow and green.
+                </li>
+                <li class="content is-spaced">
+                    <p>
+                        Choose one of the <a href="#resources">design resources</a> below which fulfills
+                        your needs regarding format and language and download it to your computer.
+                    </p>
+                    <p>
+                        <a class="button is-link" href="https://wiki.laquadrature.net/images/5/50/Lqdn_affiche_gafam.pdf">
+                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
+                            &nbsp;
+                            French posters in PDF format
+                        </a>
+                        <a class="button is-link" href="https://wiki.laquadrature.net/images/f/f2/LQDNgafamEN.pdf">
+                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
+                            &nbsp;
+                            English posters in PDF format
+                        </a>
+                    </p>
+                </li>
+                <li class="content is-spaced">
+                    <p>
+                        Follow these steps to prepare for and perform printing.
+                    </p>
+
+                    <div class="columns is-variable is-8">
+
+                        <div class="column is-4">
+                            <div class="card">
+                                <div class="card-image">
+                                    <img src="static/img/gafam-poster-printing-1.jpg"/>
+                                </div>
+                                <div class="card-content">
+                                    <div class="content">
+                                        Make multiple staples of N sheets each for each color.
+                                        Then, put them together in the sequence of red, white, blue, yellow and green.
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="column is-4">
+                            <div class="card">
+                                <div class="card-image">
+                                    <img src="static/img/gafam-poster-printing-2.jpg"/>
+                                </div>
+                                <div class="card-content">
+                                    <div class="content">
+                                        This looks good.
+                                        <br/>
+                                        Now, put this whole staple into your printer in a way that the red
+                                        sheets will be picked up first.
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="column is-4">
+                            <div class="card">
+                                <div class="card-image">
+                                    <img src="static/img/gafam-poster-printing-3.jpg"/>
+                                </div>
+                                <div class="card-content">
+                                    <div class="content">
+                                        Send print jobs of N duplicates for each page of
+                                        the multipage poster document PDF file.
+                                        <br/><br/>
+                                        Ready.
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+
+                </li>
+                <li class="content is-spaced">
+                    Go ahead, disseminate the printouts in your local neighbourhood and send pictures. Cheers!
+                </li>
+            </ol>
+        </p>
+
+    </div>
+</section>
+
 <!-- Resources -->
 <section class="section" id="resources">
     <div class="container">
@@ -395,6 +493,40 @@
     </div>
 </section>
 
+<!-- What else? -->
+<section class="section" id="what-else">
+    <div class="container">
+        <h3 class="title">
+            What else?
+        </h3>
+
+        <div class="columns is-variable2 i2s-2">
+            <div class="column is-5">
+                <img src="static/img/gafa-batx.jpg"/>
+            </div>
+            <div class="column is-7">
+                <p class="content is-spaced">
+                    While the original poster campaign by LQDN is all about
+                    <a href="https://fr.wikipedia.org/wiki/GAFAM">GAFAM</a> (<a href="https://twitter.com/hashtag/GAFAM">#GAFAM</a>),
+                    the resources around it have been released
+                    to the public domain (<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>).
+                </p>
+                <p class="content is-spaced">
+                    <strong>
+                        In this spirit, we encourage the community to apply the same to
+                        BATX
+                        (<a href="https://fr.wikipedia.org/wiki/BATX">Wikipedia</a>, <a href="https://twitter.com/hashtag/BATX">Twitter</a>)
+                        and
+                        NATU
+                        (<a href="http://magazine.pickandpow.com/en/gafa-natu-the-king-is-dead-long-life-to-the-ki/">[1]</a>,
+                        <a href="https://www.challenges.fr/challenges-soir/netflix-airbnb-tesla-et-uber-sont-elles-survalorisees_415028">[2]</a>).
+                    </strong>
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+
 <!-- Footer -->
 <footer class="footer">
     <div class="container">