Download raw (21.0 KB)
<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></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');
}
Ume-Straight-Soft
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;
/* === COULEUR FOND : === */
}
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;
/* font-weight: bold; */
/* color: black; */
/* text-transform: uppercase; */
margin: 0;
padding-top: 60px;
padding-bottom: 0;
}
h2 {
font-family: 'Ume Mincho', serif;
font-style: condensed;
font-weight: initial;
margin-top: 0.1em;
margin-bottom: 4.5px;
font-size: 2.3em;
line-height: 1em;
/* color: black; */
text-transform: uppercase;
}
h3 {
text-transform: none;
font-size: 1.1em;
line-height:1.2em;
margin: 0;
color: black;
}
p {
margin: 0;
padding: 0;
/* color: black; */
font-size: 13.5pt;
line-height: 16pt;
}
ol, ul {
list-style: none;
}
.social-links ul li {
display: inline-block;
}
.social-link {
padding-left: 3px;
padding-right: 3px;
display: inline-block;
padding-right: 5px;
}
.logo-social {
/* filter: invert(100%); */
max-width: 26px;
max-height: 25px;
}
.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#desirs-futurs{
height:140px !important;
}
img#saison{
height:150px !important;
float:left;
margin-left: 85px;
}
figure {
margin: 5px 0px;
}
figcaption {
font-size: 8pt;
color: black;
position: absolute;
bottom: -18px;
left: 100%;
transform-origin: 0 0;
transform: rotate(-90deg);
width: 150px;
}
.large-img {
width: 159px;
float: left;
margin-right: 18px;
}
tr td.gauche figure figcaption {
left: -6%;
}
a {
text-decoration: underline;
color: black;
font-size: 16px;
}
a:visited {
color: black;
}
p.phrase-intro {
font-family: "Ume Helium", Helvetica, sans-serif ;
/* font-weight: bold; */
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 {
padding: 4pt 5pt;
color: white;
background-color: black;
text-transform: uppercase;
font-family: "Ume gothic bold", Helvetica, sans-serif;
font-weight: bold;
font-size: 9pt;
}
.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;
background-color: black;
}
#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 figure {
width: 340px;
margin-top: 5px;
}
.seconde-importance img {
width: 340px;
}
.seconde-importance h1 {
font-size: 30pt;
line-height: 28pt;
margin: 0;
padding: 0;
color: black;
width: 340px;
}
.seconde-importance h2 {
font-size: 20pt;
line-height: 21pt;
margin: 5px 0;
width: 340px;
color: black;
margin-top: 2px;
margin-bottom: 0;
}
.seconde-importance p {
font-size: 13.5pt;
line-height: 16pt;
width: 340px;
color: black;
margin-top: 10px;
}
.seconde-importance p.complement {
font-size: 10pt;
line-height: 12.5pt;
font-style: oblique;
margin: 0;
color: black;
margin-top: 5px;
}
.contact-info {
font-size: 11pt;
color: black;
font-family: "Ume Mincho";
line-height: 1.2em;
text-align: left;
}
.contact-info a,
.contact-site a {
/* background-color: black;
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;
}
.complement {
font-size: 10pt;
color: black;
line-height: 12.5pt;
font-style: oblique;
margin: 0;
margin-top: 5px;
}
</style>
<!-- ==== NOTES À PROPOS DU CODE ==== --><!--
Les mails sont structurés par des tableaux :
les balises <table> & </table> indiquent respectivement le début et la fin d'un tableau.
les balises <tr> & </tr> indiquent respectivement le début et la fin d'une ligne.
les balises <td> & </td> indiquent respectivement le début et la fin d'une colonne.
une ligne peut contenir plusieurs colonnes le cas échéant.
le principe est très proche d'un tableur de bureautique classique :
les mentions : colspan="2" indiquent que la colonne est la fusion de deux colonnes successives.
les mentions : valign="top" indiquent que le contenu la colonne est calé en haut de celle-ci (pas au centre ni en bas).
les mentions : align="center" indiquent que le contenu la colonne est centré dans celle-ci (pas à gauche ni à droite ≃ justification).
A priori les parties HEADER & FOOTER ne seront pas à changer, vous pouvez les garder telles quelles.
Quand vous voulez copier du contenu type il faut bien penser à copier les éléments et leurs parents par blocs :
<tr> ┓
<td> ┃
le contenu ┃ > on doit copier le bloc entier
</td> ┃
</tr> ┛
-->
<table id="container" style="margin: 0;padding: 0;font-size: 100%;line-height: 1.3em;font-weight: inherit;font-family: 'Ume Mincho', Helvetica, sans-serif;background-color: black;border-collapse: collapse;width: 100%;height: 100%;max-width: 100%;">
<tbody>
<tr>
<td align="center" id="container-cell" style="padding: 20px 20px;width: 100%;height: 100%;margin: 0;padding-bottom: 20px;vertical-align: top;align-self: center;" valign="top">
<table style="margin: 0;padding: 0px 40px;font-size: 100%;line-height: 1.3em;font-weight: inherit;font-family: 'Ume Mincho', Helvetica, sans-serif;background-color: white;border-collapse: collapse;" width="690"><!-- DEBUT HEADER -->
<tbody>
<tr><!-- pour voir l'email en ligne -->
<td align="center" colspan="4" style="background: black;color: white;padding-bottom: 20px;padding: 20px 20px;"><a class="voirenligne" href="https://balsamine.be/#saison-20-21" style="color: white;text-decoration: underline;font-size: 10pt;">voir la version en ligne</a></td>
</tr>
<tr style=""><!-- logo saison 2020-21 -->
<td align="left" colspan="1" style="padding:0px;border-right:0px solid black;" valign="top"><img alt="Théâtre Balsamine" id="logo" src="https://balsamine.be/images/img-20-21/newsletter/balsa-logo-20-21-low.png" style="vertical-align: middle;width: 200px;max-width: 200px;padding-left: 0px;" /></td>
<!-- texte d'introduction -->
<td colspan="2" style="padding:15px 30px 10px 0px;text-align:left;" valign="top"><!-- <p class="phrase-intro">Désirs futurs</br>
<blockquote>métamorphoses</blockquote>
</p> --><img alt="Désirs futurs" id="desirs-futurs" src="https://balsamine.be/images/img-20-21/newsletter/desirs-futur.png" style="vertical-align: middle;height: 140px !important;" /></td>
<td colspan="1" style="padding:15px 30px 0px 0px;text-align:left;background-color:black;color:white;" valign="top"><img alt="2020-21" id="saison" src="https://balsamine.be/images/img-20-21/newsletter/2020-21.png" style="vertical-align: middle;float: left;margin-left: 85px;height: 150px !important;" /> <!-- <p class="phrase-intro">2020</br>2021</p> --></td>
</tr>
<!-- FIN HEADER -->
<tr class="separation-horozontale" style="border-top: 3px solid;" width="">
</tr>
<!-- DEBUT CONTENU -->
<tr><!-- Titre & Auteur -->
<td colspan="4" style="padding-top: 10px;background-color: #e59aff;padding: 20px 20px;" valign="top">
<h2 style="font-family: 'Ume Mincho', serif;font-style: condensed;font-weight: initial;margin-top: 0.1em;margin-bottom: 4.5px;font-size: 2.3em;line-height: 1em;text-transform: uppercase;">Le pass Balsa - toujours et encore</h2>
<p style="margin: 0;padding: 0;font-size: 13.5pt;line-height: 16pt;">Notre fameux abonnement théâtre au prix démocratique de <b>25€ pour 7 spectacles</b>, est toujours d’actualité. En vente en ligne à partir du 30 juin. La seule différence c’est qu’il sera dématérialisé, pas de petite carte à poinçonner à la billetterie. Ne vous inquiétez pas, si vous souhaitez l’offrir, on vous concocte un chouette petit support, idéal pour gâter vos proches !</p>
<figure style="margin: 5px 0px;padding: 0;position: relative;"><img alt="[image manquante]" class="large-img" src="https://balsamine.be/images/img-20-21/newsletter/e-ticket-pass-cover.png" style="vertical-align: middle;width: 159px;float: left;margin-right: 18px;" /> <!-- copyright image -->
<figcaption style="font-size: 8pt;color: black;position: absolute;bottom: -18px;left: 100%;transform-origin: 0 0;transform: rotate(-90deg);width: 150px;"> </figcaption>
</figure>
<ul class="spectacles-pass" style="list-style: none;">
<li><span style="text-transform: uppercase;font-family: 'Ume Straight', Helvetica, sans-serif;">137 façons de mourir</span> 29.09 → 09.10</li>
<li><span style="text-transform: uppercase;font-family: 'Ume Straight', Helvetica, sans-serif;">Au pied des montagnes</span> 07.11 → 09.11</li>
<li> </li>
<li><span style="text-transform: uppercase;font-family: 'Ume Straight', Helvetica, sans-serif;">les lianes</span> 10.11 → 15.11</li>
<li><span style="text-transform: uppercase;font-family: 'Ume Straight', Helvetica, sans-serif;">Todos caeràn</span> 03.02 → 12.02</li>
<li><span style="text-transform: uppercase;font-family: 'Ume Straight', Helvetica, sans-serif;">Auteur inconnu</span> 02.03 → 06.03</li>
<li><span style="text-transform: uppercase;font-family: 'Ume Straight', Helvetica, sans-serif;">Le Nid ou Volvox</span> 30.03 → 03.04</li>
<li><span style="text-transform: uppercase;font-family: 'Ume Straight', Helvetica, sans-serif;">Forêts paisibles<span style="text-transform: uppercase;font-family: 'Ume Straight', Helvetica, sans-serif;"> 15.06 → 25.06</span></span></li>
</ul>
<p style="margin: 0;padding: 0;font-size: 13.5pt;line-height: 16pt;"><a href="https://www.balsamine.be/billetterie.html#le-pass" style="text-decoration: underline;color: black;font-size: 16px;">Plus d’infos ?</a></p>
</td>
</tr>
<tr class="separation-horozontale" style="border: 3px solid white;border-top: 3px solid;">
</tr>
<tr style="background-color:black;color:white !important; padding=0px;"><!-- Texte -->
<td colspan="2" style="background-color: black;color:white;padding:10px;" valign="top">
<h2 style="color: white;font-family: 'Ume Mincho', serif;font-style: condensed;font-weight: initial;margin-top: 0.1em;margin-bottom: 4.5px;font-size: 2.3em;line-height: 1em;text-transform: uppercase;">Coup d’œil dans la lucarne</h2>
<p style="color: white !important;margin: 0;padding: 0;font-size: 13.5pt;line-height: 16pt;">Nouveauté : nous avons créé une chaîne Balsa, telle une fenêtre sur la vie du théâtre → <a href="https://lucarne.balsamine.be/" style="color: #e59aff;text-decoration: underline;font-size: 16px;">lucarne.balsamine.be</a> Cette lucarne est un espace de transition entre le dehors et le dedans, la scène et le hors-scène, la boîte du théâtre et ce qui s’y fomente à tous les étages. Cette lucarne n’a pas de visée promotionnelle mais c’est une façon de travailler aux partages horizontaux. Au fur et à mesure de la saison, les artistes viendront l’alimenter..</p>
</td>
<td colspan="3" style="width:250px;padding:0px !important;"><a href="https://lucarne.balsamine.be/" style="text-decoration: underline;color: black;font-size: 16px;"><img src="https://balsamine.be/images/img-20-21/newsletter/lucarne-link.png" style="float: right;width: 380px;vertical-align: middle;" /> </a></td>
</tr>
<tr class="separation-horozontale" style="border: 3px solid white;border-top: 3px solid;" width="">
</tr>
<tr>
<td colspan="1" style="padding:0px !important" valign="top"><img src="https://balsamine.be/images/img-20-21/newsletter/visuel_stage_paques.jpg" style="width: 265px;vertical-align: middle;" /></td>
<td colspan="3" style="padding-left: 20px;padding: 20px 20px;" valign="top">
<h2 style="font-family: 'Ume Mincho', serif;font-style: condensed;font-weight: initial;margin-top: 0.1em;margin-bottom: 4.5px;font-size: 2.3em;line-height: 1em;text-transform: uppercase;">Le bonheur à portée de stage</h2>
<h3 style="text-transform: none;font-size: 1.1em;line-height: 1.2em;margin: 0;color: black;">Du 24 au 28 aôut.</h3>
<p style="margin: 0;padding: 0;font-size: 13.5pt;line-height: 16pt;">Parce qu’un bonheur n’arrive jamais seul, non seulement il est désormais possible de réserver le stage en ligne sur notre site : <a href="http://balsamine.billetterie.it/index.php/?mact=Agenda,cntnt01,DetailEvent,0&cntnt01id_event=179" style="text-decoration: underline;color: black;font-size: 16px;">ici</a> Mais en plus, sans date limite ! Si c'est pas déjà un peu une idée du bonheur, ça…</p>
<!-- Visuel --><!-- <figure>
<img alt="[image manquante]" src="https://balsamine.be/images/img-18-19/unnamed4.jpg"/>
<figcaption>© Johan Legraie</figcaption>
</figure> --></td>
</tr>
<!-- FIN CONTENU -->
<tr class="separation-horozontale" style="border-top: 3px solid;" width="">
</tr>
<!-- DEBUT FOOTER-->
<tr><!-- activités balsamine -->
<td align="left" colspan="1" style="padding:10px;width: 200px;border-right: 3px solid black;background-color:#e59aff;" valign="top"><img alt="[image manquante]" src="https://balsamine.be/images/img-20-21/newsletter/balsa-creations.png" style="vertical-align: middle;" width="200" /></td>
<!-- infos de contact -->
<td colspan="2" style="padding:9px 9px;text-align:left;border-right: 3px solid black;background-color:#e59aff;" valign="top"><!-- adresse postale -->
<p class="contact-info" style="margin: 0;padding: 0;font-size: 11pt;line-height: 1.2em;color: black;font-family: "Ume Mincho";text-align: left;">Théâtre La Balsamine</p>
<p class="contact-info" style="margin: 0;padding: 0;font-size: 11pt;line-height: 1.2em;color: black;font-family: "Ume Mincho";text-align: left;">Avenue Félix Marchal, 1</p>
<p class="contact-info" style="margin: 0;padding: 0;font-size: 11pt;line-height: 1.2em;color: black;font-family: "Ume Mincho";text-align: left;">1030 Bruxelles</p>
<p class="contact-info" style="margin: 0;padding: 0;font-size: 11pt;line-height: 1.2em;color: black;font-family: "Ume Mincho";text-align: left;">Réserver : +32 2 735 64 68</p>
<p class="contact-info" style="margin: 0;padding: 0;font-size: 11pt;line-height: 1.2em;color: black;font-family: "Ume Mincho";text-align: left;"><a href="mailto:reservation@balsamine.be" style="text-decoration: underline;color: black;font-size: 11pt;padding: 2px;font-family: inherit;">reservation@balsamine.be</a></p>
<p class="contact-info" style="margin: 0;padding: 0;font-size: 11pt;line-height: 1.2em;color: black;font-family: "Ume Mincho";text-align: left;"><a href="http://balsamine.be/" style="text-decoration: underline;color: black;font-size: 11pt;padding: 2px;font-family: inherit;">www.balsamine.be</a></p>
<p class="contact-info" style="margin: 0;padding: 0;font-size: 11pt;line-height: 1.2em;color: black;font-family: "Ume Mincho";text-align: left;">Fermeture estivale : du 1<sup>er</sup> juillet au 16 août.</p>
<ul style="list-style: none;">
<li class="social-link" style="padding-left: 3px;padding-right: 5px;display: inline-block;"><a href=" https://www.facebook.com/balsamine.theatre" style="text-decoration: underline;color: black;font-size: 16px;"><img class="logo-social" src="https://balsamine.be/images/img-20-21/newsletter/emoji-facebook.png" style="vertical-align: middle;max-width: 26px;max-height: 25px;" /></a></li>
<li class="social-link" style="padding-left: 3px;padding-right: 5px;display: inline-block;"><a href=" https://twitter.com/balsatheatre" style="text-decoration: underline;color: black;font-size: 16px;"><img class="logo-social" src="https://balsamine.be/images/img-20-21/newsletter/emoji-twitter.png" style="vertical-align: middle;max-width: 26px;max-height: 25px;" /></a></li>
<li class="social-link" style="padding-left: 3px;padding-right: 5px;display: inline-block;"><a href=" https://www.instagram.com/balsamine1030/" style="text-decoration: underline;color: black;font-size: 16px;"><img class="logo-social" src="https://balsamine.be/images/img-20-21/newsletter/emoji-instagram.png" style="vertical-align: middle;max-width: 26px;max-height: 25px;" /></a></li>
</ul>
</td>
<td align="center" colspan="4" style="padding-left: 10px;padding-right: 0px;padding: 20px 20px;"><img alt="[image manquante]" class="logos-partenaires" src="https://balsamine.be/images/img-20-21/newsletter/logos.png" style="vertical-align: middle;max-width: 170px;padding: 10px 0px;" /></td>
</tr>
<tr class="separation-horozontale" style="border-top: 3px solid;" width="">
</tr>
<tr style="background:black;"><!-- désabonnement newsletter -->
<td align="center" colspan="4" style="padding-top: 40px;padding: 20px 20px;">
<p class="unsub" style="margin: 0;padding: 0;font-size: 10pt;line-height: 12pt;color: white;">Si vous désirez ne plus recevoir la newsletter de la Balsamine, cliquer <a class="contact-link" href="http://balsamine.billetterie.it/lists/?p=unsubscribe" style="text-decoration: underline;font-size: 9pt;color: black;">ici </a></p>
</td>
</tr>
<!-- FIN FOOTER -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>