html выравнивание заголовка таблицы шаблона электронной почты - PullRequest
0 голосов
/ 05 марта 2020

Мне нужно переместить два выравнивания заголовка влево и вправо, lo go будет плавающим влево и навигация будет направо, но по вертикали в центре

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--Fix Outlook Scaling-->
  <!--[if gte mso 9]>
  <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
  </xml>
  <![endif]-->
  <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
  <title></title>
  <!--[if mso]>
  <style type="text/css">
    body, table, td {
      font-family: Arial, Helvetica, sans-serif !important;
    }
  </style>
  <![endif]-->
  <style type="text/css">
    html,
    body {
      font-family: 'Nunito Sans', Helvetica, Arial;
      margin: 0 !important;
      padding: 0 !important;
      text-size-adjust: none !important;
      -ms-text-size-adjust: none !important;
      -webkit-text-size-adjust: none !important;
      -webkit-font-smoothing: antialiased;
      background-color: #EEEEEE;
      font-size: 16px;
    }
    
    body {
      height: 100% !important;
      width: 100% !important;
    }
    
    a {
      text-decoration: none;
      color: #002173;
    }
    
    h1 {
      font-family: 'Nunito Sans', Helvetica, Arial;
    }
    
    .cus-pad {
      padding-left: 20px;
      padding-right: 20px;
    }
    
    .ReadMsgBody {
      width: 100%;
    }
    
    .ExternalClass {
      width: 100%;
    }
    
    .ExternalClass,
    .ExternalClass span,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    }
    
    #outlook a {
      padding: 0;
    }
    
    table,
    td {
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
    
    body {
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
    }
    
    img {
      -ms-interpolation-mode: bicubic;
    }
    
    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
    }
    /*no linky*/
    
    a[x-apple-data-detectors] {
      color: inherit !important;
      text-decoration: none !important;
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
    }
    
    .link-hover:hover {
      text-decoration: none !important;
    }
    
    table {
      border-collapse: collapse;
      margin: 0 auto;
      padding: 20px;
    }
    
    .button:hover {
      background-color: #ffd251 !important;
    }
    
    .button-2:hover {
      background-color: #777671 !important;
    }
    
    tr.social-link td a img {
      height: 20px;
      width: auto;
    }
    
    @media only screen and (max-width: 481px) {
      /**generic styles for content added through editor**/
      table {
        width: auto !important;
      }
      td {
        display: block;
        margin: 0 auto;
        width: auto !important;
      }
      /**all tds added to template will wrap!**/
      img {
        float: none !important;
        display: block;
        padding: 0;
        max-width: 100%;
        height: auto !important;
      }
      /****/
      .container {
        padding: 0 !important;
      }
      .no-wrap {
        width: 100% !important;
      }
      table.no-wrap td {
        /**add class no-wrap to table to keep it from wrapping**/
        display: table-cell !important;
      }
      table[class="resp"] {
        width: auto !important;
        padding: 5px !important;
      }
      .main-content-area {
        -webkit-text-size-adjust: 90% !important;
        line-height: 21px;
        text-align: left;
      }
      .promo-code {
        padding: 20px !important;
      }
      td[class="main-content-area"] h2 {
        -webkit-text-size-adjust: 80% !important;
      }
      td[class="force-col"] {
        /**add this class to any td you'd like to wrap in a one-column layout**/
        display: block;
        margin: 0 auto;
        width: auto !important;
        padding: 0;
      }
      img {
        max-width: 100% !important;
        height: auto !important;
      }
      /**hide content**/
      *[class="hide-me"] {
        display: none !important;
      }
      img[class="show-img"] {
        display: block !important;
        padding-top: 10px;
        max-height: none !important;
        width: auto !important;
        height: auto !important;
      }
    }
    
    .gf-e-header td a {
      text-transform: uppercase;
      font-weight: bold;
      font-size: 14px;
    }
  </style>
</head>

<body style="background-color: #eeeeee;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
    <tr>
      <td class="container" style="" width="100%">
        <table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
          <tbody>
            <tr>
              <td class="cus-pad" style="padding-top: 20px">
                <table align="left">
                  <tr class="gf-e-header">
                    <td class="gf-e-header">
                      <div style="float: left">
                        <a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
                          <img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
                        </a>
                      </div>

                    </td>

                    <td valign="middle" align="right">
                      <a href="">Company</a>
                      <a href="">Services</a>
                      <a href="">Locations</a>
                      <a href="">Resources</a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <tr>
              <td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
                <div style="border:1px solid #002173"></div>
              </td>
            </tr>


            <tr>
              <td class="cus-pad">
                <h1 style="color:#002173">General information</h1>
                <p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
                  For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
              </td>
            </tr>

            <tr>
              <td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
                <img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
              </td>
            </tr>

            <tr>
              <td class="cus-pad">
                <h1 style="color:#002173">Data recording on our website</h1>
                <h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
                </h4>
              </td>
            </tr>

            <tr>
              <td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
              </td>
            </tr>
            <tr>
              <td align="center" style="padding-bottom: 50px;padding-top:10px;">
                <div>
                  <!--[if mso]>
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
                      href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
                      fillcolor="#70002c">
                <w:anchorlock/>
                <center>
              <![endif]-->
                  <a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
                More</a>
                  <!--[if mso]>
              </center>
              </v:rect>
              <![endif]-->
                </div>
              </td>
            </tr>

            <tr>
              <td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
                <div style="border:1px solid #002173;"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td align="center" style="padding: 0">
        <table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
          <tbody>

            <tr>
              <td align="right" style="padding: 0 0 0px 15px;">
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" style="padding: 0 0 30px 0;">
                        <a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
                          <img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
                        </a>

                      </td>
                    </tr>
                    <tr class="social-link">
                      <td align="center" style="padding-bottom: 30px;">
                        <a style="margin-right: 10px;" href="">
                          <img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
                        </a>
                        <a style="margin-right: 10px;" href="">
                          <img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
                        </a>
                        <a style="margin-right: 10px;" href="">
                          <img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
                        </a>
                        <a href="">
                          <img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
                        </a>
                      </td>
                    </tr>

                    <tr>
                      <td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
                        <a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
                        <a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
                    services</a>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table align="center" border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr align="center">
                      <td style="padding-bottom: 30px;font-size: 10px">
                        This email was sent to <a href="">example@gmail.com</a> <br/> © 2004-2020 All rights reserved - Global Fairways®

                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>


  </table>
  <br clear="all" />


</body>

</html>

А реагирующие ссылки будут go отключаться после lo go.

Ответы [ 4 ]

1 голос
/ 05 марта 2020

Ваш заголовок в настоящее время не занимает всю ширину письма, поэтому сначала добавьте width:100%; к этому элементу. Затем просто добавьте либо text-align:right;, либо просто align="right" в раздел навигации. Смотрите ниже:

<table align="left" style="width: 100%;">
  <tbody>
    <tr class="gf-e-header">
      <td class="gf-e-header">
        <a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&amp;emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
          <img border="0" src="https://i.imgur.com/rczT2MV.png" width="130">
        </a>
      </td>

      <td style="text-align: right;">
        <a href="">Company</a>
        <a href="">Services</a>
        <a href="">Locations</a>
        <a href="">Resources</a>
      </td>
    </tr>
  </tbody>
</table>

JSFiddle

1 голос
/ 05 марта 2020

Прежде всего, вы довольно испортили код, я его отфильтровал. Я исправил вашу проблему, используя display:grid; для заголовка lo go и контейнера nav и предоставив им оба значения 1fr, чтобы они могли занимать пространство равномерно,

 body {
      font-family: 'Nunito Sans', Helvetica, Arial;
      margin: 0 !important;
      padding: 0 !important;
      text-size-adjust: none !important;
      -ms-text-size-adjust: none !important;
      -webkit-text-size-adjust: none !important;
      -webkit-font-smoothing: antialiased;
      background-color: #EEEEEE;
      font-size: 16px;
    }
    
    body {
      height: 100% !important;
      width: 100% !important;
    }
    
    a {
      text-decoration: none;
      color: #002173;
    }
    
    h1 {
      font-family: 'Nunito Sans', Helvetica, Arial;
    }
    
    .cus-pad {
      padding-left: 20px;
      padding-right: 20px;
    }
    
    .ReadMsgBody {
      width: 100%;
    }
    
    .ExternalClass {
      width: 100%;
    }
    
    .ExternalClass,
    .ExternalClass span,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    }
    
    #outlook a {
      padding: 0;
    }
    
    table,
    td {
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
    
    body {
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
    }
    
    img {
      -ms-interpolation-mode: bicubic;
    }
    
    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
    }
    /*no linky*/
    
    a[x-apple-data-detectors] {
      color: inherit !important;
      text-decoration: none !important;
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
    }
    
    .link-hover:hover {
      text-decoration: none !important;
    }
    
    table {
      border-collapse: collapse;
      margin: 0 auto;
      padding: 20px;
    }
    
    .button:hover {
      background-color: #ffd251 !important;
    }
    
    .button-2:hover {
      background-color: #777671 !important;
    }
    
    tr.social-link td a img {
      height: 20px;
      width: auto;
    }
    
    @media only screen and (max-width: 481px) {
      /**generic styles for content added through editor**/
      table {
        width: auto !important;
      }
      td {
        display: block;
        margin: 0 auto;
        width: auto !important;
      }
      /**all tds added to template will wrap!**/
      img {
        float: none !important;
        display: block;
        padding: 0;
        max-width: 100%;
        height: auto !important;
      }
      /****/
      .container {
        padding: 0 !important;
      }
      .no-wrap {
        width: 100% !important;
      }
      table.no-wrap td {
        /**add class no-wrap to table to keep it from wrapping**/
        display: table-cell !important;
      }
      table[class="resp"] {
        width: auto !important;
        padding: 5px !important;
      }
      .main-content-area {
        -webkit-text-size-adjust: 90% !important;
        line-height: 21px;
        text-align: left;
      }
      .promo-code {
        padding: 20px !important;
      }
      td[class="main-content-area"] h2 {
        -webkit-text-size-adjust: 80% !important;
      }
      td[class="force-col"] {
        /**add this class to any td you'd like to wrap in a one-column layout**/
        display: block;
        margin: 0 auto;
        width: auto !important;
        padding: 0;
      }
      img {
        max-width: 100% !important;
        height: auto !important;
      }
      /**hide content**/
      *[class="hide-me"] {
        display: none !important;
      }
      img[class="show-img"] {
        display: block !important;
        padding-top: 10px;
        max-height: none !important;
        width: auto !important;
        height: auto !important;
      }
    }
    
    .header-top{
    display:grid;
    grid-template-columns:1fr 1fr;
    place-items:center;
    padding: 30px;
    }
    
    .header-top .logo{
    justify-self:left;
    }
    
    .header-top .nav{
    text-align:right;
    display:flex;
    flex-direction:row;
    justify-content: right;
    }
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Fix Outlook Scaling-->
    <!--[if gte mso 9]>
  <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
  </xml>
  <![endif]-->
    <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900"
        id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
    <title></title>
    <!--[if mso]>
  <style type="text/css">
    body, table, td {
      font-family: Arial, Helvetica, sans-serif !important;
    }
  </style>
  <![endif]-->
</head>

<body style="background-color: #eeeeee;">
<table cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
    <tr>
        <td class="container" width="100%">
            <table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
                <tbody>
                    <tr>
                        <td>
                                <div class="header-top">
                                    <a class="logo" href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
                                        target="_blank">
                                        <img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
                                    </a>
                                    <div class="nav">
                                        <a href="">Company</a>
                                        <a href="">Services</a>
                                        <a href="">Locations</a>
                                        <a href="">Resources</a>
                                    </div>
                                </div>
                        </td>
                    </tr>
                        <tr>
                            <td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
                                <div style="border:1px solid #002173"></div>
                            </td>
                        </tr>


                        <tr>
                            <td class="cus-pad">
                                <h1 style="color:#002173">General information</h1>
                                <p style="color:#454545">The following information will provide you with an easy to
                                    navigate overview of what will happen with your personal data when you visit our
                                    website. The term „personal data“ comprises all data that can be used to personally
                                    identify you.
                                    For detailed information about the subject matter of data protection, please consult
                                    our Data Protection Declaration, which we have included beneath this copy.</p>
                            </td>
                        </tr>

                        <tr>
                            <td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
                                <img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
                            </td>
                        </tr>

                        <tr>
                            <td class="cus-pad">
                                <h1 style="color:#002173">Data recording on our website</h1>
                                <h4 style="color:#454545">Who is the responsible party for the recording of data on this
                                    website (i.e. the„controller“)?
                                </h4>
                            </td>
                        </tr>

                        <tr>
                            <td align="left" class="main-content-area cus-pad"><span
                                    style="font-size: 15px; color:#454545">The data on this website is processed by the
                                    operator of the website, whose contact
                                    information is available under section „Information Required by Law“ on this
                                    website.</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" style="padding-bottom: 50px;padding-top:10px;">
                                <div>
                                    <!--[if mso]>
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
                      href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
                      fillcolor="#70002c">
                <w:anchorlock/>
                <center>
              <![endif]-->
                                    <a href="http://"
                                        style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
                                        More</a>
                                    <!--[if mso]>
              </center>
              </v:rect>
              <![endif]-->
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
                                <div style="border:1px solid #002173;"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" style="padding: 0">
                <table border="0" cellpadding="0" cellspacing="0" class="resp"
                    style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
                    <tbody>

                        <tr>
                            <td align="right" style="padding: 0 0 0px 15px;">
                                <table border="0" cellpadding="0" cellspacing="0">
                                    <tbody>
                                        <tr>
                                            <td align="center" style="padding: 0 0 30px 0;">
                                                <a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
                                                    target="_blank">
                                                    <img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
                                                </a>

                                            </td>
                                        </tr>
                                        <tr class="social-link">
                                            <td align="center" style="padding-bottom: 30px;">
                                                <a style="margin-right: 10px;" href="">
                                                    <img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
                                                </a>
                                                <a style="margin-right: 10px;" href="">
                                                    <img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
                                                </a>
                                                <a style="margin-right: 10px;" href="">
                                                    <img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
                                                </a>
                                                <a href="">
                                                    <img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
                                                </a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
                                                <a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px"
                                                    href="">Privacy Policy</a>
                                                <a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px "
                                                    href="">Terms of
                                                    services</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table align="center" border="0" cellpadding="0" cellspacing="0">
                                    <tbody>
                                        <tr align="center">
                                            <td style="padding-bottom: 30px;font-size: 10px">
                                                This email was sent to <a href="">example@gmail.com</a> <br /> ©
                                                2004-2020 All rights reserved - Global Fairways®

                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

        </tbody>
    </table>
    <br clear="all" />


</body>

</html>
0 голосов
/ 05 марта 2020

Вы можете изменить атрибуты valign="middle" на align="center" и добавить height="70px" в таблицу навигации. Есть лучшие варианты, но я думаю, что он делает то, что вы хотите.

  <table align="right" width="70%" height="70px">
    <tbody>
      <tr align="center">
        <td>
          <a href="">Company</a>
          <a href="">Services</a>
          <a href="">Locations</a>
          <a href="">Resources</a>
        </td>
      </tr>
    </tbody>
  </table>
0 голосов
/ 05 марта 2020

Вы использовали таблицу внутри тега td. Поэтому, когда вы выравниваете элементы списка правильно, это не работает. Я обновил эту часть pls go через и обновил ее в вашем коде .. Happy Coding !!! Я просто помещаю элементы списка в другой div.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--Fix Outlook Scaling-->
  <!--[if gte mso 9]>
  <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
  </xml>
  <![endif]-->
  <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
  <title></title>
  <!--[if mso]>
  <style type="text/css">
    body, table, td {
      font-family: Arial, Helvetica, sans-serif !important;
    }
  </style>
  <![endif]-->
  <style type="text/css">
    html,
    body {
      font-family: 'Nunito Sans', Helvetica, Arial;
      margin: 0 !important;
      padding: 0 !important;
      text-size-adjust: none !important;
      -ms-text-size-adjust: none !important;
      -webkit-text-size-adjust: none !important;
      -webkit-font-smoothing: antialiased;
      background-color: #EEEEEE;
      font-size: 16px;
    }
    
    body {
      height: 100% !important;
      width: 100% !important;
    }
    
    a {
      text-decoration: none;
      color: #002173;
    }
    
    h1 {
      font-family: 'Nunito Sans', Helvetica, Arial;
    }
    
    .cus-pad {
      padding-left: 20px;
      padding-right: 20px;
    }
    
    .ReadMsgBody {
      width: 100%;
    }
    
    .ExternalClass {
      width: 100%;
    }
    
    .ExternalClass,
    .ExternalClass span,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    }
    
    #outlook a {
      padding: 0;
    }
    
    table,
    td {
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
    
    body {
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
    }
    
    img {
      -ms-interpolation-mode: bicubic;
    }
    
    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
    }
    /*no linky*/
    
    a[x-apple-data-detectors] {
      color: inherit !important;
      text-decoration: none !important;
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
    }
    
    .link-hover:hover {
      text-decoration: none !important;
    }
    
    table {
      border-collapse: collapse;
      margin: 0 auto;
      padding: 20px;
    }
    
    .button:hover {
      background-color: #ffd251 !important;
    }
    
    .button-2:hover {
      background-color: #777671 !important;
    }
    
    tr.social-link td a img {
      height: 20px;
      width: auto;
    }
    
    @media only screen and (max-width: 481px) {
      /**generic styles for content added through editor**/
      table {
        width: auto !important;
      }
      td {
        display: block;
        margin: 0 auto;
        width: auto !important;
      }
      /**all tds added to template will wrap!**/
      img {
        float: none !important;
        display: block;
        padding: 0;
        max-width: 100%;
        height: auto !important;
      }
      /****/
      .container {
        padding: 0 !important;
      }
      .no-wrap {
        width: 100% !important;
      }
      table.no-wrap td {
        /**add class no-wrap to table to keep it from wrapping**/
        display: table-cell !important;
      }
      table[class="resp"] {
        width: auto !important;
        padding: 5px !important;
      }
      .main-content-area {
        -webkit-text-size-adjust: 90% !important;
        line-height: 21px;
        text-align: left;
      }
      .promo-code {
        padding: 20px !important;
      }
      td[class="main-content-area"] h2 {
        -webkit-text-size-adjust: 80% !important;
      }
      td[class="force-col"] {
        /**add this class to any td you'd like to wrap in a one-column layout**/
        display: block;
        margin: 0 auto;
        width: auto !important;
        padding: 0;
      }
      img {
        max-width: 100% !important;
        height: auto !important;
      }
      /**hide content**/
      *[class="hide-me"] {
        display: none !important;
      }
      img[class="show-img"] {
        display: block !important;
        padding-top: 10px;
        max-height: none !important;
        width: auto !important;
        height: auto !important;
      }
    }
    
    .gf-e-header td a {
      text-transform: uppercase;
      font-weight: bold;
      font-size: 14px;
    }
  </style>
</head>

<body style="background-color: #eeeeee;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
    <tr>
      <td class="container" style="" width="100%">
        <table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
          <tbody>
            <tr>
              <td class="cus-pad" style="padding-top: 20px">
                
                      <div style="float: left">
                        <a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
                          <img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
                        </a>
                      </div>
                      <div style="float:right;">
                      <a href="">Company</a>
                      <a href="">Services</a>
                      <a href="">Locations</a>
                      <a href="">Resources</a>
                      </div>
                      
                    
              </td>
            </tr>
            
            <tr>
              <td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
                <div style="border:1px solid #002173"></div>
              </td>
            </tr>


            <tr>
              <td class="cus-pad">
                <h1 style="color:#002173">General information</h1>
                <p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
                  For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
              </td>
            </tr>

            <tr>
              <td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
                <img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
              </td>
            </tr>

            <tr>
              <td class="cus-pad">
                <h1 style="color:#002173">Data recording on our website</h1>
                <h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
                </h4>
              </td>
            </tr>

            <tr>
              <td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
              </td>
            </tr>
            <tr>
              <td align="center" style="padding-bottom: 50px;padding-top:10px;">
                <div>
                  <!--[if mso]>
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
                      href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
                      fillcolor="#70002c">
                <w:anchorlock/>
                <center>
              <![endif]-->
                  <a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
                More</a>
                  <!--[if mso]>
              </center>
              </v:rect>
              <![endif]-->
                </div>
              </td>
            </tr>

            <tr>
              <td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
                <div style="border:1px solid #002173;"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td align="center" style="padding: 0">
        <table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
          <tbody>

            <tr>
              <td align="right" style="padding: 0 0 0px 15px;">
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" style="padding: 0 0 30px 0;">
                        <a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
                          <img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
                        </a>

                      </td>
                    </tr>
                    <tr class="social-link">
                      <td align="center" style="padding-bottom: 30px;">
                        <a style="margin-right: 10px;" href="">
                          <img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
                        </a>
                        <a style="margin-right: 10px;" href="">
                          <img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
                        </a>
                        <a style="margin-right: 10px;" href="">
                          <img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
                        </a>
                        <a href="">
                          <img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
                        </a>
                      </td>
                    </tr>

                    <tr>
                      <td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
                        <a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
                        <a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
                    services</a>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table align="center" border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr align="center">
                      <td style="padding-bottom: 30px;font-size: 10px">
                        This email was sent to <a href="">example@gmail.com</a> <br/> © 2004-2020 All rights reserved - Global Fairways®

                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>


  </table>
  <br clear="all" />


</body>

</html>
...