<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title>Target Promo</title>
<!--[if mso]>
    <noscript>
        <xml>
            <o:OfficeDocumentSettings>
                <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
    </noscript>
    <![endif]-->
    <style>
        table, td, div, h1, p {font-family: Arial, sans-serif;}
        table, td {border:0px solid#000000!important;width:600px;height:auto;center;}
    
      
   <!-- DESKTOP MEDIA QUERY --> 
      @media screen and (max-width: 800px) {
  .main-table {
    flex: 100% !important;
    max-width: 100% !important;
    
  }
}
      @media screen and (max-width: 800px) {
  .first-bar {
    flex: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}
           @media screen and (max-width: 800px) {
  .health-check{
    flex: 50% !important;
    max-width: 50% !important;
    
  }
}
         @media screen and (max-width: 800px) {
  .info-table {
    flex: 100% !important;
    max-width: 100% !important;
  }
}
        @media screen and (max-width: 800px) {
  .info-two{
    flex: 50% !important;
    max-width: 50% !important;
    padding: 5px !important;
  }
}
      @media screen and (max-width: 600px) {
  .footer {
    flex: 50% !important;
    max-width: 50% !important;
    text-align: center !important;
  }
} 
     <!-- END -->
      
      
<!-- HANDHELD DEVICES MEDIA QUERY -->
@media screen and (max-width: 600px) {
  .main-table {
    flex: 100% !important;
    max-width: 100% !important;
  }
}
      
  @media screen and (max-width: 600px) {
  .first-bar {
    flex: 50% !important;
    max-width: 50% !important;
    text-align: center !important;
    
  }
}    
      @media screen and (max-width: 600px) {
  .health-check {
    flex: 50% !important;
    max-width: 50% !important;
  }
}
      
     @media screen and (max-width: 600px) {
  .info-table{
    flex: 50% !important;
    max-width: 50% !important;
    
  }
}     
   
        @media screen and (max-width: 600px) {
  .info-two{
    flex: 50% !important;
    max-width: 50% !important;
    padding: 5px !important;
  }
}     
     
      
    
       @media screen and (max-width: 600px) {
  .footer {
    flex: 50% !important;
    max-width: 50% !important;
    text-align: center !important;
  }
} 
      
     <!-- END -->
      
     
    </style>
</head>
  
  <body>
    <!-- START OF MAIN TABLE -->
    <table>
      <tr>
        
       <td>
         <!-- START 600PX TABLE -->
        <table class="main-table" style="width:600;align:center;border:0;">
          
          <tr>
            <td>
              <!-- START OF FIRST BAR TABLE -->
              <table class="first-bar" style="padding:1px 1px 1px 1px;width:100%;height:auto;text-align:center;background-color:#5a6773;">
                <tr>
                  <td style="color:#ffffff;">
              <p>Are your emails in need of some TLC?</p>
                  
                  </td>
                </tr>
                <!-- END OF FIRST BAR TABLE -->
              </table>
              
               <!-- START OF HEALTH CHECK TABLE -->
              <table class="health-check" style="padding:10px;width:100%;height:auto;align:center;background-color:#fafaf8;">
                <tr>
                  <td>
                    <img style="display:block;margin-left:auto;margin-right:auto;width:50%;" src="https://i.postimg.cc/prBp1cpH/World-Health-Day-2-Illustration-Agnytemp-copy.png" alt="World Health Day">
                    <p style="padding:20px 10px 0px 10px;text-align:center;font-size:20px;font-family: 'Montserrat', sans-serif;color:#5db285;">EMAIL HEALTH CHECK</p>
                    
                    <p style="padding:5px 20px;text-align:center;font-size:15px;font-family: 'Montserrat', sans-serif;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quis corporis enim voluptatibus vel dolores blanditiis maiores ullam praesentium. Molestias reprehenderit provident adipisci tenetur vel magni quod illo. Tenetur totam quisquam minima omnis? Consequatur alias asperiores cupiditate iure magnam error!</p>
                    
          </td>
                </tr>
                <!-- END OF HEALTH CHECK TABLE -->
              </table>
              
               <!-- START 1ST INFO TABLE -->
              <table class="info-table" style="width:100%;height:auto;background-color:#dadacb;">
                <tr>
                  <td>
               <p style="padding:5px 20px;text-align:center;font-size:15px;font-family: 'Montserrat', sans-serif;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quo minima molestiae labore ipsum! Dignissimos voluptatum assumenda quasi! Voluptates, quasi sit sapiente voluptatum quidem hic magni vitae ducimus.
                   </p>
            
                  </td>
                  
                </tr>
                
                <!-- END 1ST INFO TABLE -->
              </table>
              
             
   
              <!-- START OF 2ND INFO TABLE -->
              <table class="info-two" style="padding:5px 20px;text-align:center;font-size:15px;font-family: 'Montserrat', sans-serif;background-color:#fafaf8;">
                <tr>
                  <td>
                    <p style="font-size:20px;color:#5db285;">SUBSCRIBE</p>
   <p style="padding:1px 20px;text-align:center;font-size:15px;font-family: 'Montserrat', sans-serif;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis deserunt eos voluptatum delectus tenetur.</p>           
                    
                  </td>
                </tr>
                
                <!-- END OF 2ND INFO TABLE -->
              </table>
              
              <!-- START FOOTER TABLE -->
              <table class="footer" style="width:100%;height:auto;padding:10px 20px 0 20px;margin:5px;background-color:#5a6773;">
                <tr>
                  <td style="width:50%;">
              <p style="text-align:center;font-size:13px;">
                The Orchard<br>
                24-679 Saint Stevens Street<br>
                Calgary, AB<br><br>
                    </p>                                           
                 
                  </td>
             
                
                </tr>
                <!-- END FOOTER TABLE -->
              </table>
            </td>
            
          </tr>
           <!-- END 600PX TABLE --> 
        </table>
          
        </td>
        
       
      </tr>
     
       <!-- END OF MAIN TABLE -->
    </table>
   
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.