Download raw (17.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>Balsamine news</title>
<style>
/*==== external fonts ====*/
@font-face {
font-family: 'Ume Mincho';
font-weight: normal;
font-style: normal;
src: url('fonts/ume-mincho_balsa-webfont.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');
}
body,
table {
margin: 0;
padding: 0;
font-size: 1em;
line-height: 1.3em;
/*reset*/
font-size: 100%;
font-weight: inherit;
font-family: "Ume vertical", "Ume vertical 64", Helvetica, sans-serif;
/* === COULEUR FOND : === */
}
table {
background-color: white;
padding: 0px 40px;
border-collapse: collapse;
}
tr td {
padding: 0px 40px;
}
tr.separation-horozontale {
border-top: 10px 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: 4.2em;
line-height: 1.1em;
font-family: "Ume gothic bold", Helvetica, sans-serif;
font-weight: bold;
color: black;
text-transform: uppercase;
margin: 0;
padding-top: 60px;
padding-bottom: 0;
}
h2 {
text-transform: none;
font-family: 'Ume Mincho Condensed', serif;
font-style: condensed;
font-weight: initial;
margin-top: 0.1em;
margin-bottom: 4.5px;
font-size: 2.5em;
line-height: 0.8em;
color: black;
}
h3 {
text-transform: none;
font-size: 13.5pt;
line-height: 1.4em;
font-weight: initial;
margin: 0;
color: black;
}
p {
margin: 0;
padding: 0;
color: black;
font-size: 13.5pt;
line-height: 16pt;
}
figure {
margin: 0;
padding: 0;
position: relative;
}
img {
vertical-align: middle;
}
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: 736px;
}
tr td.gauche figure figcaption {
left: -6%;
}
a {
text-decoration: none;
color: #6b89ed;
font-size: 16px;
}
a:visited {
color: black;
}
p.phrase-intro {
font-family: "Ume gothic bold", Helvetica, sans-serif ;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 0.04em;
padding-left: 65pt;
padding-right: 65pt;
line-height: 1.3em;
}
.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: 8pt;
color: black;
text-decoration: underline;
}
#logosaison {
width: 690px;
max-width: 690px;
}
#logo {
width: 180px;
max-width: 180px;
padding-left: 30px;
}
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 h3 {
font-size: 13pt;
line-height: 15pt;
margin-top: 0px;
color: black;
width: 340px;
} */
.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 Bold";
line-height: 1.2em;
text-align: center;
color: black;
}
.contact-info a,
.contact-site a {
/* background-color: black;
color: #fe5000; */
font-size: 11pt;
padding: 2px;
font-family: inherit;
color: #ff7c48;;
}
.logos-partenaires {
/* width: 690px;
padding: 10px 0px; */
}
.unsub {
font-size: 9pt;
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-1819">voir la version en ligne</a>
</td>
</tr>
<tr> <!-- logo saison 2018-19 -->
<td colspan="1" align="center" valign="top" style="padding:0px;border-right:10px solid black;">
<img width="180" id="logo" alt="Théâtre Balsamine" src="img/img-19-20/logos/balsa19-20-logo-nb-simple.png"/>
</td>
<!-- texte d'introduction -->
<td colspan="3" style="padding:0px;padding-bottom:0px;text-align:center;">
<p class="phrase-intro">Qu'il s'agisse de danse et d'errance, de savoirs ou d'instinct de survie, ce mois de mars sera particulièrement sauvage.</p></blockquote>
</td>
</tr>
<tr>
</tr>
<!-- FIN HEADER -->
<tr class="separation-horozontale" width="">
</tr>
<!-- DEBUT CONTENU -->
<tr> <!-- Titre & Auteur -->
<td colspan="4" valign="top" style="padding-top: 10px;">
<h1 style="padding-top:30px;">Les loups</h1>
<h2>Jean Le Peltier</h2>
</td>
</tr>
<tr> <!-- Infos générales -->
<td colspan="3" style="width:580px;">
<h3 class="dates" style="margin:0;">26.03 ➛ 30.03</h2>
<h3 style="margin:0;">à 20h30 — Création théâtre</h3>
<h3 style="margin:0;">+ Concert de The Summer Rebellion le vendredi 30 mars</h3>
</td>
<!-- lien réservation -->
<td colspan="1" valign="bottom" style="padding-top:30px;width:110px;text-align:right;padding-bottom:5px;">
<a class="bouton-reserver" href="https://www.balsamine.be/#actualites">Réserver</a>
</td>
</tr>
<tr> <!-- Visuel -->
<td colspan="4">
<figure>
<img class="large-img" alt="[image manquante]" src="https://balsamine.be/images/img-18-19/Valhalla8.jpg"/>
<!-- copyright image -->
<figcaption>© Hichem Dahes</figcaption>
</figure>
</td>
</tr>
<tr> <!-- Texte -->
<td colspan="4" style="padding-bottom:20px;">
<p style="color:#000000">Hier soir, Les Loups nous ont convié·es à un voyage fantasmagorique aux confins du monde, nous berçant jusqu'à un état de délicieuse rêverie pour le reste de la semaine. Une semaine qui se clôturera dans une ambiance ultra festive avec le
groupe The Summer Rebellion qu'on vous laisse découvrir ici! <a class="bouton-informations" href="https://www.balsamine.be/#actualites"><span style="">Plus d'infos</span></a></p>
</td>
</tr>
<tr class="separation-horozontale" width="">
</tr>
<tr >
<!-- Informations secondaires -->
<!-- COLONNE DE GAUCHE (première info) -->
<td colspan="2" valign="top" class="seconde-importance gauche" style="">
<!-- Infos générales -->
<h1>Le Voyage</h1>
<h2>de Brice Cannavo</h2>
<h3>20 et 21 avril</h3>
<h3>à 20h00 — Pièce radiophonique</h3>
<!-- Visuel -->
<figure>
<img alt="[image manquante]" src="https://balsamine.be/images/img-18-19/unnamed4.jpg"/>
<!-- copyright image -->
<figcaption>© Johan Legraie</figcaption>
</figure>
<p style="color:#000000">
Le Voyage nous mène, à travers la fiction du « Voyage au centre de la Terre » de Jules Verne, à la rencontre de Tchawa, une femme, bel et bien réelle, ayant fui son pays natal pour sauver ses nièces de l'excision. Le voyage, acte de bravoure lorsqu’on
en lit les péripéties des plus audacieux dans les textes épiques et romanesques, que devient-il, confronté à la réalité de celles et ceux qui le vivent malgré eux ?
<br/>Prix d'entrée libre. L'argent récolté est reversé à la Plateforme citoyenne de soutien aux réfugiés.
</p>
<!-- complément (facultatif) -->
<p class="complement">
Organisée par Culture et Démocratie en partenariat avec La Balsa et avec le soutien de Radio Panik
</p>
</td>
<!-- COLONNE DE GAUCHE (seconde info) -->
<td colspan="2" valign="top" class="seconde-importance" style="padding-left:16px;">
<!-- Infos générales -->
<h1>Langues et hospitalité</h1>
<h2>Émission de radio en public, conçue et animée par Caroline Berliner</h2>
<h3 class="dates" style="margin:0;">21.04</h3>
<h3 style="margin-bottom:5pt;">à 17h00</h3>
<a class="bouton-reserver" href="https://www.balsamine.be/#actualites">Réserver</a>
<p style="margin:0;font-size:9pt;">(réservation souhaitée mais non obligatoire)</p>
<!-- Visuel -->
<figure class="right-img">
<img width="345px" alt="[image manquante]" src="https://balsamine.be/images/img-18-19/unnamed2.jpg"/>
<!-- copyright image -->
<figcaption>© Collectif Coconut Valley</figcaption>
</figure>
<!-- Texte -->
<p>Artistes, juristes, enseignants et membres d’associations – ayant ou non une expérience de l’exil –, interrogeront leurs pratiques, ce que recouvre aujourd’hui la notion d’hospitalité en Europe et comment la rencontre de l’autre peut devenir
un atout, un enrichissement au lieu d’être un obstacle et un sujet de crainte. Les débats seront ponctués par des lectures et des interludes musicaux en direct. L’émission sera diffusée sur les ondes de Radio Panik(105.4 FM) le 26 avril
de 16h à 18h.
<br/>La soirée se poursuivra avec la diffusion de Le Voyage. <a class="bouton-informations" href="https://www.balsamine.be/#actualites"><span style="">Plus d'infos</span></a>
</p>
</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-top: 10px;width: 200px;padding-right: 10px;padding-left: 0px;border-right: 10px solid black;">
<img width="200" alt="[image manquante]" src="img/img-19-20/balsa-creation3.png"/>
</td>
<!-- infos de contact -->
<td colspan="2" style="padding:0px 10px;text-align:left;width: 580px;">
<!-- adresse postale -->
<p class="contact-info">Avenue Félix Marchal, 1</p>
<p class="contact-info">1030 Bruxelles</p>
<p class="contact-info">Administration : +32 2 732 96 18</p>
<p class="contact-info"><a href="mailto:info@balsamine.be">info@balsamine.be</a></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>
</td>
<td colspan="1" style="padding-left: 10px;padding-right: 0px;border-left: 10px solid black;">
<img width="200" style=""class="logos-partenaires" alt="[image manquante]" src="img/img-19-20/logos/logos-all-large-19-20.png"/>
</td>
</tr>
<tr class="separation-horozontale" width="">
</tr>
<tr>
<!-- logos partenaires -->
<!-- <td colspan="4" align="center" style="padding-top:0px;">
<img width="600" class="logos-partenaires" alt="[image manquante]" src="img/img-19-20/logos/logos-all-large-19-20.png"/>
</td>
</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>