balsamine.2020-2021
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

template-invit-2col-black.html
text/html

Download raw (12.4 KB)

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html charset=UTF-8">
  <meta property="author" name="author" content="la Balsamine">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invitation, la Balsamine</title>
<style type="text/css">


/*==== external fonts ====*/
    @font-face {
        font-family: 'Ume Mincho';
        font-weight: normal;
        font-style: normal;
        src: url('fonts/Ume-Mincho_Balsa.ttf') format('woff');
    }

    @font-face {
        font-family: 'Ume gothic';
        font-weight: normal;
        font-style: normal;
        src: url('fonts/ume-p-gothic-webfont.woff') format('woff');
    }

    @font-face {
        font-family: 'Ume Helium';
        font-weight: normal;
        font-style: normal;
        src: url('fonts/UmeHelium.woff') format('woff');
    }

    @font-face {
        font-family: 'Ume Straight';
        font-weight: normal;
        font-style: normal;
        src: url('fonts/Ume-Straight-Soft.ttf') format('ttf');
    }

    body,
    table {
      margin: 0;
      padding: 0;
      font-size: 1em;
      line-height: 1.3em;
      /*reset*/
      font-size: 100%;
      font-weight: inherit;
      font-family: 'Ume Mincho', Helvetica, sans-serif;
    }

    table {
      background-color: white;
      padding: 0px 40px;
      border-collapse: collapse;
    }
    tr td {
      padding: 20px 20px;
    }
    tr.separation-horozontale {
      border-top: 3px solid;
    }
    tr.separation-horozontale td {
      padding: 0px 0px;
    }

    em {
      font-family: "Ume Mincho Balsa", "Ume Mincho Balsa 64", Trebuchet, serif;
      font-style: normal;
    }

    h1 {
      font-weight: inherit;
      font-size: 3.5em;
      line-height: 1em;
      font-family: 'Ume Straight', Helvetica, sans-serif;
      margin: 0;
      padding-top: 60px;
      padding-bottom: 0;
    }

    h2 {
      font-family: 'Ume Straight', Helvetica, sans-serif;
      margin-top: 0.1em;
      margin-bottom: 4.5px;
      font-size: 2.5em;
      line-height: 1em;
      text-transform: uppercase;
      font-weight: normal;
    }

    h3 {
      font-family: 'Ume Mincho', serif;
      font-style: condensed;
      font-weight: initial;
      font-size: 1.6em;
      line-height:1.3em;
      margin: 0;
      color: black;
    }

    p {
      margin: 0;
      padding: 0;
      /* color: black; */
      font-size: 13.5pt;
      line-height: 17pt;
    }

    .infos-dates {
      font-family: 'Ume Straight', Helvetica, sans-serif;
      font-size: 12.5pt;
      text-transform: none;
    }

    ol, ul {
    list-style: none;
    list-style-type: none;
    }

    .description {
      margin-top: 15px;
      font-family: 'Ume Mincho', serif;
      font-size: 12pt;
    }

    .social-links ul li {
    display: inline-block;
    max-width: 26px !important;
    }

    .contact-info .social-links li a {
    text-decoration: none !important;
    }

    .social-link {
    padding-left: 2px;
    display: inline-block;
    padding-right: 2px;
    }

    .logo-social {
    width: 26px;
    max-width: 26px !important;

    }

    .spectacle-pass ul li {
    display: inline-block;
    }

    li span {
      text-transform: uppercase;
      font-family: 'Ume Straight', Helvetica, sans-serif;
    }

    figure {
      margin: 0;
      padding: 0;
      position: relative;
    }

    img {
      vertical-align: middle;
    }

    img#invitation{
      width:285px !important;
      margin-bottom: 18px;
    }
    img#saison{
      height:150px !important;
      float:left;
      margin-left: 85px;
    }

    figure {
      /* margin: 5px 0px; */
      object-fit: cover;
    }

    figcaption {
      font-size: 8pt;
      color: white;
      position: absolute;
      bottom: -18px;
      width: 150px;
    }

    .large-img {
      width: 159px;
      margin-right: 18px;
    }


    a {
      text-decoration: underline;
      font-size: 16px;
      color:inherit;
    }

    a:visited {
      color: #e59aff;
    }

    p.phrase-intro {
      font-family: "Ume Helium", Helvetica, sans-serif ;
      text-transform: uppercase;
      font-size: 3em;
      letter-spacing: 0.0em;
      padding-left: 0pt;
      padding-right: 0pt;
      line-height: 1.2em;
    }
    blockquote {
      font-family: 'Ume Mincho';
      text-transform: uppercase;
      padding: 0px;
      margin: 0px;
      font-size: 3em;
      font-style: normal;
    }

    .bouton-reserver,
    .bouton-informations  {
      font-family: 'Ume Straight', Helvetica, sans-serif;
      background-color: #e59aff;
      color: black;
      display: inline-block;
      float: left;
      margin: 0.2em 1;
      margin-top: 1em;
      margin-bottom: 21pt;
      padding: 0.8em !important;
      text-decoration: none;
      letter-spacing: 0.04em;
      font-size: 11pt;
      text-transform: uppercase;
    }

    .bouton-informations {
      background-color: white;
      color: black;
      border: 1px solid black;
      padding: 3pt 4pt;
    }

    #container {
      width: 100%;
      height: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      border-collapse: collapse;
    }

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

    .voirenligne {
      font-size: 10pt;
      color: black;
      text-decoration: underline;
    }

    #logosaison {
      width: 690px;
      max-width: 690px;
    }

    #logo {
      width: 200px;
      max-width: 200px;
      padding-left: 0px;
    }

    td .seconde-importance {
      margin: 0;
      width: 345px;
      padding: 40px 40px;
    }

    .seconde-importance img {
      width: 340px;
    }

    .contact-info {
      font-size: 11pt;
      color: black;
      font-family: "Ume Mincho";
      line-height: 1.2em;
      text-align: left;
    }

    .contact-info a,
    .contact-site a {
      color: #fe5000; */
      font-size: 11pt;
      padding: 2px;
      font-family: inherit;
      color: black;
      text-decoration: underline;
    }

    .logos-partenaires {
      max-width: 170px;
      padding: 10px 0px;
    }

    .unsub {
      font-size: 10pt;
      color: white;
      line-height: 12pt;
    }

    .nota-bene {
      font-family: 'Ume Straight', Helvetica, sans-serif;
      font-size: 12pt;
      margin-top: 16px;
    }

    .nota-bene a {
    }


</style>
</head>
<body>


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

  <!-- DEBUT HEADER -->
  <tr> <!-- pour voir l'email en ligne -->
    <td colspan="4" align="center" style="background: black;color: white;padding-bottom: 20px;">
      <a class="voirenligne" style="color: white;" href="https://balsamine.be/#saison-20-21">voir la version en ligne</a>
    </td>
  </tr>

  <!-- logos titres saison -->
  <tr> <!-- logo saison -->
    <td colspan="1" align="left" valign="top" style="padding:0px 0px;">
      <img width="200" id="logo" alt="Théâtre Balsamine" src="https://balsamine.be/images/img-20-21/newsletter/balsa-logo-20-21-low.png"/>
    </td>
    <!-- Titre Invitation -->
    <td colspan="3" align="left" valign="top" style="padding:15px 15px;">
      <img width="285" id="invitation" alt="Invitation" src="https://balsamine.be/images/img-20-21/newsletter/invitation.png"/>
      <p class="infos-dates" style="text-transform:uppercase;">%%titre_id%% %%prenom%% %%nom%%</p>
      <p class="infos-dates">La Balsamine est heureuse de vous inviter à une représentation de&nbsp;:</p>
    </td>
  </tr>

  <!-- filet de séparation-->
  <tr class="separation-horozontale" style="border:3px solid black;">
  </tr>

  <!-- spectacle : 2 colonnes texte à gauche fond noir-->
  <tr style="background-color:black;color:white !important;">
  <!-- Texte -->
    <td colspan="3" valign="top" style="background-color: black;color:white;padding:10px 15px;">
        <h2 style="color:white">137 façons de mourir</h2>
        <h3 style="text-transform: uppercase;color:white !important;">
          Virginie Strub/Kirsh Cie
        </h3>
        <p class="infos-dates">
        Création théâtre d'ombres et de marionnettes</p>
        <p class="infos-dates">Les 7, 14 et 15 novembre</p>
        <p class="description" style="color:white !important;">
        Autopsier la mort, briser son tabou, l'analyser avec crudité et douceur, cruauté et amour, en explorer et exprimer les sensations indicibles et impalpables. 137 façons de mourir, une création atypique sur cette notion de passage d'un état à un autre. Une dissection précise et comptable, matière brute et brutale de ce kaléidoscope de tous types de morts. <a href="https://balsamine.be/saison-20-21/137-fa%C3%A7ons-de-mourir.html">Plus d'infos.</a>
        </p>
    </td>
    <td colspan="2" valign="" style="padding:0px !important;">
      <figure width="330" style="margin-bottom:15px;">
      <a href="https://balsamine.be/saison-20-21/137-fa%C3%A7ons-de-mourir.html">
        <img width="330" src="https://balsamine.be/images/img-20-21/derivatives/timeline/Baindepied2_MargauxFontaine.jpg"/>
      </a>
      <figcaption>© Virginie Strub</figcaption>
    </figure>
    </td>
  </tr>

  <!-- filet de séparation-->
  <tr class="separation-horozontale" style="border:3px solid black;">
  </tr>


  <!-- Nota bene réservation -->

  <tr style="background-color:white;color:black">
    <!-- désabonnement newsletter -->
    <td colspan="2" align="left" valign="top" style="">
      <p class="nota-bene">L'invitation est strictement personnelle et valable pour deux personnes, dans la limite des places disponibles.</p>
    </td>
    <td colspan="2" align="left" valign="top" style="">
      <p class="nota-bene">Réservation: <a style="color:white;" href="mailto:reservation@balsamine.be">reservation@balsamine.be</a>
        <br/>+32 2 735 64 68 du lundi au vendredi, de 14h30 à 17h30, les samedis jours de représentations de 16h30 à 19h, et les soirs de représentations jusqu'à 19h.</p>
    </td>
  </tr>



  <!-- FIN CONTENU -->

    <tr class="separation-horizontale" style="border:3px solid black;" width="" ></tr>


  <!-- DEBUT FOOTER-->
    <tr width="690">
      <!-- activités balsamine -->
      <td colspan="1" align="left" valign="top" style="padding:10px;width: 150px;border-right: 3px solid black;background-color:#e59aff;">
        <img width="150" alt="[image manquante]" src="https://balsamine.be/images/img-20-21/newsletter/balsa-creations.png"/>
      </td>

      <td colspan="2" style="padding-left: 10px;padding-right: 10px;border-right: 3px solid black;" align="center">
        <img width="170" alt="[logo partenaires]" src="https://balsamine.be/images/img-20-21/newsletter/logos.png"/>
      </td>

      <!-- infos de contact -->
      <td colspan="1" valign="top" style="padding:9px 9px;text-align:left;background-color:#e59aff;">
        <!-- adresse postale -->
        <p class="contact-info">Théâtre La Balsamine</p>
        <p class="contact-info">Avenue Félix Marchal, 1</p>
        <p class="contact-info">1030 Bruxelles</p>
        <p class="contact-info">+32 2 732 96 18 <br/><a href="mailto:info@balsamine.be">info@balsamine.be</a></p>
        <p class="contact-info"><a href="http://balsamine.be/">www.balsamine.be</a></p>
        <ul style="padding-left: 0px !important;">
          <li class="social-link" width:"26" >
            <a href=" https://www.facebook.com/balsamine.theatre">
              <img width:"26" class="logo-social" src="https://balsamine.be/images/img-20-21/newsletter/emoji-facebook.png">
            </a>
          </li>
          <li class="social-link" width:"26" >
            <a href=" https://twitter.com/balsatheatre">
              <img width:"26" class="logo-social" src="https://balsamine.be/images/img-20-21/newsletter/emoji-twitter.png">
            </a>
          </li>
          <li class="social-link" width:"26" >
            <a href=" https://www.instagram.com/balsamine1030/">
              <img width:"26" class="logo-social" src="https://balsamine.be/images/img-20-21/newsletter/emoji-instagram.png">
            </a>
          </li>
          <li class="social-link" width:"26" >
            <a href="https://lucarne.balsamine.be/">
              <img  width:"26" class="logo-social" src="https://balsamine.be/images/img-20-21/newsletter/emoji-peertube.png">
            </a>
          </li>
        </ul>


      </td>


    </tr>

    <tr class="separation-horizontale" width=""></tr>


    <!-- FIN FOOTER  -->


  </table>
  </td>
  </tr>
  </table>

  </body>
  </html>