GET Nord: Mail im Aufbau der Mailjet-Mails, im Mediakit

Grauer Grund, Logo, weiße Karte mit Rand, Banner oben, Innenabstand und
Fuß wie K3. Liegt jetzt in E-Mails/mails/getnord.html, mit Vorschau,
Banner und eigener Seite im Mediakit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
dejanandClaude Opus 5.5 committed 2026-11-13 17:22:38 +01:00
1 parent f59613d524
commit f36fcbf888
6 files changed
+132 -111

No files matched your search

+4 -2
View File
@@ -86,8 +86,8 @@
</div>
<div class="fakten">
<div><span class="label">Mailjet</span><b>14 Mails</b><span class="klein">K1 bis K4, K7 bis K11, B4a bis B6</span></div>
<div><span class="label">WebinarGeek</span><b>4 Mails</b><span class="klein">B0 bis B3, macht Dejan</span></div>
<div><span class="label">Bilder</span><b>21 Dateien</b><span class="klein">18 Banner, Logo, Signatur, Heft</span></div>
<div><span class="label">WebinarGeek und von Hand</span><b>5 Mails</b><span class="klein">B0 bis B3 (Dejan), GET Nord (Haris)</span></div>
<div><span class="label">Bilder</span><b>24 Dateien</b><span class="klein">19 Banner, Logos, 2 Signaturen, Heft</span></div>
</div>
</section>
@@ -215,6 +215,7 @@
<figure><img src="bilder/webinargeek/b0-du-bist-dabei.jpg" alt=""><figcaption><b>B0 · WebinarGeek</b> · <code>b0-du-bist-dabei.jpg</code><br>Alt: Dein Platz ist sicher: Du bist dabei. Dienstag, 8. Dezember, 18 Uhr.</figcaption></figure>
<figure><img src="bilder/webinargeek/b1-morgen-abend-18-uhr.jpg" alt=""><figcaption><b>B1 · WebinarGeek</b> · <code>b1-morgen-abend-18-uhr.jpg</code><br>Alt: Erinnerung: Morgen Abend, 18 Uhr.</figcaption></figure>
<figure><img src="bilder/webinargeek/b2-heute-abend-18-uhr.jpg" alt=""><figcaption><b>B2 · WebinarGeek</b> · <code>b2-heute-abend-18-uhr.jpg</code><br>Alt: Heute ist es so weit: Heute Abend, 18 Uhr.</figcaption></figure>
<figure><img src="bilder/banner/getnord-triff-uns-auf-der-messe.jpg" alt=""><figcaption><b>GET Nord · von Hand</b> · <code>getnord-triff-uns-auf-der-messe.jpg</code><br>Alt: Triff uns auf der GET Nord: 19. bis 21. November in Hamburg, Halle B1, Erdgeschoss, Stand 103.22.</figcaption></figure>
<figure><img src="bilder/webinargeek/b3-in-einer-stunde.jpg" alt=""><figcaption><b>B3 · WebinarGeek</b> · <code>b3-in-einer-stunde.jpg</code><br>Alt: Gleich geht's los: In einer Stunde.</figcaption></figure>
</div>
</section>
@@ -250,6 +251,7 @@ const MAILS = [
["b1", "B1 · Morgen Abend, 18 Uhr", "WebinarGeek · 24 Std. vorher"],
["b2", "B2 · Heute Abend, 18 Uhr", "WebinarGeek · 9 Std. vorher"],
["b3", "B3 · In einer Stunde", "WebinarGeek · 1 Std. vorher"],
["getnord", "GET Nord · Kommst du zur GET Nord?", "Haris, von Hand · vor dem 19.11."],
];
document.getElementById("uebersicht").innerHTML = MAILS.map(([id, name, an]) =>
`<figure><img src="mails/vorschau/${id}.png" alt=""><figcaption><b>${name}</b>${an}<br><code>mails/${id}.html</code></figcaption></figure>`).join("");
Binary file not shown.
+1 -1
View File
@@ -176,7 +176,7 @@ Betreff und Vorschautext stehen oben in jeder Datei im Kommentar und im PDF. K5
Nicht über Mailjet, sondern von Hand aus dem Postfach des Vertriebs, an einzelne Leads.
- **Gestaltet:** `manuell/getnord.html` im Browser öffnen, alles markieren (Cmd+A), kopieren, in eine neue Mail einfügen. `[Vorname]` ersetzen. Absender ist Haris, seine Signatur (`bilder/signatur-haris.png`) ist schon drin. Apple Mail und Outlook am Rechner betten das Banner dabei ein. In Webmail fehlt es, solange es keine öffentliche Bildadresse gibt.
- **Gestaltet:** `mails/getnord.html` im Browser öffnen, alles markieren (Cmd+A), kopieren, in eine neue Mail einfügen. `[Vorname]` ersetzen. Absender ist Haris, seine Signatur (`bilder/signatur-haris.png`) ist schon drin. Apple Mail und Outlook am Rechner betten das Banner dabei ein. In Webmail fehlt es, solange es keine öffentliche Bildadresse gibt.
- **Nur Text:** `manuell/getnord.txt`, falls das Einfügen nicht sauber klappt. Das Banner (`bilder/banner/getnord-triff-uns-auf-der-messe.jpg`) dann als Bild einfügen.
- **Betreff:** „Kommst du zur GET Nord? Halle B1, Stand 103.22“
- **GET Nord:** 19. bis 21. November 2026, Messe Hamburg, Do und Fr 9 bis 18 Uhr, Sa 9 bis 16 Uhr. Halle B1, Erdgeschoss, Stand 103.22.
+127
View File
@@ -0,0 +1,127 @@
<!doctype html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light">
<title>GET Nord · Kommst du zur GET Nord?</title>
<!--
Einladung zur GET Nord. Verschickt Haris von Hand aus seinem Postfach an
einzelne Leads, nicht über Mailjet. Aufbau wie die Muster-Mail k03.html.
Betreff: Kommst du zur GET Nord? Halle B1, Stand 103.22
Vorschautext: Vom 19. bis 21. November in Hamburg. Komm vorbei, auf einen Kaffee und einen Blick auf deine Abläufe.
Von: Haris Sejmen, vor dem 19.11.
So geht's: Datei im Browser öffnen, alles markieren (Cmd+A), kopieren, in
eine neue Mail einfügen, [Vorname] ersetzen. Bilder liegen in ../bilder/.
Textfassung ohne Gestaltung: ../manuell/getnord.txt
-->
<style>
body { margin: 0; padding: 0; background: #F4F3EF; }
a { color: #8A6800; }
@media (max-width: 620px) {
.karte { width: 100% !important; border-radius: 0 !important; }
.rand { padding-left: 22px !important; padding-right: 22px !important; }
.spalte { display: block !important; width: 100% !important; padding: 0 0 12px 0 !important; }
.text { font-size: 17px !important; }
}
</style>
</head>
<body style="margin:0;padding:0;background:#F4F3EF;">
<!-- BAUSTEIN: Vorschautext -->
<div style="display:none;max-height:0;overflow:hidden;opacity:0;">Vom 19. bis 21. November in Hamburg. Komm vorbei, auf einen Kaffee und einen Blick auf deine Abläufe.&#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#F4F3EF;">
<tr><td align="center" style="padding:28px 12px 40px;">
<!-- BAUSTEIN: Kopf (Logo über der Karte) -->
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" class="karte" style="width:600px;">
<tr><td align="center" style="padding:0 0 20px;">
<img src="../bilder/logo-hivegrid.png" width="152" height="40" alt="HiveGrid" style="display:block;border:0;width:152px;height:40px;">
</td></tr>
</table>
<!-- Karte -->
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" class="karte" style="width:600px;background:#FFFFFF;border:1px solid #E4E1D8;border-radius:14px;overflow:hidden;">
<!-- BAUSTEIN: Banner -->
<tr><td style="padding:0;">
<img src="../bilder/banner/getnord-triff-uns-auf-der-messe.jpg" width="600" alt="Triff uns auf der GET Nord: 19. bis 21. November in Hamburg, Halle B1, Erdgeschoss, Stand 103.22." style="display:block;border:0;width:100%;max-width:600px;height:auto;">
</td></tr>
<!-- BAUSTEIN: Terminleiste (Abstand oben, weil das Banner dunkel ist) -->
<tr><td class="rand" style="padding:22px 40px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-bottom:1px solid #ECEAE3;">
<tr>
<td class="spalte" width="36%" valign="top" style="padding:14px 10px 14px 0;font-family:Arial,Helvetica,sans-serif;">
<div style="font-size:11px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase;color:#8A6800;">Wann</div>
<div style="font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:bold;color:#1A1A1A;padding-top:4px;">19. bis 21. November</div>
<div style="font-size:12px;color:#6B6B66;padding-top:3px;">Do und Fr 9 bis 18 Uhr<br>Sa 9 bis 16 Uhr</div>
</td>
<td class="spalte" width="38%" valign="top" style="padding:14px 10px;font-family:Arial,Helvetica,sans-serif;">
<div style="font-size:11px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase;color:#8A6800;">Wo</div>
<div style="font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:bold;color:#1A1A1A;padding-top:4px;">Messe Hamburg</div>
<div style="font-size:12px;color:#6B6B66;padding-top:3px;">Halle B1, Erdgeschoss</div>
</td>
<td class="spalte" width="26%" valign="top" style="padding:14px 0 14px 10px;font-family:Arial,Helvetica,sans-serif;">
<div style="font-size:11px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase;color:#8A6800;">Stand</div>
<div style="font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:bold;color:#1A1A1A;padding-top:4px;">103.22</div>
<div style="font-size:12px;color:#6B6B66;padding-top:3px;">neben BrickUp</div>
</td>
</tr>
</table>
</td></tr>
<!-- BAUSTEIN: Text -->
<tr><td class="rand text" style="padding:30px 40px 0;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.65;color:#1A1A1A;">
<p style="margin:0 0 18px;">Moin [Vorname],</p>
<p style="margin:0 0 18px;">vom 19. bis 21. November sind wir mit HiveGrid auf der GET Nord in Hamburg, und ich würde mich freuen, dich dort zu sehen.</p>
<p style="margin:0 0 18px;">Kurz, wer wir sind: HiveGrid ist in einem SHK-Betrieb entstanden, bei der Geerkens GmbH in Rheinberg. Die Software legt sich um dein Branchenprogramm und verbindet, was im Büro sonst nebeneinander herläuft: Anfragen, Angebote, Termine und Absprachen.</p>
</td></tr>
<!-- BAUSTEIN: Zitat -->
<tr><td class="rand" style="padding:4px 40px 22px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td style="padding:0;font-family:Georgia,'Times New Roman',serif;font-size:20px;line-height:1.45;font-style:italic;color:#1A1A1A;">Wir ersetzen nichts. Wir machen die Abläufe besser, die bei dir heute schon laufen.</td>
</tr></table>
</td></tr>
<tr><td class="rand text" style="padding:0 40px;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.65;color:#1A1A1A;">
<p style="margin:0 0 18px;">Am Stand zeige ich dir das gern direkt am Bildschirm. Oder wir trinken einen Kaffee und reden darüber, wie es bei dir im Büro läuft.</p>
<p style="margin:0 0 18px;">Schreib mir kurz, wann du da bist, dann nehme ich mir Zeit für dich.</p>
</td></tr>
<!-- BAUSTEIN: Gruß und Signatur -->
<tr><td class="rand text" style="padding:0 40px;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.65;color:#1A1A1A;">
<p style="margin:0 0 12px;">Gruß Haris</p>
</td></tr>
<tr><td class="rand" style="padding:0 40px 24px;">
<img src="../bilder/signatur-haris.png" width="360" height="88" alt="Haris Sejmen, Vertrieb, HiveGrid" style="display:block;border:0;width:360px;max-width:100%;height:auto;">
</td></tr>
<!-- BAUSTEIN: PS -->
<tr><td class="rand" style="padding:0 40px 34px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td style="border-top:1px solid #ECEAE3;padding-top:18px;font-family:Georgia,'Times New Roman',serif;font-size:16px;line-height:1.6;color:#3A3A37;">
<b style="color:#1A1A1A;">PS:</b> Du findest uns in Halle B1 im Erdgeschoss, Stand 103.22, direkt neben BrickUp.
</td>
</tr></table>
</td></tr>
</table>
<!-- BAUSTEIN: Fuß (außerhalb der Karte). Kein Abmelde-Link, die Mail geht persönlich raus. -->
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" class="karte" style="width:600px;">
<tr><td class="rand" align="center" style="padding:26px 30px 0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.7;color:#6B6B66;">
<a href="https://hivegrid.de" style="color:#6B6B66;text-decoration:underline;">hivegrid.de</a> &nbsp;·&nbsp;
<a href="https://hivegrid.de/datenschutz" style="color:#6B6B66;text-decoration:underline;">Datenschutz</a><br>
HiveGrid GmbH i. G. · Xantener Straße 235a · 47495 Rheinberg
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 283 KiB

-108
View File
@@ -1,108 +0,0 @@
<!doctype html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light">
<title>GET Nord · Triff uns in Halle B1, Stand 103.22</title>
<!--
Einladung zur GET Nord, verschickt von Hand aus dem Postfach des Vertriebs,
nicht über Mailjet. Gleicher Look wie die Mail-Strecke, aber ohne Logo-Kopf
und Newsletter-Fuß. Absender und Signatur: Haris.
Betreff: Kommst du zur GET Nord? Halle B1, Stand 103.22
Vorschautext: Vom 19. bis 21. November in Hamburg. Komm vorbei, auf einen Kaffee und einen Blick auf deine Abläufe.
So geht's: Datei im Browser öffnen, alles markieren (Cmd+A), kopieren,
in eine neue Mail einfügen. [Vorname] ersetzen.
Das Banner ist eine lokale Datei. Apple Mail und Outlook am Rechner betten
es beim Einfügen ein. Für Webmail braucht es eine öffentliche Bildadresse,
dann hier im src eintragen.
-->
<style>
body { margin: 0; padding: 0; background: #FFFFFF; }
@media (max-width: 620px) {
.karte { width: 100% !important; }
.rand { padding-left: 18px !important; padding-right: 18px !important; }
.spalte { display: block !important; width: 100% !important; padding: 0 0 12px 0 !important; }
}
</style>
</head>
<body style="margin:0;padding:0;background:#FFFFFF;">
<div style="display:none;max-height:0;overflow:hidden;opacity:0;">Vom 19. bis 21. November in Hamburg. Komm vorbei, auf einen Kaffee und einen Blick auf deine Abläufe.</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#FFFFFF;">
<tr><td align="left" style="padding:8px 0 24px;">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" class="karte" style="width:600px;background:#FFFFFF;">
<!-- Banner -->
<tr><td style="padding:0 0 6px;">
<img src="../bilder/banner/getnord-triff-uns-auf-der-messe.jpg" width="600" alt="Triff uns auf der GET Nord: 19. bis 21. November in Hamburg, Halle B1, Erdgeschoss, Stand 103.22." style="display:block;border:0;width:100%;max-width:600px;height:auto;border-radius:10px;">
</td></tr>
<!-- Terminleiste -->
<tr><td style="padding:10px 0 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-bottom:1px solid #ECEAE3;">
<tr>
<td class="spalte" width="34%" valign="top" style="padding:12px 10px 12px 0;font-family:Arial,Helvetica,sans-serif;">
<div style="font-size:11px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase;color:#8A6800;">Wann</div>
<div style="font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:bold;color:#1A1A1A;padding-top:4px;">19. bis 21. November</div>
<div style="font-size:12px;color:#6B6B66;padding-top:2px;">Do und Fr 9 bis 18 Uhr, Sa 9 bis 16 Uhr</div>
</td>
<td class="spalte" width="40%" valign="top" style="padding:12px 10px;font-family:Arial,Helvetica,sans-serif;">
<div style="font-size:11px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase;color:#8A6800;">Wo</div>
<div style="font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:bold;color:#1A1A1A;padding-top:4px;">Messe Hamburg, Halle B1</div>
<div style="font-size:12px;color:#6B6B66;padding-top:2px;">Erdgeschoss</div>
</td>
<td class="spalte" width="26%" valign="top" style="padding:12px 0 12px 10px;font-family:Arial,Helvetica,sans-serif;">
<div style="font-size:11px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase;color:#8A6800;">Stand</div>
<div style="font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:bold;color:#1A1A1A;padding-top:4px;">103.22</div>
<div style="font-size:12px;color:#6B6B66;padding-top:2px;">neben BrickUp</div>
</td>
</tr>
</table>
</td></tr>
<!-- Anrede -->
<tr><td class="rand" style="padding:24px 0 0;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.65;color:#1A1A1A;">
<p style="margin:0 0 18px;">Moin [Vorname],</p>
<p style="margin:0 0 18px;">vom 19. bis 21. November sind wir mit HiveGrid auf der GET Nord in Hamburg, und ich würde mich freuen, dich dort zu sehen.</p>
</td></tr>
<!-- Text -->
<tr><td class="rand" style="padding:0;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.65;color:#1A1A1A;">
<p style="margin:0 0 18px;">Kurz, wer wir sind: HiveGrid ist in einem SHK-Betrieb entstanden, bei der Geerkens GmbH in Rheinberg. Die Software legt sich um dein Branchenprogramm und verbindet, was im Büro sonst nebeneinander herläuft: Anfragen, Angebote, Termine und Absprachen.</p>
</td></tr>
<!-- Zitat -->
<tr><td class="rand" style="padding:0 0 18px;font-family:Georgia,'Times New Roman',serif;font-size:20px;line-height:1.45;font-style:italic;color:#1A1A1A;">
Wir ersetzen nichts. Wir machen die Abläufe besser, die bei dir heute schon laufen.
</td></tr>
<tr><td class="rand" style="padding:0;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.65;color:#1A1A1A;">
<p style="margin:0 0 18px;">Am Stand zeige ich dir das gern direkt am Bildschirm. Oder wir trinken einen Kaffee und reden darüber, wie es bei dir im Büro läuft.</p>
<p style="margin:0 0 18px;">Schreib mir kurz, wann du da bist, dann nehme ich mir Zeit für dich.</p>
<p style="margin:0 0 12px;">Gruß Haris</p>
</td></tr>
<!-- Signatur -->
<tr><td class="rand" style="padding:0 0 22px;">
<img src="../bilder/signatur-haris.png" width="360" height="88" alt="Haris Sejmen, Vertrieb, HiveGrid" style="display:block;border:0;width:360px;max-width:100%;height:auto;">
</td></tr>
<!-- PS -->
<tr><td class="rand" style="padding:0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td style="border-top:1px solid #ECEAE3;padding-top:16px;font-family:Georgia,'Times New Roman',serif;font-size:16px;line-height:1.6;color:#3A3A37;">
<b style="color:#1A1A1A;">PS:</b> Du findest uns in Halle B1 im Erdgeschoss, Stand 103.22, direkt neben BrickUp.
</td>
</tr></table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>