LF template

In this example below you will see how to do a LF template with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by diantai, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright diantai ©
  • HTML
  • CSS
  • JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- start coded_template: id:5366770930 path:Custom/email/Orange_Juice/Orange_Juice_UG_2017_UserGroup_Email1.html -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>


  <title>Apoyo a las comunidades afectadas por los desastres naturales ocurridos recientemente</title>


  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


  <meta http-equiv="X-UA-Compatible" content="IE=edge">


  <meta name="viewport" content="width=device-width, initial-scale=1.0 ">


  <meta name="format-detection" content="telephone=no">


  <style type="text/css">
    body {
      margin: 0 !important;
    
      padding: 0 !important;
    
      -webkit-text-size-adjust: 100% !important;
    
      -ms-text-size-adjust: 100% !important;
    
      -webkit-font-smoothing: antialiased !important;
    
      font-family: "Open Sans", Arial, Helvetica, Lato, sans-serif;
    }
    
    img {
      border: 0 !important;
    
      outline: none !important;
    }
    
    p {
      margin-top: 0px !important;
    }
    
    table {
      border-collapse: collapse;
    
      mso-table-lspace: 0px;
    
      mso-table-rspace: 0px;
    }
    
    td,
    a,
    span {
      border-collapse: collapse;
    
      mso-line-height-rule: exactly;
    }
    
    .ExternalClass * {
      line-height: 100%;
    }
    
    .em_defaultlink a {
      color: inherit !important;
    
      text-decoration: none !important;
    }
    
    span.MsoHyperlink {
      mso-style-priority: 99;
    
      color: inherit;
    }
    
    span.MsoHyperlinkFollowed {
      mso-style-priority: 99;
    
      color: inherit;
    }
    
    .em_grey a {
      color: #083e66;
    
      text-decoration: none;
    
      font-weight: bold;
    }
    
    .em_grey2 a {
      color: #44515e;
    
      text-decoration: none;
    }
    
    .em_white a {
      color: #ffffff;
    
      text-decoration: none;
    }
    
    .em_blue a {
      color: #0f4aa0;
    
      text-decoration: none;
    
      font-weight: bold;
    }
    
    /*Stylesheed for the devices width between 481px to 599px*/
    
    @media only screen and (min-width: 481px) and (max-width: 599px) {
      .em_main_table {
        width: 480px !important;
      }
    
      .em_wrapper {
        width: 100% !important;
      }
    
      .em_aside {
        padding: 0px !important; /*Update the values as required*/
      }
    
      .em_hide {
        display: none !important;
      }
    
      .hs-image-widget {
        width: 100% !important;
    
        height: auto !important;
      }
    
      .em_full_img {
        width: 100% !important;
    
        height: auto !important;
      }
    
      .em_align_cent {
        text-align: center !important;
      }
    
      .em_pad {
        padding: 20px 10px 20px 10px !important;
      }
    
      .em_pad2 {
        padding: 0 10px 20px 10px !important;
      }
    
      .em_pad3 {
        padding: 35px !important;
      }
    
      .em_pad4 {
        padding: 20px 10px 0 10px !important;
      }
    
      .responsive_padbot {
        padding-bottom: 28px !important;
      }
    
      .em_padtop {
        padding-top: 20px !important;
      }
    
      .em_padtop2 {
        padding-top: 30px !important;
      }
    
      .em_side {
        padding: 0 10px !important;
      }
    
      .em_padbtm15 {
        padding: 30px 0 15px 0 !important;
      }
    
      .em_padbtm15_2 {
        padding: 0 0 15px 0 !important;
      }
    
      .em_padb15 {
        padding: 0 0 15px 0 !important;
      }
    
      .em_padb20 {
        padding: 0 0 20px 0 !important;
      }
    
      .em_padtb20 {
        padding: 20px 0 !important;
      }
    
      .em_padt15 {
        padding: 15px 0 0 0 !important;
      }
    
      .em_padt30 {
        padding: 30px 0 0 0 !important;
      }
    
      .em_padnone {
        padding: 0 !important;
      }
    
      .em_bg_white {
        background-color: #ffffff !important;
      }
    }
    
    /*Stylesheed for the devices width between 0px to 480px*/
    
    @media only screen and (max-width: 480px) {
      .em_main_table {
        width: 100% !important;
      }
    
      .em_wrapper {
        width: 100% !important;
      }
    
      .em_aside {
        padding: 0px !important; /*Update the values as required*/
      }
    
      .em_hide {
        display: none !important;
      }
    
      .hs-image-widget {
        width: 100% !important;
    
        height: auto !important;
      }
    
      .em_full_img {
        width: 100% !important;
    
        height: auto !important;
      }
    
      .em_align_cent {
        text-align: center !important;
      }
    
      .em_pad {
        padding: 20px 10px 20px 10px !important;
      }
    
      .em_pad2 {
        padding: 0 10px 20px 10px !important;
      }
    
      .em_pad3 {
        padding: 35px !important;
      }
    
      .em_pad4 {
        padding: 20px 10px 0 10px !important;
      }
    
      .responsive_padbot {
        padding-bottom: 28px !important;
      }
    
      .em_padtop {
        padding-top: 20px !important;
      }
    
      .em_padtop2 {
        padding-top: 30px !important;
      }
    
      .em_side {
        padding: 0 10px !important;
      }
    
      .em_padbtm15 {
        padding: 30px 0 15px 0 !important;
      }
    
      .em_padbtm15_2 {
        padding: 0 0 15px 0 !important;
      }
    
      .em_padb15 {
        padding: 0 0 15px 0 !important;
      }
    
      .em_padb20 {
        padding: 0 0 20px 0 !important;
      }
    
      .em_padtb20 {
        padding: 20px 0 !important;
      }
    
      .em_padt15 {
        padding: 15px 0 0 0 !important;
      }
    
      .em_padt30 {
        padding: 30px 0 0 0 !important;
      }
    
      .em_padnone {
        padding: 0 !important;
      }
    
      .em_bg_white {
        background-color: #ffffff !important;
      }
    }
    
    .auto-style1 {
      font-weight: bold;
    
      color: #ff6305;
    }
  </style>


  <!--[if gte mso 9]>

 

<xml>

 

  <o:OfficeDocumentSettings>

 

    <o:AllowPNG/>

 

    <o:PixelsPerInch>96</o:PixelsPerInch>

 

 </o:OfficeDocumentSettings>

 

</xml>

 

<![endif]-->


  <!--[if gt mso 15]>

 

     <style type="text/css" media="all">

 

     /* Outlook 2016 Height Fix */

 

     table, tr, td { border-collapse: collapse; }

 

     tr { font-size:0px; line-height:0px; border-collapse: collapse; }

 

     </style>

 

     <![endif]-->


  <meta name="generator" content="HubSpot">
  <meta property="og:url" content="https://info.laserfiche.com/-temporary-slug-fd06fcb7-5921-4c0a-ae38-3241336c5f5e?hs_preview=SkQyaGXJ-5387440201">
</head>


<body style="margin:0px; padding:0px;" bgcolor="#f1f6f9">


  <!-- Preview text (text which appears right after subject in certain email clients) -->


  <div id="preview_text" style="display:none;font-size:1px;color:#f2f6f9;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Aún hay muchas personas que sufren en el Caribe tras los huracanes Irma y Maria.</div>


  <!-- EDIT BETWEEN HERE... ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->


  <div id="hs_cos_wrapper_orange_juice_header_1" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- MENU-8 STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9" style="padding-top:20px;">


      <tbody>
        <tr>


          <td align="center" class="em_side" style="padding-top: 15px;">


            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed; border-bottom: 1px solid #d4d7dc;border-left: 1px solid #d4d7dc; border-right: 1px solid #d4d7dc;border-top: 3px solid #ff6305;" width="660" border="0" cellspacing="0"
              cellpadding="0" bgcolor="#ffffff">


              <tbody>
                <tr>


                  <td valign="top" style="padding: 30px 30px 25px 30px;" class="em_pad">


                    <table align="center" width="598" class="em_wrapper" style="width: 598px;" border="0" cellspacing="0" cellpadding="0">


                      <tbody>
                        <tr>


                          <td align="left" class="em_grey" style="color:#222930; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:25px; line-height:35px; letter-spacing:0.025em; ">


                            <table align="left" class="em_wrapper" border="0" cellspacing="0" cellpadding="0">


                              <tbody>
                                <tr>


                                  <td valign="top" align="center" style="padding-top:6px">
                                    <a href="#" target="_blank" style="text-decoration: none;" data-hs-link-id="0"><img src="https://info.laserfiche.com/hs-fs/hubfs/Laserfiche_Logotype_RGB_Email_60.gif?t=1508230585078&amp;width=171&amp;height=30&amp;name=Laserfiche_Logotype_RGB_Email_60.gif" width="171" height="30" border="0" style="display: block; max-width: 171px; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; color: #fe6407; font-weight: bold;"
                                        alt="Laserfiche®" srcset="https://info.laserfiche.com/hs-fs/hubfs/Laserfiche_Logotype_RGB_Email_60.gif?t=1508230585078&amp;width=171&amp;height=30&amp;name=Laserfiche_Logotype_RGB_Email_60.gif 171w, https://info.laserfiche.com/hs-fs/hubfs/Laserfiche_Logotype_RGB_Email_60.gif?t=1508230585078&amp;width=342&amp;height=60&amp;name=Laserfiche_Logotype_RGB_Email_60.gif 342w"
                                        sizes="(max-width: 171px) 100vw, 171px"></a>
                                  </td>


                                </tr>


                              </tbody>
                            </table>


                            <table align="right" class="em_wrapper" border="0" cellspacing="0" cellpadding="0">


                              <tbody>
                                <tr>


                                  <td valign="top" class="em_padtop">
                                    <table align="center" bgcolor="#0f4aa0" border="0" cellpadding="0" cellspacing="0" style="border-radius:3px;">


                                      <tbody>
                                        <tr>


                                        </tr>


                                      </tbody>
                                    </table>


                                  </td>


                                </tr>


                              </tbody>
                            </table>


                          </td>


                        </tr>


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


                </tr>


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


        </tr>


      </tbody>
    </table>


    <!-- MENU-8 ENDS -->
  </div>


  <div id="hs_cos_wrapper_orange_juice_basic_headline" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- BASIC-HEADLINE STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9">


      <tbody>
        <tr>


          <td align="center" class="em_side">
            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed; border-left: 1px solid #d4d7dc; border-right: 1px solid #d4d7dc;" width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">


              <tbody>
                <tr>


                  <td valign="top" style="padding: 30px 30px 25px 30px;" class="em_pad">
                    <table align="center" width="598" class="em_wrapper" style="width: 598px;" border="0" cellspacing="0" cellpadding="0">


                      <tbody>
                        <tr>


                          <td align="left" class="em_grey" style="color:#222930; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:25px; line-height:35px; letter-spacing:0.025em; ">


                            <div id="hs_cos_wrapper_orange_juice_basic_headline_Headline" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><span style="font-weight: bold;">Apoyo a las comunidades afectadas por los desastres naturales ocurridos recientemente</span></div>


                          </td>


                        </tr>


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


                </tr>


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


        </tr>


      </tbody>
    </table>


    <!-- BASIC-HEADLINE ENDS -->
  </div>


  <div id="hs_cos_wrapper_orange_juice_basic_paragraph_1" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- BASIC PARA STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9">


      <tbody>
        <tr>


          <td align="center" class="em_side">
            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed; border-left: 1px solid #d4d7dc; border-right: 1px solid #d4d7dc;" width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">


              <tbody>
                <tr>


                  <td valign="top" style="padding: 0 30px 30px 30px;" class="em_pad2">
                    <table align="center" width="598" class="em_wrapper" style="width: 598px;" border="0" cellspacing="0" cellpadding="0">


                      <tbody>
                        <tr>


                          <td align="left" class="em_blue" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px; line-height:24px;">

                            <p style="margin-bottom: 1em; ">Aún hay muchas personas que sufren en el Caribe tras los huracanes Irma y Maria. Desafortunadamente, también México ha sido golpeado recientemente por los terremotos. El ayudar a estas comunidades a reconstruirse tomará tiempo y recursos. Para apoyar estos esfuerzos, Laserfiche está lanzando un programa de desafío abierto a toda nuestra comunidad Laserfiche que incluye empleados, clientes y distribuidores a nivel mundial. 
</p>

                            <p style="margin-bottom: 1em; ">Desde este momento y hasta el 31 de diciembre de 2017, Laserfiche Internacional igualara todas las donaciones a las organizaciones de beneficencia siguientes hasta un límite de US $10,000 por organización.</p>

                          </td>


                        </tr>


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


                </tr>


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


        </tr>


      </tbody>
    </table>


    <!-- BASIC PARA ENDS -->
  </div>


  <div id="hs_cos_wrapper_orange_juice_organized_1" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- ORGANIZED-1 STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9">


      <tbody>
        <tr>


          <td align="center" class="em_side">
            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed; border-left: 1px solid #d4d7dc; border-right: 1px solid #d4d7dc;" width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">


              <tbody>
                <tr>


                  <td valign="top" style="padding: 0px 30px 30px 30px" class="em_pad">
                    <table align="center" width="598" class="em_wrapper" style="width: 598px;" border="0" cellspacing="0" cellpadding="0">


                      <tbody>
                        <tr>


                          <td valign="top">


                            <table align="left" class="em_wrapper" style="width: 100%;" width="275" border="0" cellspacing="0" cellpadding="0">


                              <tbody>
                                <tr>


                                  <td valign="top" style="padding: 0 0 10px 0;">
                                    <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">


                                      <tbody>
                                        <tr>


                                          <td align="left" valign="top" width="30"><img src="https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=17&amp;height=21&amp;name=LF_Email_Check-Circle.png" alt="-" height="21" border="0" width="17" srcset="https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=17&amp;height=21&amp;name=LF_Email_Check-Circle.png 17w, https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=34&amp;height=42&amp;name=LF_Email_Check-Circle.png 34w"
                                              sizes="(max-width: 17px) 100vw, 17px"></td>


                                          <td align="left">
                                            <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">


                                              <tbody>
                                                <tr>


                                                  <td align="left" class="em_grey2" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px;  line-height:24px; "> <strong>GlobalGiving</strong> – Estaremos igualando las donaciones a estos esfuerzos específicos: <span style="color: #0f4aa0;"><a href="https://www.globalgiving.org/projects/hurricane-maria-caribbean-relief-fund/" style="color: #0f4aa0; text-decoration: none;" data-hs-link-id="0" target="_blank"><strong>Puerto Rico and Caribbean Relief</strong></a></span> y <span style="color: #0f4aa0;"><a href="https://www.globalgiving.org/projects/mexico-earthquake-relief-fund/" style="color: #0f4aa0; text-decoration: none;" data-hs-link-id="0" target="_blank"><strong>Mexico Earthquake Relief</strong></a></span></td>
                                                 
                               

                                                </tr>


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


                                        </tr>


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


                                </tr>


                                <tr>


                                  <td valign="top" style="padding: 0 0 10px 0;">
                                    <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">


                                      <tbody>
                                        <tr>


                                          <td align="left" valign="top" width="30"><img src="https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=17&amp;height=21&amp;name=LF_Email_Check-Circle.png" alt="-" height="21" border="0" width="17" srcset="https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=17&amp;height=21&amp;name=LF_Email_Check-Circle.png 17w, https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=34&amp;height=42&amp;name=LF_Email_Check-Circle.png 34w"
                                              sizes="(max-width: 17px) 100vw, 17px"></td>


                                          <td align="left">
                                            <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">


                                              <tbody>
                                                <tr>


                                                  <td align="left" class="em_grey2" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px;  line-height:24px; "> <strong>Unicef</strong> – Estaremos igualando las donaciones a estos esfuerzos específicos: <span style="color: #0f4aa0;"><a href="https://www.unicefusa.org/donate/support-unicef-usas-hurricane-relief-efforts-puerto-rico/32952" style="color: #0f4aa0; text-decoration: none;" data-hs-link-id="0" target="_blank"><strong>Puerto Rico Relief</strong></a></span> y <span style="color: #0f4aa0;"><a href="https://www.unicefusa.org/donate/support-unicefs-earthquake-relief-efforts-mexico/32909" style="color: #0f4aa0; text-decoration: none;" data-hs-link-id="0" target="_blank"><strong>Mexico Earthquake Relief</strong></a></span></td>


                                                </tr>


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


                                        </tr>


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


                                </tr>


                              </tbody>
                            </table>


                          </td>


                        </tr>


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


    <!-- ORGANIZED-1 ENDS -->
  </div>


  <div id="hs_cos_wrapper_orange_juice_basic_paragraph_2" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- BASIC PARA STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9">
      <tbody>
        <tr>
          <td align="center" class="em_side">
            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed; border-left: 1px solid #d4d7dc; border-right: 1px solid #d4d7dc;" width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
              <tbody>
                <tr>
                  <td valign="top" style="padding: 0 30px 30px 30px;" class="em_pad2">
                    <table align="center" width="598" class="em_wrapper" style="width: 598px;" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td align="left" class="em_blue" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px; line-height:24px;">
                            <p style="margin-bottom: 1em; ">Para apoyar a estos programas que están trabajando para ayudar a estas comunidades a recuperarse y reconstruirse lo antes posible, LFI estará haciendo una donación anticipada de US $5,000 inmediatamente a Global Giving.&nbsp;</p>
                            <p style="margin-bottom: 1em; ">Para asegurar que su donación sea igualada, por favor envíe una copia de su recibo a <span style="font-weight: bold;"><a style="text-decoration: none; color: #0f4aa0;" href="mailto:lfi@laserfiche.com" data-hs-link-id="0" target="_blank">lfi@laserfiche.com</a></span>. Entonces nosotros igualaremos su donación.&nbsp;</p>
                            <p style="margin-bottom: 1em; ">Extendemos nuestra solidaridad a la gente de México y el Caribe y a los miembros de nuestra comunidad de Laserfiche que pudieron haber sido afectados por estos desastres. Gracias por su generosidad, cada granito de arena será de gran ayuda.&nbsp;</p>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- BASIC PARA ENDS -->
  </div>


  <div id="hs_cos_wrapper_orange_juice_signature" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- SIGNATURE STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9">


      <tbody>
        <tr>


          <td align="center" class="em_side">
            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed; border-left: 1px solid #d4d7dc; border-right: 1px solid #d4d7dc; border-bottom: 1px solid #d4d7dc;" width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">


              <tbody>
                <tr>


                  <td valign="top" style="padding: 0px 30px 30px 30px;" class="em_pad">
                    <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">


                      <tbody>
                        <tr>


                          <td align="left" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px;  line-height:10px;">
                            <div id="hs_cos_wrapper_orange_juice_signature_Signature_Text" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text">

                              <p style="margin-bottom: 1em; ">Gracias,&nbsp;</p>

                              <p style="margin-bottom: 1em; "><span style="font-weight: bold; color: #ff6305;">Laserfiche Internacional</span></p>

                              
                            </div>
                          </td>


                        </tr>


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


                </tr>


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


        </tr>


      </tbody>
    </table>


    <!-- SIGNATURE ENDS -->
  </div>
  
  
  
  
  
  
  
  
    <div id="hs_cos_wrapper_orange_juice_basic_headline" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- BASIC-HEADLINE STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9">


      <tbody>
        <tr>


          <td align="center" class="em_side">
            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed; border-left: 1px solid #d4d7dc; border-right: 1px solid #d4d7dc;" width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">


              <tbody>
                <tr>


                  <td valign="top" style="padding: 30px 30px 25px 30px;" class="em_pad">
                                     <table align="center" width="598" class="em_wrapper" style="width: 598px;" border="0" cellspacing="0" cellpadding="0">


                      <tbody>
                        <tr>


                          <td align="left" class="em_grey" style="color:#222930; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:25px; line-height:35px; letter-spacing:0.025em; ">


                            <div id="hs_cos_wrapper_orange_juice_basic_headline_Headline" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><span style="font-weight: bold;">Help the communities recently affected by natural disasters</span></div>


                          </td>


                        </tr>


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


                </tr>


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


        </tr>


      </tbody>
    </table>


    <!-- BASIC-HEADLINE ENDS -->
  </div>


  <div id="hs_cos_wrapper_orange_juice_basic_paragraph_1" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- BASIC PARA STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9">


      <tbody>
        <tr>


          <td align="center" class="em_side">
            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed; border-left: 1px solid #d4d7dc; border-right: 1px solid #d4d7dc;" width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">


              <tbody>
                <tr>


                  <td valign="top" style="padding: 0 30px 30px 30px;" class="em_pad2">
                    <table align="center" width="598" class="em_wrapper" style="width: 598px;" border="0" cellspacing="0" cellpadding="0">


                      <tbody>
                        <tr>


                          <td align="left" class="em_blue" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px; line-height:24px;">

                            <p style="margin-bottom: 1em; ">There are still many people suffering in the Caribbean in the wake of Hurricanes Irma and Maria and in Mexico following the earthquakes that have struck recently. Helping these communities rebuild will take time and resources. To support these efforts Laserfiche is launching a Challenge Program open to our entire global community of staff, VARs and users.</p>

                            <p style="margin-bottom: 1em; ">From now until December 31 2017, Laserfiche International will match all donations made to the following charities up to a limit of US $10,000 per charity.</p>

                          </td>


                        </tr>


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


                </tr>


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


        </tr>


      </tbody>
    </table>


    <!-- BASIC PARA ENDS -->
  </div>


  <div id="hs_cos_wrapper_orange_juice_organized_1" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- ORGANIZED-1 STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9">


      <tbody>
        <tr>


          <td align="center" class="em_side">
            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed; border-left: 1px solid #d4d7dc; border-right: 1px solid #d4d7dc;" width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">


              <tbody>
                <tr>


                  <td valign="top" style="padding: 0px 30px 30px 30px" class="em_pad">
                    <table align="center" width="598" class="em_wrapper" style="width: 598px;" border="0" cellspacing="0" cellpadding="0">


                      <tbody>
                        <tr>


                          <td valign="top">


                            <table align="left" class="em_wrapper" style="width: 100%;" width="275" border="0" cellspacing="0" cellpadding="0">


                              <tbody>
                                <tr>


                                  <td valign="top" style="padding: 0 0 10px 0;">
                                    <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">


                                      <tbody>
                                        <tr>


                                          <td align="left" valign="top" width="30"><img src="https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=17&amp;height=21&amp;name=LF_Email_Check-Circle.png" alt="-" height="21" border="0" width="17" srcset="https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=17&amp;height=21&amp;name=LF_Email_Check-Circle.png 17w, https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=34&amp;height=42&amp;name=LF_Email_Check-Circle.png 34w"
                                              sizes="(max-width: 17px) 100vw, 17px"></td>


                                          <td align="left">
                                            <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">


                                              <tbody>
                                                <tr>


                                                  <td align="left" class="em_grey2" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px;  line-height:24px; "> <strong>GlobalGiving</strong> – We will be matching donations to these specific relief efforts: <span style="color: #0f4aa0;"><a href="https://www.globalgiving.org/projects/hurricane-maria-caribbean-relief-fund/" style="color: #0f4aa0; text-decoration: none;" data-hs-link-id="0" target="_blank"><strong>Puerto Rico and Caribbean Relief</strong></a></span> and <span style="color: #0f4aa0;"><a href="https://www.globalgiving.org/projects/mexico-earthquake-relief-fund/" style="color: #0f4aa0; text-decoration: none;" data-hs-link-id="0" target="_blank"><strong>Mexico Earthquake Relief</strong></a></span></td>
                                                 
                               

                                                </tr>


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


                                        </tr>


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


                                </tr>


                                <tr>


                                  <td valign="top" style="padding: 0 0 10px 0;">
                                    <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">


                                      <tbody>
                                        <tr>


                                          <td align="left" valign="top" width="30"><img src="https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=17&amp;height=21&amp;name=LF_Email_Check-Circle.png" alt="-" height="21" border="0" width="17" srcset="https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=17&amp;height=21&amp;name=LF_Email_Check-Circle.png 17w, https://info.laserfiche.com/hs-fs/hubfs/LF_Email_Check-Circle.png?t=1508230585078&amp;width=34&amp;height=42&amp;name=LF_Email_Check-Circle.png 34w"
                                              sizes="(max-width: 17px) 100vw, 17px"></td>


                                          <td align="left">
                                            <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">


                                              <tbody>
                                                <tr>


                                                  <td align="left" class="em_grey2" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px;  line-height:24px; "> <strong>Unicef</strong> – We will be matching donations to these specific relief efforts: <span style="color: #0f4aa0;"><a href="https://www.unicefusa.org/donate/support-unicef-usas-hurricane-relief-efforts-puerto-rico/32952" style="color: #0f4aa0; text-decoration: none;" data-hs-link-id="0" target="_blank"><strong>Puerto Rico Relief</strong></a></span> and <span style="color: #0f4aa0;"><a href="https://www.unicefusa.org/donate/support-unicefs-earthquake-relief-efforts-mexico/32909" style="color: #0f4aa0; text-decoration: none;" data-hs-link-id="0" target="_blank"><strong>Mexico Earthquake Relief</strong></a></span></td>


                                                </tr>


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


                                        </tr>


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


                                </tr>


                              </tbody>
                            </table>


                          </td>


                        </tr>


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


    <!-- ORGANIZED-1 ENDS -->
  </div>


  <div id="hs_cos_wrapper_orange_juice_basic_paragraph_2" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- BASIC PARA STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9">
      <tbody>
        <tr>
          <td align="center" class="em_side">
            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed; border-left: 1px solid #d4d7dc; border-right: 1px solid #d4d7dc;" width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
              <tbody>
                <tr>
                  <td valign="top" style="padding: 0 30px 30px 30px;" class="em_pad2">
                    <table align="center" width="598" class="em_wrapper" style="width: 598px;" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td align="left" class="em_blue" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px; line-height:24px;">
                            <p style="margin-bottom: 1em; ">To support the programs working to help these communities recover and rebuild as quickly as possible, LFI is making an advance donation of US $5,000 to Global Giving immediately.&nbsp;</p>
                            <p style="margin-bottom: 1em; ">To ensure your donation is matched, please submit a copy of your receipt to <span style="font-weight: bold;"><a style="text-decoration: none; color: #0f4aa0;" href="mailto:lfi@laserfiche.com" data-hs-link-id="0" target="_blank">lfi@laserfiche.com</a></span>. We will then match your donation.&nbsp;</p>
                            <p style="margin-bottom: 1em; ">We extend our thoughts to the people of the Caribbean and Mexico and to the members of our Laserfiche community who may have been affected by these disasters. Thank you for your generosity, every little bit helps.&nbsp;</p>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- BASIC PARA ENDS -->
  </div>


  <div id="hs_cos_wrapper_orange_juice_signature" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- SIGNATURE STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9">


      <tbody>
        <tr>


          <td align="center" class="em_side">
            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed; border-left: 1px solid #d4d7dc; border-right: 1px solid #d4d7dc; border-bottom: 1px solid #d4d7dc;" width="660" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">


              <tbody>
                <tr>


                  <td valign="top" style="padding: 0px 30px 30px 30px;" class="em_pad">
                    <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">


                      <tbody>
                        <tr>


                          <td align="left" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px;  line-height:10px;">
                            <div id="hs_cos_wrapper_orange_juice_signature_Signature_Text" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text">

                              <p style="margin-bottom: 1em; ">Thank you, &nbsp;</p>

                              <p style="margin-bottom: 1em; "><span style="font-weight: bold; color: #ff6305;">Laserfiche International</span></p>

                              
                            </div>
                          </td>


                        </tr>


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


                </tr>


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


        </tr>


      </tbody>
    </table>


    <!-- SIGNATURE ENDS -->
  </div>
  
  
  
  
  
  
  
  
  


  <!--...AND END EDITING HERE ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->


  <div id="hs_cos_wrapper_orange_juice_footer" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
    <!-- FOOTER STARTS -->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f6f9">


      <tbody>
        <tr>


          <td align="center">
            <table align="center" class="em_wrapper" style="width: 660px; table-layout: fixed;" width="660" border="0" cellspacing="0" cellpadding="0">


              <tbody>
                <tr>


                  <td valign="top" align="center" style="padding: 30px 0;" class="em_padtb20">
                    <table align="center" class="em_wrapper" style="width: 595px;" width="595" border="0" cellspacing="0" cellpadding="0">


                      <tbody>
                        <tr>


                          <td align="center" class="em_grey2" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px; line-height:24px; padding: 0 0 20px 0;"> Laserfiche | 3545&nbsp;Long&nbsp;Beach&nbsp;Blvd | Long&nbsp;Beach,&nbsp;CA<br>


                            <a href="tel:18009858533" style="color:#0f4aa0; text-decoration:none" target="_blank" data-hs-link-id="0">+1&nbsp;800&nbsp;985&nbsp;8533</a> | <a href="mailto:contact@laserfiche.com" style=" color:#0f4aa0; text-decoration:none"
                              target="_blank" data-hs-link-id="0">contact@laserfiche.com</a></td>


                        </tr>


                        <tr>


                          <td align="center" valign="top" style="padding: 0 0 20px 0;">
                            <table align="center" border="0" cellspacing="0" cellpadding="0">


                              <tbody>
                                <tr>


                                  <td align="center" valign="top" width="48"><a href="https://www.facebook.com/LaserficheInternationalltd/"><img width="22" height="22" border="0" src="https://info.laserfiche.com/hs-fs/hubfs/Newsletters/images/LF_Newsletter_Social_Facebook_Trans.gif?t=1508230585078&amp;width=22&amp;height=22&amp;name=LF_Newsletter_Social_Facebook_Trans.gif"
                                      alt="Like us on Facebook" style="display:block; font-family:  Arial, sans-serif; font-size: 15px; line-height: 20px; color: #464646;" srcset="https://info.laserfiche.com/hs-fs/hubfs/Newsletters/images/LF_Newsletter_Social_Facebook_Trans.gif?t=1508230585078&amp;width=22&amp;height=22&amp;name=LF_Newsletter_Social_Facebook_Trans.gif 22w, https://info.laserfiche.com/hs-fs/hubfs/Newsletters/images/LF_Newsletter_Social_Facebook_Trans.gif?t=1508230585078&amp;width=44&amp;height=44&amp;name=LF_Newsletter_Social_Facebook_Trans.gif 44w"
                                                                                                                                                 sizes="(max-width: 22px) 100vw, 22px"></a></td>


                                  <td align="center" valign="top" width="48">
                                    <a href="https://twitter.com/laserfiche?lang=es"><img width="22" height="22" border="0" src="https://info.laserfiche.com/hs-fs/hubfs/Newsletters/images/LF_Newsletter_Social_Twitter_Trans.gif?t=1508230585078&amp;width=22&amp;height=22&amp;name=LF_Newsletter_Social_Twitter_Trans.gif"
                                      alt="Follow us on Twitter" style="display:block; font-family:  Arial, sans-serif; font-size: 15px; line-height: 20px; color: #464646;" srcset="https://info.laserfiche.com/hs-fs/hubfs/Newsletters/images/LF_Newsletter_Social_Twitter_Trans.gif?t=1508230585078&amp;width=22&amp;height=22&amp;name=LF_Newsletter_Social_Twitter_Trans.gif 22w, https://info.laserfiche.com/hs-fs/hubfs/Newsletters/images/LF_Newsletter_Social_Twitter_Trans.gif?t=1508230585078&amp;width=44&amp;height=44&amp;name=LF_Newsletter_Social_Twitter_Trans.gif 44w"
                                                    sizes="(max-width: 22px) 100vw, 22px"></a></td>


                                  <td align="center" valign="top" width="48"><a href="https://www.linkedin.com/company/laserfiche/"><img width="22" height="22" border="0" src="https://info.laserfiche.com/hs-fs/hubfs/Newsletters/images/LF_Newsletter_Social_Linkedin_Trans.gif?t=1508230585078&amp;width=22&amp;height=22&amp;name=LF_Newsletter_Social_Linkedin_Trans.gif"
                                      alt="Connect on LinkedIn" style="display:block;font-family:  Arial, sans-serif; font-size: 15px; line-height: 20px; color: #464646;" srcset="https://info.laserfiche.com/hs-fs/hubfs/Newsletters/images/LF_Newsletter_Social_Linkedin_Trans.gif?t=1508230585078&amp;width=22&amp;height=22&amp;name=LF_Newsletter_Social_Linkedin_Trans.gif 22w, https://info.laserfiche.com/hs-fs/hubfs/Newsletters/images/LF_Newsletter_Social_Linkedin_Trans.gif?t=1508230585078&amp;width=44&amp;height=44&amp;name=LF_Newsletter_Social_Linkedin_Trans.gif 44w"
                                                                                                                                         sizes="(max-width: 22px) 100vw, 22px"></a></td>


                                </tr>


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


                        </tr>


                        <tr>


                          <td align="center" class="em_grey2" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:15px;  line-height:24px; padding: 0 0 20px 0;"><a href="#" style="color:#44515e; text-decoration:none;" data-hs-link-id="1" target="_blank"> Copyright © 2017, All rights reserved </a></td>


                        </tr>


                        <tr>


                          <td align="center" class="em_grey2" style="color:#44515e; font-family:'Open Sans',Arial,Helvetica,Lato,sans-serif; font-size:12px;  line-height:20px;"> You received this email because you are subscribed to emails from&nbsp;Laserfiche. &nbsp;If you prefer not to receive emails from Laserfiche, you may <a target="_blank" href="http://${AzureSend.unsubscribe()}" style=" font-weight:normal; color:#0f4aa0; text-decoration:none"
                              data-hs-link-id="0">unsubscribe</a> or adjust your <a target="_blank" href="http://info.laserfiche.com/hs/manage-preferences/unsubscribe-test?d=eyJlYSI6ImV4YW1wbGVAZXhhbXBsZS5jb20ifQ%3D%3D&amp;v=1" style=" font-weight:normal; color:#0f4aa0; text-decoration:none"
                              data-hs-link-id="0">email preferences</a>. </td>


                        </tr>


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


                </tr>


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


        </tr>


      </tbody>
    </table>


    <!-- FOOTER ENDS -->


    <!--Full width table End-->


    <!--Increase/decrease the number of (&nbsp;) as per the template width-->


    <div class="em_hide" style="white-space:nowrap;font:20px courier;color:#ffffff;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>


    <!--HUBSPOT HACK START-->


    <!--<p id="footer"> Laserfiche&nbsp;            3545 Long Beach Blvd.&nbsp;            &nbsp;            Long Beach&nbsp;            CA&nbsp;            90807&nbsp;            United States&nbsp;            <br/>            You received this email because you are subscribed to Marketing Resources from Laserfiche.            <br/>            Update your <a class="hubspot-mergetag" data-unsubscribe="true" href="https://info.laserfiche.com/hs/manage-preferences/unsubscribe-test?d=eyJlYSI6ImV4YW1wbGVAZXhhbXBsZS5jb20ifQ%3D%3D&v=1">email preferences</a> to choose the types of emails you receive.            <br/>            <a class="hubspot-mergetag" data-unsubscribe="true" href="https://info.laserfiche.com/hs/manage-preferences/unsubscribe-all-test?d=eyJlYSI6ImV4YW1wbGVAZXhhbXBsZS5jb20ifQ%3D%3D&v=1">Unsubscribe from all future emails</a>        </p> -->


    <!--HUBSPOT HACK END-->


  </div>
  <!-- end coded_template: id:5366770930 path:Custom/email/Orange_Juice/Orange_Juice_UG_2017_UserGroup_Email1.html -->

</body>

</html>

/*Downloaded from https://www.codeseek.co/diantai/lf-template-Yrdpox */
    


/*Downloaded from https://www.codeseek.co/diantai/lf-template-Yrdpox */
    

Comments