contour
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

contournews-bilingual.html
text/html

Download raw (18.5 KB)

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
  <meta property="author" name="author" content="Contour 9 biennale">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contour 9 news bilingual</title>

  <style>

    /*@import url('https://fonts.googleapis.com/css?family=Notable');*/
    /*@font-face {
      font-family: 'Notable';
      font-style: normal;
      font-weight: 400;
      src: local('Notable Regular'), local('Notable-Regular'), url(https://fonts.gstatic.com/s/notable/v2/gNMEW3N_SIqx-WX9yHQiFQ.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }*/

    /*LATIN MODERN*/
    @font-face {
      font-family: 'Latin-Modern';
      font-style: normal;
      font-weight: normal;
      src: url('fonts/lmroman10-regular.otf'), local('Latin Modern'), local('Notable-Regular'), format('opentype');
    }
    @font-face {
      font-family: 'Latin-Modern';
      font-style: italic;
      font-weight: normal;
      src: url('fonts/lmroman10-italic.otf'), local('Latin Modern Italic'), local('Notable-Regular-Italic'),  format('opentype');
    }

    /*SYNE EXTRA*/
    @font-face {
      font-family: 'Syne-Extra';
      font-style: normal;
      font-weight: bold;
      font-stretch: extra-expanded;
      src: url('fonts/Syne-Extra.ttf'), local('Syne Extra'), local('Syne-Extra'), format('truetype');
    }

    /*LACK*/
    @font-face {
      font-family: 'Lack';
      font-style: normal;
      font-weight: bold;
      src: url('fonts/Lack.otf'), local('Lack'), format('opentype');
    }


    body,
    table {
      margin: 0;
      padding: 0;
      font-size: 16px;
      line-height: 1.3em;
      /*reset*/
      font-size: 100%;
      font-weight: inherit;
      color: black;
    }

    #container {
      width: 100%;
      height: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      border-collapse: collapse;
      /*background-image: linear-gradient(to right, #ffffff 0%, #fff200 100%);*/
      background-image: url("img/background.png"), linear-gradient(to right, #ffffff 0%, #fff200 100%);;
      background-size: contain;
      /*background-repeat: repeat-y;*/
    }

    #container-cell {
      width: 100%;
      height: 100%;
      margin: 0;
      padding-bottom: 20px;
      vertical-align: top;
      align-self: center;
    }

    #voirenligne,
    #unsub {
      font-family: sans-serif;
      font-size: 10px;
      text-align: center;
      color: black;
      text-decoration: none;
    }
    #languageanchors{
      padding-top: 30px;
      font-family: "Helvetica", "Calibri", "Arial", sans-serif;
      font-size: 10px;
      color: black;
    }
    #languageanchors a {
      text-decoration: none;
      color: black;
    }
    .languageanchors{
      /*display: none;*/
      visibility: hidden;
    }

    figure{
      margin: 0;
      padding: 0;
    }
    img,figcaption {
      max-width: 100%;
    }
    figcaption{
      font-family: sans-serif;
      font-size: 10.5px;
      padding: 0 10px;
      padding-bottom: 10px;
      color: black;
    }

    h1 {
      font-family: "Syne Extra", "Futura", "Gill Sans", sans-serif;
      font-weight: bold;
      font-stretch:extra-expanded;
      font-size: 24px;
      padding-top: 80px;
      padding-bottom: 10px;
      color: black;
    }
    h2{
      font-family: "Syne Extra", "Futura", "Gill Sans", sans-serif;
      font-weight: bold;
      font-size: 22px;
      text-transform: uppercase;
      font-stretch:extra-expanded;
      margin: 0;
      padding: 0;
      padding-top: 50px;
      color: black;
    }
    h3{
      font-family: "Lack", "Gill Sans", "Gill Sans Nova", "Futura", sans-serif;
      font-weight: bold;
      font-size: 20px;
      margin: 0;
      padding: 0;
      padding-top: 50px;
      padding-bottom: 20px;
      color: black;
    }
    p{
      margin: 0;
      padding: 0;
      color: black;
    }
    .twocolumn{
      -webkit-column-count: 2; /* Chrome, Safari, Opera */
      -moz-column-count: 2; /* Firefox */
      column-count: 2;
    }
    p.introtxtgeneral {
      font-family: "Gill Sans", "Gill Sans Nova", sans-serif;
      font-size: 22px;
      line-height: 1.1em;
      padding-top: 20px;
      color: black;
    }
    p.introtxtmoon {
      font-family: "Lack", "Gill Sans", "Gill Sans Nova", "Futura", sans-serif;
      font-size: 20px;
      line-height: 1.1em;
      padding-top: 20px;
      padding-bottom: 40px;
      color: black;
    }
    p.eventtxt{
      font-family: "Latin Modern Roman", "Times New Roman", "Baskerville", serif;
      font-size: 20px;
      line-height: 1.1em;
      padding-top: 10px;
      color: black;
    }
    p.authorbio{
      padding-top: 15px;
      font-family: "Helvetica", "Calibri", "Arial", sans-serif;
      font-size: 15px;
      line-height: 1.2em;
      color: black;
    }
    .eventlocation{
      font-weight: bold;
      font-size: 20px;
      color: black;
    }
    .eventtype{
      font-family: "Latin Modern Roman", "Baskerville", "Times New Roman", serif;
      font-style: italic;
      font-weight: normal;
      font-size: 20px;
      color: black;
    }

    .author{
      font-family: "Lack", "Gill Sans", "Gill Sans Nova", "Futura", sans-serif;
      font-weight: normal;
      font-size: 20px;
      color: black;
    }

    /*.canva{
        border:2px solid black;
        background-color: white;
        padding: 0;
        margin: 0;
        padding-bottom: 10px;
    }*/

    /*.spacer{
      height:30px;
    }*/

    #sociallinks, #gdpr{
      font-size: 12px;
      font-family: sans-serif;
      color: black;
    }
    #sociallinks a, #gdpr a{
      text-decoration: underline;
      color:black;
    }

  </style>

</head>

<body>

  <table id="container">
    <tr>
      <td id="container-cell" valign="top" align="center">

        <!-- HEADER -->
        <table width="690">
          <tr>
            <!-- voir en ligne -->
            <td style="text-align:center;padding-bottom:20px;">
              <a id="voirenligne" href="https://contour9.be">see online version</a>
            </td>
          </tr>

          <tr>
            <!-- logo -->
            <td>
              <img src="img/logo.svg" alt="Contour 9 biennale" style="width: 360px;" />
            </td>
          </tr>

          <tr>
            <!-- languages anchors couldn't make it work on outlook.. -->
            <td>
                <p id="languageanchors">
                  <a href="#dutch">Nederlandse versie ↓</a> / <a href="#english">english version ↓↓</a>
                </p>
            </td>
          </tr>
        </table>

        <!-- DUTCH CONTENT -->
        <table width="690" lang="nl">
          <tr>
            <td>
              <a name="dutch" class="languageanchors"><i>dutch version</i></a>
            </td>
          </tr>
          <tr>
            <td> <!-- introduction text -->
              <p class="introtxtgeneral" name="dutch">
                (General introduction to Contour biennale 9 - dutch) The ninth edition of Contour Biennale takes on a whole new shape than the previous one. Curator Nataša Petrešin-Bachelez chose the denominator "Coltan as Cotton". She was inspired by the eponymous video poem by the American rapper, slammer and writer
                Saul Williams.
              </p>
            </td>
          </tr>

          <tr>
            <td> <!-- First part : 1st crescent-->
              <h1><img src="img/moon-half-left.svg" alt="" style="width:20px;"/> First crescent — 17-19 may </h1>
              <p class="introtxtmoon">
                (This moon's intro text, 50 words:) Suspendisse commodo lacus lacus, eget efficitur augue aliquam eget. Sed fringilla rhoncus lorem ut vehicula. Proin neque nulla, condimentum ac accumsan eget, euismod a erat. Sed nec arcu quis justo blandit pellentesque vel eu eros. Curabitur vestibulum ultricies tempus. Phasellus hendrerit tincidunt nulla, eget ultricies orci aliquam laoreet. Etiam nec.
              </p>
            </td>
          </tr>

          <tr>
            <td> <!-- First day-->
              <h2>friday 17 may</h2>
            </td>
          </tr>

          <tr>
            <td> <!-- First event -->
              <h3>17:00 - 19:00 <span class="eventlocation">Event location</span> <i class="eventtype">film screening</i> <span class="author">Amandine Gay</span></h3>
              <figure>
                <img src="img/enfantsdesave4-2.png" alt="" />
                <figcaption><i>Les enfants de Save au Rwanda</i> — © Collection des anciens de Save (Evariste Nikolakis)</figcaption>
              </figure>
              <p class="eventtxt twocolumn">
                (event text, 100 words:) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat tellus quis urna viverra, ac varius odio lacinia. In eu eros sed quam dignissim cursus. In ut ante non est malesuada faucibus. Phasellus sagittis, nisl sed faucibus dapibus, enim lacus rhoncus est, at lobortis neque felis vel ante. Curabitur odio eros, porttitor in ex eget, elementum accumsan ex. In aliquet ultrices ex ut venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a neque sed massa pellentesque scelerisque. Vivamus hendrerit dui at molestie iaculis. Mauris interdum semper felis, sit amet feugiat mi interdum et. Nam.
              </p>
              <p class="authorbio">
                (artist bio/sub infos, 50 words:)  Nullam quis libero commodo, fermentum dui mattis, rhoncus urna. Praesent at quam sed metus bibendum maximus vel eget lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur euismod nisl leo, ac sodales quam finibus id. Aenean non pharetra nulla.
              </p>
            </td>
          </tr>

          <tr>
            <td> <!-- Second event -->
              <h3>16:30 - 18:00 <span class="eventlocation">Event location</span> <i class="eventtype">lecture performance</i> <span class="author">Mark Pozlep</span></h3>
              <p class="eventtxt twocolumn">
                (event text w/out picture, 100 words:) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat tellus quis urna viverra, ac varius odio lacinia. In eu eros sed quam dignissim cursus. In ut ante non est malesuada faucibus. Phasellus sagittis, nisl sed faucibus dapibus, enim lacus rhoncus est, at lobortis neque felis vel ante. Curabitur odio eros, porttitor in ex eget, elementum accumsan ex. In aliquet ultrices ex ut venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a neque sed massa pellentesque scelerisque. Vivamus hendrerit dui at molestie iaculis. Mauris interdum semper felis, sit amet feugiat mi interdum et. Nam.
              </p>
            </td>
          </tr>

          <tr>
            <td> <!-- Third event -->
              <h3>21:00 - 22:00 <span class="eventlocation">Event location</span> <i class="eventtype">presentation</i> <span class="author">Picha / Narratives</span></h3>
              <figure>
                <img src="img/VanKerckhovenstraat.jpg" alt="" />
                <figcaption><i>Les enfants de Save au Rwanda</i> — © Collection des anciens de Save (Evariste Nikolakis)</figcaption>
              </figure>

              <p class="eventtxt twocolumn">
                (event text, 100 words:) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat tellus quis urna viverra, ac varius odio lacinia. In eu eros sed quam dignissim cursus. In ut ante non est malesuada faucibus. Phasellus sagittis, nisl sed faucibus dapibus, enim lacus rhoncus est, at lobortis neque felis vel ante. Curabitur odio eros, porttitor in ex eget, elementum accumsan ex. In aliquet ultrices ex ut venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a neque sed massa pellentesque scelerisque. Vivamus hendrerit dui at molestie iaculis. Mauris interdum semper felis, sit amet feugiat mi interdum et. Nam.
              </p>
            </td>
          </tr>
        </table>


        <!-- ENGLISH CONTENT -->
        <table lang="en" width="690">
          <tr>
            <td>
              <a name="english" class="languageanchors"><i>english version</i></a>
            </td>
          </tr>
          <tr>
            <td> <!-- introduction text -->
              <p class="introtxtgeneral" name="dutch">
                (General introduction to Contour biennale 9 - english) The ninth edition of Contour Biennale takes on a whole new shape than the previous one. Curator Nataša Petrešin-Bachelez chose the denominator "Coltan as Cotton". She was inspired by the eponymous video poem by the American rapper, slammer and writer
                Saul Williams.
              </p>
            </td>
          </tr>

          <tr>
            <td> <!-- First part : 1st crescent-->
              <h1><img src="img/moon-half-left.svg" alt="" style="width:20px;"/> First crescent — 17-19 may </h1>
              <p class="introtxtmoon">
                (This moon's intro text, 50 words:) Suspendisse commodo lacus lacus, eget efficitur augue aliquam eget. Sed fringilla rhoncus lorem ut vehicula. Proin neque nulla, condimentum ac accumsan eget, euismod a erat. Sed nec arcu quis justo blandit pellentesque vel eu eros. Curabitur vestibulum ultricies tempus. Phasellus hendrerit tincidunt nulla, eget ultricies orci aliquam laoreet. Etiam nec.
              </p>
            </td>
          </tr>

          <tr>
            <td> <!-- First day-->
              <h2>friday 17 may</h2>
            </td>
          </tr>

          <tr>
            <td> <!-- First event -->
              <h3>17:00 - 19:00 <span class="eventlocation">Event location</span> <i class="eventtype">film screening</i> <span class="author">Amandine Gay</span></h3>
              <figure>
                <img src="img/enfantsdesave4-2.png" alt="" />
                <figcaption><i>Les enfants de Save au Rwanda</i> — © Collection des anciens de Save (Evariste Nikolakis)</figcaption>
              </figure>
              <p class="eventtxt twocolumn">
                (event text, 100 words:) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat tellus quis urna viverra, ac varius odio lacinia. In eu eros sed quam dignissim cursus. In ut ante non est malesuada faucibus. Phasellus sagittis, nisl sed faucibus dapibus, enim lacus rhoncus est, at lobortis neque felis vel ante. Curabitur odio eros, porttitor in ex eget, elementum accumsan ex. In aliquet ultrices ex ut venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a neque sed massa pellentesque scelerisque. Vivamus hendrerit dui at molestie iaculis. Mauris interdum semper felis, sit amet feugiat mi interdum et. Nam.
              </p>
              <p class="authorbio">
                (artist bio/sub infos, 50 words:)  Nullam quis libero commodo, fermentum dui mattis, rhoncus urna. Praesent at quam sed metus bibendum maximus vel eget lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur euismod nisl leo, ac sodales quam finibus id. Aenean non pharetra nulla.
              </p>
            </td>
          </tr>

          <tr>
            <td> <!-- Second event -->
              <h3>16:30 - 18:00 <span class="eventlocation">Event location</span> <i class="eventtype">lecture performance</i> <span class="author">Mark Pozlep</span></h3>
              <p class="eventtxt twocolumn">
                (event text w/out picture, 100 words:) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat tellus quis urna viverra, ac varius odio lacinia. In eu eros sed quam dignissim cursus. In ut ante non est malesuada faucibus. Phasellus sagittis, nisl sed faucibus dapibus, enim lacus rhoncus est, at lobortis neque felis vel ante. Curabitur odio eros, porttitor in ex eget, elementum accumsan ex. In aliquet ultrices ex ut venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a neque sed massa pellentesque scelerisque. Vivamus hendrerit dui at molestie iaculis. Mauris interdum semper felis, sit amet feugiat mi interdum et. Nam.
              </p>
            </td>
          </tr>

          <tr>
            <td> <!-- Third event -->
              <h3>21:00 - 22:00 <span class="eventlocation">Event location</span> <i class="eventtype">presentation</i> <span class="author">Picha / Narratives</span></h3>
              <figure>
                <img src="img/VanKerckhovenstraat.jpg" alt="" />
                <figcaption><i>Les enfants de Save au Rwanda</i> — © Collection des anciens de Save (Evariste Nikolakis)</figcaption>
              </figure>

              <p class="eventtxt twocolumn">
                (event text, 100 words:) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat tellus quis urna viverra, ac varius odio lacinia. In eu eros sed quam dignissim cursus. In ut ante non est malesuada faucibus. Phasellus sagittis, nisl sed faucibus dapibus, enim lacus rhoncus est, at lobortis neque felis vel ante. Curabitur odio eros, porttitor in ex eget, elementum accumsan ex. In aliquet ultrices ex ut venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a neque sed massa pellentesque scelerisque. Vivamus hendrerit dui at molestie iaculis. Mauris interdum semper felis, sit amet feugiat mi interdum et. Nam.
              </p>
            </td>
          </tr>
        </table>

        <!-- FOOTER -->
        <table width="690">
          <tr>
            <td style="padding-top:50px;padding-bottom:50px;text-align:center;">
              <p id="gdpr">
                You can subscribe to our newsletter <a href="https://contour9.be/newslettersub">here</a>
              </p>
              <p id="sociallinks">
                follow us on <a href="https://facebook.com">Facebook</a> <a href="https://instagram.com">Instagram</a> <a href="https://twitter.com">Twitter</a> | <a href="https://contour9.be">contour9.be</a>
              </p>
            </td>
          </tr>
          <tr>
            <td style="padding-top:20px;text-align:center;">
              <img src="img/Logos.png" alt="" />
            </td>
          </tr>
          <tr>
            <td>
              <p id="unsub">
                <a href="https://contour9.be" style="color:black;text-decoration:underline;">Afmelden / Unsubscribe</a>
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

</body>

</html>