spawntree
/
ihk24


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="de" dir="ltr" xml:lang="de">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <style>
      @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
      html, body {
        padding: 0;
        margin: 0;
        font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
        color: #003366;
        font-size: 18px;
        line-height: 1.4;
      }
      table {
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
      }
      td {
        border: 0;
        padding: 0;
      }
      .outer {
        width: 100%;
        text-align: center;
        overflow: hidden;
      }
      .inner {
        display: block;
        width: 600px;
        max-width: 100%;
      }
      .half {
        max-width: 100%;
      }
      .logo {
        width: 80%;
        display: block;
        margin: 0;
      }
      .copyright {
        position: relative;
        top: -30px;
        color: white;
        margin-bottom: -20px;
        padding-right: 10px;
        text-shadow: 0 0 10px black;
      }
      @media(max-width: 540px) {
        .sm-block {
          display: block;
          width: 100%;
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
        .offset-large {
          height: 40px !important;
        }
        .offset-medium {
          height: 30px !important;
        }
      }
      @media(max-width: 400px) {
        .xs-block {
          display: block;
          max-width: 100%;
        }
        .issue span {
          display: block;
          text-align: left !important;
          padding-top: 12px;
          padding-left: 1px;
        }
        .h1 {
          font-size: 38px !important;
          line-height: 44px !important;
        }
        .h2 {
          font-size: 32px !important;
          line-height: 36px !important;
        }
        .h3 {
          font-size: 24px !important;
          line-height: 28px !important;
        }
        .p {
          font-size: 18px !important;
          line-height: 26px !important;
        }
        .p.title {
          padding-bottom: 6px;
          display: block;
        }
        .social {
          padding-bottom: 16px;
        }
        .social + .xs-block {
          text-align: left !important;
        }
      }
    </style>
  </head>
  <body>
    <table id="header" class="outer" width="100">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td width="300" class="xs-block">
                <img src="img/logo.png" alt="Logo" class="logo">
              </td>
              <td width="300" class="xs-block issue" valign="top" style="padding-top: 6px;">
                <span style="font-size: 14px; line-height: 18px; font-weight: 600; display: block; text-align: right;">IHK Newsletter &middot; Ausgabe 01 &middot; 13.05.2020</span>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>

    <table id="salutation" class="outer" width="100" style="border-top: 1px solid #ccd6e0;">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td height="50" class="offset-large"></td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 20px; line-height: 30px;" class="p">Sehr geehrte Frau Mustermann,<br><br>Sie erhalten unseren Newsletter mit den Meldungen nach den von Ihnen ausgewählten Themen. Wir wünschen Ihnen viel Spaß dabei.<br><br>Mit freundlichen Grüßen <br>Ihr Newsletterteam der IHK Musterstadt</span>
              </td>
            </tr>
            <tr>
              <td height="50" class="offset-large"></td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>

    <table id="title" class="outer" width="100">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td width="600" style="max-width: 100%;">
                <span style="font-size: 48px; line-height: 54px;" class="h1">Newsletter Titel</span>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <span style="position: relative; display: block; height: 8px; width: 300%; background-color: #afcc7a;">
                  <img src="img/trennlinie-verlauf.jpg" alt="Trennlinie" style="margin: 0; display: block; height: 8px; width: 600px; max-width: 100%;" height="8">
                </span>
              </td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>

    <table id="index" class="outer" width="100">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td height="50" class="offset-large"></td>
            </tr>
            <tr>
              <td>
                <table>
                  <tr>
                    <td width="40" height="60" style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <img src="img/anchor.png" width="30" height="30" alt="" style="display: block;">
                    </td>
                    <td style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <a href="#" style="display: block; font-size: 18px; line-height: 22px; text-decoration: underline; color: #003366; padding: 8px 0">Thema 01</a>
                    </td>
                  </tr>
                  <tr>
                    <td width="40" height="60" style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <img src="img/anchor.png" width="30" height="30" alt="" style="display: block;">
                    </td>
                    <td style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <a href="#" style="display: block; font-size: 18px; line-height: 22px; text-decoration: underline; color: #003366; padding: 8px 0">Ein längeres Thema, das vielleicht auch über zwei Zeilen laufen könnte Lorem ipsum dolor</a>
                    </td>
                  </tr>
                  <tr>
                    <td width="40" height="60" style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <img src="img/anchor.png" width="30" height="30" alt="" style="display: block;">
                    </td>
                    <td style="border-bottom: 1px solid #ccd6e0; border-top: 1px solid #ccd6e0;">
                      <a href="#" style="display: block; font-size: 18px; line-height: 22px; text-decoration: underline; color: #003366; padding: 8px 0">Thema 3 ist etwas länger</a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>

    <table id="news" class="outer" width="100">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td height="40" class="offset-medium"></td>
            </tr>
            <tr>
              <td width="600" style="border-bottom: 4px solid #56BD66; max-width: 100%;">
                <span style="display: block; font-size: 42px; line-height: 48px; padding-bottom: 10px;" class="h2">Thema 01</span>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <!-- Start: News volle Breite -->
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <span class="dachzeile" style="display: block; text-transform: uppercase; font-size: 16px; line-height: 20px;">Dachzeile</span>
              </td>
            </tr>
            <tr>
              <td height="10"></td>
            </tr>
            <!-- if image -->
            <tr>
              <td>
                <a href="#" class="image-box" style="display: block; border-bottom: 8px solid #56BD66;">
                  <img src="img/dummy-teaser.jpg" alt="" style="display: block; margin: 0; max-width: 100%; width: 100%;">
                </a>
                <span class="copyright" style="font-size: 14px; display: block; text-align: right;">Copyright by Björn Crüger</span>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <!-- endif image -->
            <tr>
              <td>
                <a href="#" style="display: block; font-size: 34px; line-height: 42px; color: #003366; text-decoration: underline;" class="h3">Was die Branche bewegt</a>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 20px; line-height: 30px; margin-right: 8px;" class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </span><a href="#" style="font-size: 20px; line-height: 30px; color: #003366; text-decoration: underline;" class="p">Weiterlesen</a>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <!-- Ende: News volle Breite -->
            <!-- Start: News volle Breite -->
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <span class="dachzeile" style="display: block; text-transform: uppercase; font-size: 16px; line-height: 20px;">Dachzeile</span>
              </td>
            </tr>
            <tr>
              <td height="10"></td>
            </tr>
            <tr>
              <td>
                <a href="#" style="display: block; font-size: 34px; line-height: 42px; color: #003366; text-decoration: underline;" class="h3">Was die Branche bewegt</a>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 20px; line-height: 30px; margin-right: 8px;" class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </span><a href="#" style="font-size: 20px; line-height: 30px; color: #003366; text-decoration: underline;" class="p">Weiterlesen</a>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <!-- Ende: News volle Breite -->
            <tr>
              <td height="40" class="offset-medium"></td>
            </tr>
            <tr>
              <td width="600" style="border-bottom: 4px solid #56BD66; max-width: 100%;">
                <span style="display: block; font-size: 42px; line-height: 48px; padding-bottom: 10px;" class="h2">Ein längeres Thema, das über zwei Zeilen läuft</span>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <!-- Start: Erste News halbe Breite -->
            <tr>
              <td>
                <table>
                  <tr>
                    <td width="300" style="padding-right: 15px;" class="col-left sm-block">
                      <table>
                        <tr>
                          <td height="20"></td>
                        </tr>
                        <tr>
                          <td>
                            <span class="dachzeile" style="display: block; text-transform: uppercase; font-size: 16px; line-height: 20px;">Dachzeile</span>
                          </td>
                        </tr>
                        <tr>
                          <td height="10"></td>
                        </tr>
                        <tr>
                          <td>
                            <a href="#" style="display: block; font-size: 28px; line-height: 32px; color: #003366; text-decoration: underline;" class="h3">Was die Branche bewegt</a>
                          </td>
                        </tr>
                        <tr>
                          <td height="20"></td>
                        </tr>
                        <tr>
                          <td>
                            <span style="font-size: 18px; line-height: 26px; margin-right: 8px;" class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </span><a href="#" style="font-size: 18px; line-height: 26px; color: #003366; text-decoration: underline;" class="p">Weiterlesen</a>
                          </td>
                        </tr>
                        <tr>
                          <td height="20"></td>
                        </tr>
                      </table>
                    </td>
            <!-- Ende: Erste News halbe Breite -->
            <!-- Start: Zweite News halbe Breite -->
                    <td width="300" style="padding-left: 15px;" class="col-right sm-block">
                      <table>
                        <tr>
                          <td height="20"></td>
                        </tr>
                        <tr>
                          <td>
                            <span class="dachzeile" style="display: block; text-transform: uppercase; font-size: 16px; line-height: 20px;">Dachzeile</span>
                          </td>
                        </tr>
                        <tr>
                          <td height="10"></td>
                        </tr>
                        <tr>
                          <td>
                            <a href="#" style="display: block; font-size: 28px; line-height: 32px; color: #003366; text-decoration: underline;" class="h3">Was die Branche bewegt</a>
                          </td>
                        </tr>
                        <tr>
                          <td height="20"></td>
                        </tr>
                        <tr>
                          <td>
                            <span style="font-size: 18px; line-height: 26px; margin-right: 8px;" class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </span><a href="#" style="font-size: 18px; line-height: 26px; color: #003366; text-decoration: underline;" class="p">Weiterlesen</a>
                          </td>
                        </tr>
                        <tr>
                          <td height="20"></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <!-- Ende: Zweite News halbe Breite -->
            <tr>
              <td height="80" class="offset-large"></td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>

    <table id="footer" class="outer" width="100" bgcolor="#e3ebf5" style="background-color: #e3ebf5; border-bottom: 8px solid #003366;">
      <tr>
        <td width="15"></td>
        <td align="center">
          <table class="inner" width="600">
            <tr>
              <td height="40" class="offset-medium"></td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 38px;" class="h2">Impressum</span>
              </td>
            </tr>
            <tr>
              <td height="25"></td>
            </tr>
            <tr>
              <td>
                <table>
                  <tr>
                    <td width="240" valign="top" class="sm-block">
                      <span style="font-weight: 600; font-size: 20px; line-height: 30px;" class="p title">Herausgeber</span>
                    </td>
                    <td width="360" valign="top" class="sm-block">
                      <span style="font-size: 20px; line-height: 30px;" class="p">IHK Musterstadt <br>Musterstraße 12 – 18 <br>123456 Musterstadt</span>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <table>
                  <tr>
                    <td width="240" valign="top" class="sm-block">
                      <span style="font-weight: 600; font-size: 20px; line-height: 30px;" class="p title">Redaktion &amp; Inhalt</span>
                    </td>
                    <td width="360" valign="top" class="sm-block">
                      <img src="img/redesign-mail.png" width="30" height="30" style="display: inline-block; vertical-align: middle; margin-right: 7px; margin-bottom: 6px;">
                      <a href="#" style="font-size: 20px; line-height: 30px; color: #003366; text-decoration: underline; display: inline-block; vertical-align: middle; margin-bottom: 6px;" class="p">E-Mail schreiben</a> <br>
                      <img src="img/redesign-phone.png" width="30" height="30" style="display: inline-block; vertical-align: middle; margin-right: 7px; margin-bottom: 6px;">
                      <a href="#" style="font-size: 20px; line-height: 30px; color: #003366; text-decoration: underline; display: inline-block; vertical-align: middle; margin-bottom: 6px;" class="p">+49 12 345678-90</a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td height="20"></td>
            </tr>
            <tr>
              <td>
                <table>
                  <tr>
                    <td width="240" valign="top" class="sm-block">
                      <span style="font-weight: 600; font-size: 20px; line-height: 30px;" class="p title">Vertretungsberechtigte</span>
                    </td>
                    <td width="360" valign="top" class="sm-block">
                      <span style="font-size: 20px; line-height: 30px;" class="p">IHK Musterstadt <br>Musterstraße 12 – 18 <br>123456 Musterstadt</span>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td height="30"></td>
            </tr>
            <tr>
              <td>
                <table width="100%">
                  <tr>
                    <td width="240" class="xs-block social">
                      <a href="https://www.facebook.com/#" class="fb" target="_blank" title="Facebook" style="text-decoration: none;">
                        <img src="img/redesign-facebook.png" alt="Facebook" width="50" height="50" border="0" />
                      </a>&nbsp;
                      <a href="https://www.youtube.com/user/#" class="yt" target="_blank" title="Youtube" style="text-decoration: none;">
                        <img src="img/redesign-youtube.png" alt="Youtube" width="50" height="50" border="0" />
                      </a>&nbsp;
                      <a href="https://twitter.com/#" class="tw" target="_blank" title="Twitter" style="text-decoration: none;">
                        <img src="img/redesign-twitter.png" alt="Twitter" width="50" height="50" border="0" />
                      </a>
                    </td>
                    <td width="360" valign="bottom" align="right" style="padding-bottom: 3px;" class="xs-block">
                      <a href="#" style="display: inline-block; color: #003366; text-decoration: underline;">Themen ändern</a>
                      <a href="#" style="display: inline-block; color: #003366; text-decoration: underline; margin-left: 15px;">Newsletter abbestellen</a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td height="30" style="border-bottom: 1px solid #B0C4D6"></td>
            </tr>
            <tr>
              <td height="30" style="border-top: 1px solid #B0C4D6"></td>
            </tr>
            <tr>
              <td>
                <span style="font-size: 18px; line-height: 24px;">Sie erhalten diesen Newsletter, weil Sie sich mit der E-Mail-Adresse nosuchuser@darmstadt.ihk.de auf unserer Website angemeldet haben.<br><br>Copyright 2020 © Industrie- und Handelskammer Darmstadt<br><br>Für die Richtigkeit der in diesem Newsletter enthaltenen Angaben können wir trotz sorgfältiger Prüfung keine Gewähr übernehmen.</span>
              </td>
            </tr>
            <tr>
              <td height="40"></td>
            </tr>
          </table>
        </td>
        <td width="15"></td>
      </tr>
    </table>
  </body>
</html>