قوالب HTML للبريد الإلكتروني مجاناً

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Newsletter</title>
</head>
<body style="margin:0;padding:0;background-color:#f4f4f5;font-family:Arial,Helvetica,sans-serif;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f5;">
    <tr>
      <td align="center" style="padding:40px 20px;">
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="background-color:#ffffff;border-radius:8px;overflow:hidden;">
          <!-- Header -->
          <tr>
            <td style="background-color:#16a34a;padding:30px 40px;text-align:center;">
              <h1 style="margin:0;color:#ffffff;font-size:28px;font-weight:bold;">Your Newsletter</h1>
              <p style="margin:8px 0 0;color:#bbf7d0;font-size:14px;">Monthly updates and insights</p>
            </td>
          </tr>
          <!-- Main Content -->
          <tr>
            <td style="padding:40px;">
              <h2 style="margin:0 0 16px;color:#18181b;font-size:22px;">Featured Article</h2>
              <p style="margin:0 0 20px;color:#52525b;font-size:15px;line-height:1.6;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
              <a href="#" style="display:inline-block;background-color:#16a34a;color:#ffffff;text-decoration:none;padding:12px 24px;border-radius:6px;font-size:14px;font-weight:bold;">Read More</a>
              <hr style="margin:30px 0;border:none;border-top:1px solid #e4e4e7;">
              <h2 style="margin:0 0 16px;color:#18181b;font-size:22px;">More Stories</h2>
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
                <tr>
                  <td style="padding:12px 0;border-bottom:1px solid #f4f4f5;">
                    <h3 style="margin:0 0 4px;color:#18181b;font-size:16px;">Story Title One</h3>
                    <p style="margin:0;color:#71717a;font-size:13px;">Brief description of the first story goes here.</p>
                  </td>
                </tr>
                <tr>
                  <td style="padding:12px 0;border-bottom:1px solid #f4f4f5;">
                    <h3 style="margin:0 0 4px;color:#18181b;font-size:16px;">Story Title Two</h3>
                    <p style="margin:0;color:#71717a;font-size:13px;">Brief description of the second story goes here.</p>
                  </td>
                </tr>
                <tr>
                  <td style="padding:12px 0;">
                    <h3 style="margin:0 0 4px;color:#18181b;font-size:16px;">Story Title Three</h3>
                    <p style="margin:0;color:#71717a;font-size:13px;">Brief description of the third story goes here.</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- Footer -->
          <tr>
            <td style="background-color:#f4f4f5;padding:24px 40px;text-align:center;">
              <p style="margin:0;color:#71717a;font-size:12px;">You received this email because you subscribed to our newsletter.</p>
              <p style="margin:8px 0 0;color:#71717a;font-size:12px;"><a href="#" style="color:#16a34a;">Unsubscribe</a> | <a href="#" style="color:#16a34a;">View in browser</a></p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>