~~HTML Email Template Documentation.~~

Hello! I hope you're well and healthy. Let's see how you'll add the content of your own to this email template. First thing first you have to use a code editor like [VS code studio] code.visualstudio.com/download), Sublime Text, and Atom to edit this template.

Let's start with Preheader.

<!-- Preheader -->
 <div style="font-size: 0px;color: #ffffff;line-height: 1px;mso-line-height-rule:exactly;display:
none;max-width: 0px;max-height: 0px;opacity: 0;overflow: hidden;mso-hide:all;">
 Add Preheader Text Here (85-100 characters in length)
 </div>
<!-- End Preheader -->

Add your custom preheader text by removing Add Preheader Text Here (85-100 characters in length).

Let's continue with changing the logo and nav links section

Logo

<tr>
    <td style="padding:0; ">
        <table width="100%" style="border-spacing:0; padding-top:15px;padding-right:15px;padding-bottom:0;padding-left:15px;" role="presentation">

            <tr>
                <td  style="background-color: #F0DFCD;padding: 20px 0 5px 0;text-align: center;">
                    <a href="example.com" target="_blank">
                        <a href="example.com"><img src="i.ibb.co/mB53XZF/Logo.png" alt="logo" width="125" style="border-width:0;max-width: 165px;border-radius: 3px;"></a>
                    </a>
                </td>
            </tr>

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

Let's begin by linking your logo to your preferred website by enclosing your link between the href="" attribute in a, then change the logo image by putting the hosted URL of your image in the src attribute of the image tag.

Navbar Links

<table class="column " style="border-spacing:0;width:100%;max-width:330px;display:inline-block;vertical-align:top;" role="presentation">
   <tr>
      <td class="padding px-600-0" style="padding-top:18px;padding-right:15px;padding-bottom:0;padding-left:0;">
         <table class="content " style="border-spacing:0;font-size:15px;font-weight:bold;text-align:center;" role="presentation">
            <tr>
               <td class="padding content" style="padding-top:10px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:100px;font-size:15px;font-weight: bold;">
                  <p style="font-size:15px;font-weight:bold;Margin:0;display: inline;"><a href="example.com" target="_blank"  style="text-decoration: none;color: #26292B;">Shop</a></p>
               </td>

               <td class="padding content" style="padding-top:10px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:100px;font-size:15px;font-weight: bold;">
                  <p style="font-size:15px;font-weight:bold;Margin:0;display: inline;"><a href="example.com" target="_blank"  style="text-decoration: none;color: #26292B;">About Us</a></p>
               </td>

               <td class="padding content" style="padding-top:10px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:100px;font-size:15px;font-weight: bold;">
                  <p style="font-size:15px;font-weight:bold;Margin:0;display: inline;"><a href="example.com" target="_blank"  style="text-decoration: none;color: #26292B;">Account</a></p>
               </td>

            </tr>

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

The only change that needs to be made, is on the links redirecting to your selected web pages and their corresponding alias, in the a tag look for the href attribute and that's where to change the link and the alias representing that link and rename it.

Hero Section

<tr>
   <td class="padding-sm" style="padding-top:15px;padding-right:20px;padding-bottom:20px;padding-left:20px; text-align: center;">
      <p style="font-size: 25px;font-weight: bold;  Margin: 0; color: #26292B;  ">25% Off.</p>
      <p style="font-size: 25px;font-weight: bold;  Margin: 0; color: #26292B;  ">Claim Yours Today</p>
   </td>
</tr>

<tr>
   <td class="padding-sm" style="padding-top:0;padding-right:20px;padding-bottom: 20px;padding-left:20px; text-align: center;">
      <p style="font-size: 15px;  Margin: 0; color: #26292B;">Don't be left out on the trends. SpacceJKgives you an opportunity to change your look, so you'll leave a good impression wherever you go. Enjoy this offer of 50% Off before it ends.</p>
   </td>
</tr>

Change the text on this section by replacing words in the p tag.

Button

<tr>
   <td  class="padding-sm" style="padding-top:0;padding-right:20px;padding-bottom:40px;padding-left:20px; text-align: center;">
      <a class="atag_1" href="example.com" target="_blank" style="font-size: 12px;font-weight: 500;text-decoration: none; color: #26292B;padding:5px 17px;display: inline-block; border: 2px solid #FFFFFF;">
         <p style="Margin:0;border: 1px solid transparent; Padding: 10px 20px;">Save 30% Off</p>
      </a>
   </td>
</tr>