index.html 35.1 KB
Newer Older
1 2 3 4 5
<!DOCTYPE html>
<html>

<head>

6 7
    <!-- Metadata -->
    <meta charset="utf-8"/>
8

9
    <title>The GAFAM poster campaign toolkit</title>
10 11 12

    <meta name="description" content="We collect, maintain and promote translations of material from the GAFAM poster campaign by La Quadrature du Net. CC0 licensed and a friendly community.">
    <meta name="keywords" content="lqdn, gafam, poster, sticker, campaign, information, translation, localization, toolkit">
13

14
    <meta property="og:title" content="The GAFAM poster campaign toolkit"/>
15
    <meta property="og:site_name" content="GAFAM poster campaign">
16
    <meta property="og:description"
17
          content="We collect, maintain and promote translations of material from the GAFAM poster campaign by La Quadrature du Net. CC0 licensed and a friendly community."/>
18 19 20 21 22 23 24 25 26 27 28 29 30
    <meta property="og:url" content="https://gafam.info/"/>
    <meta property="og:image" content="https://ptrace.gafam.info/unofficial/img/color/lqdn-gafam-poster-en-color-5x1-2560x.png"/>
    <meta property="og:image:secure_url" content="https://ptrace.gafam.info/unofficial/img/color/lqdn-gafam-poster-en-color-5x1-2560x.png"/>
    <meta property="og:type" content="website"/>

    <meta name="twitter:title" content="The GAFAM poster campaign toolkit">
    <meta name="twitter:description" content="We collect, maintain and promote translations of material from the GAFAM poster campaign by La Quadrature du Net. CC0 licensed and a friendly community.">
    <meta name="twitter:image" content="https://ptrace.gafam.info/unofficial/img/color/lqdn-gafam-poster-en-color-5x1-2560x.png">
    <meta name="twitter:image:alt" content="Logo of the GAFAM poster campaign toolkit">
    <meta name="twitter:card" content="summary_large_image">

    <script type='application/ld+json'>{"@context":"https:\/\/schema.org","@type":"WebSite","@id":"#website","url":"https:\/\/gafam.info\/","name":"The GAFAM poster campaign toolkit","logo":"https://gafam.info/static/img/gafam-pictograms.jpg"}</script>

31

32
    <!-- Let browser know website is optimized for mobile -->
33 34
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

    <!-- Load whole application -->

    <!-- Development -->
    <script type="text/javascript" src="./static/assets/commons.bundle.js"></script>
    <script type="text/javascript" src="./static/assets/app.bundle.js"></script>

    <!-- Production -->
    <!--
    <script type="text/javascript" src="./static/assets/commons.bundle.min.js"></script>
    <script type="text/javascript" src="./static/assets/app.bundle.min.js"></script>
    -->

</head>

<body>

52 53 54
<a class="github-fork-ribbon" href="https://github.com/gafam/www.gafam.info" title="Fork me on GitHub">Fork me on
    GitHub</a>

55
<!-- Hero header -->
56 57 58 59 60 61 62 63 64
<section class="hero is-info site-header">
    <div class="hero-body columns">
        <div class="column is-9">
            <div class="container header-container">
                <h1 class="title is-spaced">
                    The GAFAM poster campaign toolkit
                </h1>

                <p class="subtitle">
65
                    We collect, maintain and promote translations of material from the
66 67 68 69
                    <br/>
                    <strong><a href="https://wiki.laquadrature.net/QSPTAG#Campagne_de_dons_2017">GAFAM poster campaign</a></strong>
                    by
                    <strong><a href="https://www.laquadrature.net/">La Quadrature du Net</a></strong>.
70 71 72
                    <br/>
                    CC0 licensed and a friendly community.
                </p>
73 74
            </div>
        </div>
75
        <div class="column is-3">
76
            <img class="image-shadow-white" src="static/img/gafam-pictograms.jpg"/>
77 78 79 80
        </div>
    </div>
</section>

81
<!-- About -->
82
<section class="section" id="more-translations-needed">
83 84
    <div class="container">
        <h3 class="title">
85
            About
86 87 88 89
        </h3>

        <div class="columns is-variable is-8">
            <div class="column is-6">
90 91 92 93 94 95 96 97 98
                <p class="content is-spaced">
                    <a href="https://www.laquadrature.net/">La Quadrature du Net</a> started the
                    <a href="https://wiki.laquadrature.net/QSPTAG#Campagne_de_dons_2017">GAFAM poster campaign</a>
                    around November 2017 in order to support their
                    <a href="https://support.laquadrature.net/">call for donations</a>.

                    After getting hooked at the 34C3 congress, we picked this up in January 2018
                    to support the lovely people of LQDN in covering the whole world.
                </p>
99
                <p class="content is-spaced">
100 101 102 103 104 105 106 107 108 109 110 111
                    The original French poster texts and its translations into English have been uploaded to the
                    <a href="https://github.com/gafam/gafam-poster-translations">gafam-poster-translations</a>
                    repository on GitHub using the <a href="https://en.wikipedia.org/wiki/Gettext">GNU gettext</a> format.
                    Starting from February 2018, translations can also be edited online
                    using <a href="https://hosted.weblate.org/projects/gafam/translations/">GAFAM on Weblate</a>.
                </p>
                <p class="content is-spaced">
                    On the 17th of April 2018, <a href="https://www.laquadrature.net/">La Quadrature du Net</a> started
                    a group action against GAFAM on <a href="https://gafam.laquadrature.net/">gafam.laquadrature.net</a>.
                </p>
                <p class="content is-spaced">
                    Until May 2018, we have been able to collect translations into 16 languages. Enjoy!
112
                </p>
113 114 115 116 117 118 119
                <div class="notification is-warning">
                    <div class="media">
                        <div class="media-left">
                            <i class="fa fa-language fa-3x" aria-hidden="true"></i>
                        </div>
                        <div class="media-content">
                            <strong>
120 121 122 123 124 125 126 127 128
                                <p class="content is-spaced">
                                We are still looking forward to add more translations into different languages to the
                                <a href="#library">resource library</a>.
                                </p>

                                <p class="content is-spaced">
                                We encourage you to <a href="#contribute">contribute</a> a translation if you feel it
                                is missing from the list. Thanks so much to all people who did already!
                                </p>
129 130 131 132
                            </strong>
                        </div>
                    </div>
                </div>
133 134
            </div>
            <div class="column is-6">
135 136 137
                <a href="https://ptrace.gafam.info/unofficial/img/color/lqdn-gafam-poster-en-color-5x1-2560x.png" target="_blank">
                    <img class="image-shadow" src="https://ptrace.gafam.info/unofficial/img/color/lqdn-gafam-poster-en-color-5x1-1280x.png"/>
                </a>
138 139
            </div>
        </div>
140 141 142
    </div>
</section>

143 144 145 146 147 148 149 150 151 152
<!-- 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>
153 154 155 156 157 158 159 160
                <li class="content">
                    <p class="is-size-5 has-text-weight-semibold">
                        Get access to a laser printer
                    </p>
                    <p>
                        Please don't use Inkjets as they will draw too much ink
                        for filling the black areas. Really, don't do it.
                    </p>
161
                </li>
162 163 164 165 166 167 168
                <li class="content">
                    <p class="is-size-5 has-text-weight-semibold">
                    Get some colored paper
                    </p>
                    <p>
                        which fits your printer. You will need red, white, blue, yellow and green.
                    </p>
169
                </li>
170 171
                <li class="content">
                    <p class="is-size-5 has-text-weight-semibold">
172
                        Choose one of the design resources
173
                    </p>
174
                    <p>
175 176
                        Visit the <a href="#library">resource library</a> to download a suitable file
                        which fulfills your needs regarding format and language.
177 178 179
                    </p>
                </li>
                <li class="content is-spaced">
180 181
                    <p class="is-size-5 has-text-weight-semibold">
                        Follow these steps to prepare for and perform printing
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 222 223 224 225 226 227 228 229 230 231 232 233
                    </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">
234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251

                    <p class="is-size-5 has-text-weight-semibold">
                        Go ahead, disseminate the printouts in your local neighbourhood and send pictures. Cheers!
                    </p>

                    <div class="columns is-variable is-8">
                        <div class="column is-4">
                            <div class="card">
                                <div class="card-image">
                                    <div id="lqdn-gafam-posters-paris-video"/>
                                </div>
                                <div class="card-content">
                                    <div class="content">
                                        Night, cold, rain - nothing stops those who support La Quadrature.
                                    </div>
                                </div>
                                <footer class="card-footer">
                                    <a class="card-footer-item" href="https://twitter.com/laquadrature/status/944148790684069888">
252
                                        <time datetime="2017-12-22">December 2017</time>
253 254 255 256 257 258
                                    </a>
                                </footer>
                            </div>
                        </div>
                    </div>

259 260 261 262 263 264 265
                </li>
            </ol>
        </p>

    </div>
</section>

266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319
<!-- Library -->
<section class="section" id="library">
    <div class="container">
        <h3 class="title">
            The GAFAM poster campaign library
        </h3>

        <div class="columns">
            <div class="column is-6 buttons">

                <p class="content is-spaced">
                    The resources and materials collected so far.
                </p>

                <p class="content is-spaced">
                    These are the official PDF files published by LQDN:
                </p>
                <div class="has-text-centered">
                    <p>
                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-fr.pdf" target="_blank">
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            French posters
                        </a>
                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-en.pdf" target="_blank">
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            English posters
                        </a>
                        <a class="button is-link" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-de.pdf" target="_blank">
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            German posters
                        </a>
                    </p>
                </div>

                <hr/>

                <p class="content is-spaced">
                    These are the reprinted PDF files with translations from the community:
                </p>
                <div class="has-text-centered">
                    <a href="https://library.gafam.info/" class="library-link" style="font-size: xx-large" target="_blank">
                        <i class="fa fa-university fa-5x" aria-hidden="true"></i>
                    </a>
                    <br/>
                    <a href="https://library.gafam.info/" class="button" style="margin-top: 1.5rem" target="_blank">
                        Visit the library
                    </a>
                </div>

            </div>
            <div class="column is-6">
320
                <a href="https://ptrace.gafam.info/unofficial/img/mosaic/lqdn-gafam-poster-mosaic-color-horizontal.png" target="_blank">
321 322 323 324 325 326 327 328
                    <img class="image-shadow" src="https://ptrace.gafam.info/assets/2018-05-17_lqdn-gafam-poster-mosaic-color-10x8-small.png"/>
                </a>
            </div>
        </div>

    </div>
</section>

329
<!-- Resources -->
330
<section class="section is-hidden" id="resources">
331 332
    <div class="container">
        <h3 class="title">
333
            Resources for download
334 335 336
        </h3>

        <p class="content is-spaced">
337
            The resources and materials collected so far.
338
            These are PDF files published by LQDN.
339 340
        </p>

341 342
        <div class="columns">

343
            <!-- French -->
344 345 346 347
            <div class="column is-4">
                <div class="card">
                    <header class="card-header">
                        <div class="card-header-title">
348 349
                            <div class="full-width">
                                <div class="is-pulled-left">
350 351 352 353 354
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-primary">Language</span>
                                        <span class="tag is-medium">French</span>
                                    </div>
                                </div>
355
                                <div class="is-pulled-right">
356 357 358 359 360 361 362 363 364 365
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-link">Format</span>
                                        <span class="tag is-medium">PDF</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </header>
                    <div class="card-image">
                        <figure class="image">
366
                            <a href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-fr.pdf">
367 368
                                <img class="resource-card-image" src="static/img/gafam-french-card.gif"/>
                            </a>
369
                        </figure>
370
                    </div>
371
                    <div class="card-content">
372

373 374 375 376 377 378 379 380
                        <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>
381 382
                                <p class="subtitle is-6">
                                    <a href="https://twitter.com/laquadrature">@laquadrature</a>
383 384 385
                                </p>
                            </div>
                        </div>
386

387 388
                        <div class="content">
                            <p>
389 390 391 392 393
                                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
                            </p>
394
                        </div>
395
                    </div>
396 397 398

                    <footer class="card-footer">
                        <a class="card-footer-item" href="https://twitter.com/laquadrature/status/942764007286591490">
399
                            <time datetime="2017-12-18">18 Dec 2017</time>
400
                        </a>
401
                        <a class="card-footer-item" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-fr.pdf">
402 403 404 405 406 407
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            Download as PDF
                        </a>
                    </footer>

408
                </div>
409 410
            </div>

411 412
            <!-- English -->
            <div class="column is-4">
413 414 415
                <div class="card">
                    <header class="card-header">
                        <div class="card-header-title">
416 417
                            <div class="full-width">
                                <div class="is-pulled-left">
418 419
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-primary">Language</span>
420 421 422
                                        <span class="tag is-medium">English</span>
                                    </div>
                                </div>
423
                                <div class="is-pulled-right">
424 425
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-link">Format</span>
426
                                        <span class="tag is-medium">PDF</span>
427 428 429 430 431
                                    </div>
                                </div>
                            </div>
                        </div>
                    </header>
432 433
                    <div class="card-image">
                        <figure class="image">
434
                            <a href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-en.pdf">
435 436 437 438
                                <img class="resource-card-image" src="static/img/gafam-english-card.gif"/>
                            </a>
                        </figure>
                    </div>
439
                    <div class="card-content">
440 441 442 443 444 445 446 447
                        <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>
448 449
                                <p class="subtitle is-6">
                                    <a href="https://twitter.com/laquadrature">@laquadrature</a>
450 451 452 453
                                </p>
                            </div>
                        </div>

454 455
                        <div class="content">
                            <p>
456 457 458 459 460 461 462
                                After 7 weeks of an intensive campaign, LQDN reached 66% of their goal.
                                Thanks to all of you who support LQDN and have shared their calls for donations.
                                The posters were shared on social networks so they translated them into English.
                                <br/>
                                Files in SVG format will be added soon! ;)
                            </p>
                        </div>
463
                    </div>
464 465 466

                    <footer class="card-footer">
                        <a class="card-footer-item" href="https://wiki.laquadrature.net/QSPTAG#Campagne_de_dons_2017">
467
                            <time datetime="2018-01-03">3 Jan 2018</time>
468
                        </a>
469
                        <a class="card-footer-item" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-en.pdf">
470 471 472 473 474 475
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            Download as PDF
                        </a>
                    </footer>

476 477 478
                </div>
            </div>

479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543
            <!-- German -->
            <div class="column is-4">
                <div class="card">
                    <header class="card-header">
                        <div class="card-header-title">
                            <div class="full-width">
                                <div class="is-pulled-left">
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-primary">Language</span>
                                        <span class="tag is-medium">German</span>
                                    </div>
                                </div>
                                <div class="is-pulled-right">
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-link">Format</span>
                                        <span class="tag is-medium">PDF</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </header>
                    <div class="card-image">
                        <figure class="image">
                            <a href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-de.pdf">
                                <img class="resource-card-image" src="static/img/gafam-german-card.gif"/>
                            </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 href="https://twitter.com/laquadrature">@laquadrature</a>
                                </p>
                            </div>
                        </div>

                        <div class="content">
                            <p>
                                LQDN shared the German PDF file variant. Santé!
                            </p>
                        </div>
                    </div>

                    <footer class="card-footer">
                        <div class="card-footer-item">
                            <time datetime="2018-01-16">16 Jan 2018</time>
                        </div>
                        <a class="card-footer-item" href="https://ptrace.gafam.info/upstream/pdf/lqdn-gafam-poster-de.pdf">
                            <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                            &nbsp;
                            Download as PDF
                        </a>
                    </footer>

                </div>
            </div>


544
        </div>
545 546 547
    </div>
</section>

548
<!-- Contribute -->
549 550 551 552 553
<section class="section" id="contribute">
    <div class="container">
        <h3 class="title">
            Contribute
        </h3>
554

555 556 557
        <div class="columns">

            <div class="column is-6">
558
                <img class="image-shadow" src="static/img/gafam-poster-paris.jpg"/>
559 560 561 562 563 564 565 566 567
            </div>

            <div class="column is-6">
                Adding a translation is really easy, it's just about downloading
                a template file, editing a few lines and sending it back to us:
                <br/><br/>
                <ol>
                    <li class="content is-spaced">
                        Download the translation template file
568
                        <a href="https://raw.githubusercontent.com/gafam/gafam-poster-translations/master/po/gafam-poster.pot">gafam-poster.pot</a>
569 570 571 572 573 574
                        to your computer.
                    </li>
                    <li class="content is-spaced">
                        Rename the file using the language code of choice,
                        e.g. "pt.po" for translating into the Portuguese language.
                        <p class="is-size-7">
575 576 577 578
                            You might want to have a look at the
                            list of <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">ISO 639-1 codes</a>
                            and the <a href="https://en.wikipedia.org/wiki/ISO_639_macrolanguage">ISO 639
                            macrolanguage</a> as a reference.
579 580 581 582 583 584 585
                        </p>
                    </li>
                    <li class="content is-spaced">
                        Edit the ".po" file you just created and perform the
                        translation by assigning appropriate values to all
                        "msgstr" variables.
                        You might want to use either the
586 587
                        <a href="https://github.com/gafam/gafam-poster-translations/blob/master/po/fr.po">French
                            original</a>
588
                        or the
589
                        <a href="https://github.com/gafam/gafam-poster-translations/blob/master/po/en.po">English</a>
590
                        or
591
                        <a href="https://github.com/gafam/gafam-poster-translations/blob/master/po/de.po">German</a>
592
                        translations
593 594
                        as reference.
                        <br/>
595

596
                        <p class="is-size-7">
597 598
                            Please use the UTF-8 character encoding when editing
                            the translation file.
599 600 601
                        </p>
                    </li>
                    <li class="content is-spaced">
602 603
                        Send the file containing the translated texts to <a
                            href="mailto:translators@gafam.info?subject=[GAFAM] New translation for ...">translators@gafam.info</a>.
604 605
                        <br/><br/>
                        If you know your way around Git, we also appreciate receiving
606 607
                        pull requests to the translation file repository on GitHub, <a
                            href="https://github.com/gafam/gafam-poster-translations">gafam-poster-translations</a>.
608 609 610 611 612
                    </li>
                    <li class="content is-spaced">
                        Thank you so much for helping to spread the word.
                        As soon as we have stickers, we will
                        definitively get a bunch of them to you!
613 614 615 616 617
                    </li>
                </ol>
            </div>

        </div>
618
</section>
619

620
<!-- Translations collected -->
621
<section class="section is-hidden" id="translations">
622 623 624 625 626 627 628 629
    <div class="container">
        <h3 class="title">
            Collected translations
        </h3>

        <p class="content is-spaced">
            The translations collected so far.
            Using the embedded view below, you can switch between the languages already translated
630 631
            and display the translation files in
            <a href="https://en.wikipedia.org/wiki/Gettext">GNU gettext</a> format.
632 633
            If you want to dig deeper, you are welcome to have a look at the underlying
            <a href="https://github.com/gafam/gafam-poster-translations">GitHub repository</a>.
634
        </p>
635

636
        <p class="content is-spaced">
637 638 639
            We encourage you to <a href="#contribute">contribute</a>
            a translation if you feel it is missing from the list.

640
            In the beginning, we had French, English and German as translated by the people of LQDN.
641
            As of now, we have been able to add translations into Japanese, Esperanto, Russian
642 643
            (half-finished), Mandarin Chinese, Italian, Polish, Norwegian and Catalan from the community.
            Thank you so much!
644
        </p>
645

646 647
        <p class="content is-spaced">
            However, there are still many languages to go for...
648 649 650 651 652 653 654
        </p>

        <div class="columns is-variable is-8">
            <div class="column is-8">
                <div class="card translations-details">
                    <header class="card-header">
                        <div class="card-header-title">
655 656
                            <div class="full-width">
                                <div class="is-pulled-right">
657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676
                                    <div class="tags has-addons">
                                        <span class="tag is-medium is-link">Format</span>
                                        <span class="tag is-medium">gettext PO</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </header>
                    <div class="card-content github-embed-container">
                        <div class="github-gafam-poster-translations"></div>
                    </div>
                </div>
            </div>
            <div class="column is-6">
                <img src="static/img/gafam-poster-pillar.jpg" class="translations-details"/>
            </div>
        </div>
    </div>
</section>

677
<!-- What else? -->
678
<section class="section is-hidden" id="what-else">
679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710
    <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>

711
<!-- Footer -->
712 713
<footer class="footer">
    <div class="container">
714 715 716 717 718 719 720
        <div class="columns">
            <div class="column is-5">
                <div class="content">
                    <p class="has-emphasized-links">
                        This is
                        <a href="https://gafam.info/">the GAFAM poster campaign toolkit</a>
                        by
721
                        <a href='mailt&#111;&#58;%68%&#54;&#53;&#37;6Cl&#111;&#64;&#103;&#97;%6&#54;%61m&#46;&#37;69&#110;fo'>the GAFAM tech collective</a>
722 723 724 725 726 727
                        The content of this web page is in the public domain
                        (<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>)
                        and
                        <a href="https://github.com/gafam/www.gafam.info">available on GitHub</a>.
                    </p>
                    <p class="is-size-7">
728 729
                        Content attributions: Images and depictions on this web page might be copyright of
                        their respective owners. Resources have been taken from, in the order of appearance:
730 731 732 733 734 735 736
                        <a href="https://twitter.com/NabeelAdeni/status/943733947921518592">@NabeelAdeni</a>,
                        <a href="https://twitter.com/linto_ai/status/950756933199314945">@linto_ai</a>,
                        <a href="https://twitter.com/mauddelavO/status/941602492521111552">@mauddelavO</a>,
                        <a href="https://twitter.com/vincib/status/946859282498314240">@vincib</a>,
                        <a href="https://twitter.com/churchill58/status/952437523749404673">@churchill58</a>.
                        Thanks!
                    </p>
737 738 739 740
                    <p class="is-size-7">
                        If you have further questions or feedback, don't hesitate to
                        <a href='mailt&#111;&#58;%68%&#54;&#53;&#37;6Cl&#111;&#64;&#103;&#97;%6&#54;%61m&#46;&#37;69&#110;fo'>contact us</a>.
                    </p>
741 742
                </div>
            </div>
743
        </div>
744 745
    </div>
</footer>
746

747 748 749
</body>

</html>