Download raw (17.6 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>Balsamine news</title>
<style>
/*==== 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>
</head>
<body>
<!-- ==== 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">
<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>
<tr style=""> <!-- logo saison 2020-21 -->
<td colspan="1" align="left" valign="top" style="padding:0px;border-right:0px solid black;">
<img id="logo" alt="Théâtre Balsamine" src="https://balsamine.be/images/img-20-21/newsletter/balsa-logo-20-21-low.png"/>
</td>
<!-- texte d'introduction -->
<td colspan="2" valign="top" style="padding:15px 30px 10px 0px;text-align:left;">
<!-- <p class="phrase-intro">Désirs futurs</br>
<blockquote>métamorphoses</blockquote>
</p> -->
<img id="desirs-futurs" alt="Désirs futurs" src="https://balsamine.be/images/img-20-21/newsletter/desirs-futur.png"/>
</td>
<td colspan="1" valign="top" style="padding:15px 30px 0px 0px;text-align:left;background-color:black;color:white;">
<img id="saison" alt="2020-21" src="https://balsamine.be/images/img-20-21/newsletter/2020-21.png"/>
<!-- <p class="phrase-intro">2020</br>2021</p> -->
</td>
</tr>
<!-- FIN HEADER -->
<tr class="separation-horozontale" width="">
</tr>
<!-- DEBUT CONTENU -->
<tr> <!-- Titre & Auteur -->
<td colspan="4" valign="top" style="padding-top: 10px;background-color:#e59aff;">
<h2>Le pass Balsa - toujours et encore</h2>
<p>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>
<img class="large-img" alt="[image manquante]" src="https://balsamine.be/images/img-20-21/newsletter/e-ticket-pass-cover.png"/>
<!-- copyright image -->
<figcaption></figcaption>
</figure>
<ul class="spectacles-pass">
<li><span>137 façons de mourir</span>
29.09 → 09.10</li>
<li><span>Au pied des montagnes</span>
07.11 → 09.11<li>
<li><span>les lianes</span>
10.11 → 15.11</li>
<li><span>Todos caeràn</span>
03.02 → 12.02</li>
<li><span>Auteur inconnu</span>
02.03 → 06.03</li>
<li><span>Le Nid ou Volvox</span>
30.03 → 03.04</li>
<li><span>Forêts paisibles<span>
15.06 → 25.06</li>
</ul>
<p><a href="https://balsamine.be/billetterie.html#le-pass">Plus d’infos ?</a></p>
</td>
</tr>
<tr class="separation-horozontale" style="border:3px solid white;">
</tr>
<tr style="background-color:black;color:white !important; padding=0px;"> <!-- Texte -->
<td colspan="2" valign="top" style="background-color: black;color:white;padding:10px;">
<h2 style="color:white">Coup d’œil dans la lucarne</h2>
<p style="color:white !important;"> Nouveauté : nous avons créé une chaîne Balsa, telle une fenêtre sur la vie du théâtre → <a style="color:#e59aff;" href="https://lucarne.balsamine.be/">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/">
<img style="float:right; width:380px;" src="https://balsamine.be/images/img-20-21/newsletter/lucarne-link.png">
</a>
</td>
</tr>
<tr class="separation-horozontale" width="" style="border:3px solid white;">
</tr>
<tr>
<td colspan="1" valign="top" style="padding:0px !important">
<img style="width:265px" src="https://balsamine.be/images/img-20-21/newsletter/visuel_stage_paques.jpg">
</td>
<td colspan="3" valign="top" style="padding-left:20px">
<h2>Le bonheur à portée de stage</h2>
<h3>Du 24 au 28 aôut.</h3>
<p>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">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" width="">
</tr>
<!-- DEBUT FOOTER-->
<tr>
<!-- activités balsamine -->
<td colspan="1" align="left" valign="top" style="padding:10px;width: 200px;border-right: 3px solid black;background-color:#e59aff;">
<img width="200" alt="[image manquante]" src="https://balsamine.be/images/img-20-21/newsletter/balsa-creations.png"/>
</td>
<!-- infos de contact -->
<td colspan="2" valign="top" style="padding:9px 9px;text-align:left;border-right: 3px solid black;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">Réserver : +32 2 735 64 68</p>
<p class="contact-info"><a href="mailto:reservation@balsamine.be">reservation@balsamine.be</a></p>
<p class="contact-info"><a href="http://balsamine.be/">www.balsamine.be</a></p>
<p class="contact-info">Fermeture estivale : du 1<sup>er</sup> juillet au 16 août.</p>
<ul>
<li class="social-link"><a href=" https://www.facebook.com/balsamine.theatre"><img class="logo-social" src="https://balsamine.be/images/img-20-21/newsletter/emoji-facebook.png"></li>
<li class="social-link"><a href=" https://twitter.com/balsatheatre"><img class="logo-social" src="https://balsamine.be/images/img-20-21/newsletter/emoji-twitter.png"></li>
<li class="social-link"><a href=" https://www.instagram.com/balsamine1030/"><img class="logo-social" src="https://balsamine.be/images/img-20-21/newsletter/emoji-instagram.png"></li>
</ul>
</td>
<td colspan="4" style="padding-left: 10px;padding-right: 0px;" align="center">
<img style=""class="logos-partenaires" alt="[image manquante]" src="https://balsamine.be/images/img-20-21/newsletter/logos.png"/>
</td>
</tr>
<tr class="separation-horozontale" width="">
</tr>
<tr style="background:black;">
<!-- désabonnement newsletter -->
<td colspan="4" align="center" style="padding-top:40px;">
<p class="unsub">Si vous désirez ne plus recevoir la newsletter de la Balsamine, cliquer <a style="text-decoration:underline;font-size:9pt;" class="contact-link" href="http://balsamine.billetterie.it/lists/?p=unsubscribe">ici </a></p>
</td>
</tr>
<!-- FIN FOOTER -->
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>