Download raw (16.5 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: 27px;
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;
}
.social-links ul li {
display: inline-block;
}
.contact-info .social-links li a {
text-decoration: none !important;
}
.social-link {
padding-left: 3px;
padding-right: 3px;
display: inline-block;
padding-right: 5px;
}
.logo-social {
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#invitation{
width:362px !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: black;
position: absolute;
bottom: -18px;
left: -18px;
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;
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;
/* 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 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;
/* line-height: 12.5pt; */
margin-top: 16px;
}
.nota-bene a {
}
</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" 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 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 0px;">
<img 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 :</p>
</td>
</tr>
<tr class="separation-horozontale" style="border:3px solid white;">
</tr>
<!-- spectacle 1 : 2 colonnes texte à gauche fond noir-->
<tr style="background-color:black;color:white !important;">
<!-- Texte -->
<td colspan="2" 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="">Plus d'infos.</a>
</p>
</td>
<td colspan="2" valign="" style="padding:0px !important;">
<figure>
<a href="https://balsamine.be/saison-20-21/137-fa%C3%A7ons-de-mourir.html">
<img style="float:right; width:380px;" src="https://balsamine.be/images/img-20-21/derivatives/timeline/Baindepied2_MargauxFontaine.jpg"/>
</a>
<figcaption>yepla</figcaption>
</figure>
</td>
</tr>
<!-- filet de séparation-->
<tr class="separation-horozontale" style="border:3px solid black;">
</tr>
<!-- spectacle 2 : image horizontale texte en dessous sur fond violet-->
<tr style="background-color:white;color:black !important;">
<td colspan="4" valign="top" style="background-color: white;color:black;padding:0px;">
<figure>
<a href="https://balsamine.be/saison-20-21/137-fa%C3%A7ons-de-mourir.html">
<img style="float:right;" src="https://balsamine.be/images/img-20-21/newsletter/137-horizon.png"/>
</a>
<figcaption>yepla</figcaption>
</figure>
</td>
</tr>
<tr style="background-color:#e59aff;color:black !important;">
</td>
<td colspan="2" valign="top" style="background-color: #e59aff;color:black;padding:10px;">
<h2 style="color:black">137 façons de mourir</h2>
<h3 style="text-transform: uppercase;
color:black !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>
</td>
<td colspan="2" valign="top" style="background-color: #e59aff;color:black;padding:10px 15px;">
<p class="description" style="margin-top: 0px;color:black !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="">Plus d'infos.</a>
</p>
</td>
<!-- <a class="bouton-reserver" href="">Réserver</a> -->
</tr>
<!-- filet de séparation-->
<tr class="separation-horozontale" style="border:3px solid black;">
</tr>
<!-- spectacle 3 : 2 colonnes texte à droite fond blanc-->
<tr style="background-color:white;color:black !important;">
<td colspan="3" valign="top" style="background-color: white;color:black;padding:0px;">
<figure>
<a href="https://balsamine.be/saison-20-21/137-fa%C3%A7ons-de-mourir.html">
<img style="max-width:420px;" src="https://balsamine.be/images/img-20-21/newsletter/Baindepied2_MargauxFontaine.jpg">
</a>
</figure>
<span class="figcaption" >yepla</span>
</td>
<td colspan="1" valign="top" style="background-color: white;color:black;padding:10px;">
<h2 style="color:black">137 façons de mourir</h2>
<h3 style="text-transform: uppercase;
color:black !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:black !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="">Plus d'infos.</a>
</p>
</td>
<!-- <a class="bouton-reserver" href="">Réserver</a> -->
</tr>
<!-- Nota bene réservation -->
<tr style="background-color:black;color:white">
<!-- 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-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">+32 2 732 96 18 <a href="">info@balsamine.be</a></p>
<p class="contact-info"><a href="http://balsamine.be/">www.balsamine.be</a></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">
</a>
</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">
</a>
</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">
</a>
</li>
<li class="social-link">
<a href="https://lucarne.balsamine.be/">
<img class="logo-social" src="https://balsamine.be/images/img-20-21/newsletter/emoji-peertube.png">
</a>
</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-horizontale" width=""></tr>
<!-- FIN FOOTER -->
</table>
</td>
</tr>
</table>
</body>
</html>