Zurb Foundation. Code html email

Home » Tutorials » HTML and CSS » Zurb Foundation. Code html email
In last lesson we learnt foundation css framework. But it has another one necessary and powerful tool – the framework for emails. Today we’ll make simple html email template with sending it through php.
Html email coding is pain for developers. You need use tables in this process. There are another features and problems you should know. Zurb foundation lets you to create html more quickly. It has also several build-in templates.
For sending email php mail function uses.

Code lesson (html email)


<!-- Emails use the XHTML Strict doctype -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width"/>
  <style>
    .main-background {
      background-color: #7c4dff !important;
    }
  </style>
</head>

<body>
  <table class="body" data-made-with-foundation>
    <tr>
      <td class="float-center" align="center" valign="top">
        <center>
            <table align="center" class="container main-background">
              <tbody>
                <tr>
                  <td style="padding-top: 50px; padding-bottom: 50px;">
                    <h1 style="text-align: center;"><a style="color: #fff;" href="http://kamil-abzalov.ru" data-et-target-link="_blank">kamil-abzalov.ru</a></h1>  
                  </td>
                </tr>
              </tbody>
            </table>
            <table class="container">
              <tr>
                <td>
                  <table class="menu">
                    <tr>
                      <td>
                        <table style="margin-left: auto; margin-right: auto;">
                          <tr>
                            <th class="menu-item"><a href="http://vk.com/kamabzalov">ВК Камиля</a></th>
                            <th class="menu-item"><a href="http://kamil-abzalov.ru">Сайт Камиля</a></th>
                            <th class="menu-item"><a href="https://github.com/kamabzalov">Github Камиля</a></th>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table class="spacer">
                  <tbody>
                    <tr>
                      <td height="50px" style="font-size:50px;line-height:50px;"> </td>
                    </tr>
                  </tbody>
                </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table class="row">
                  <tr>
                    <td class="large-6 columns first">
                      <img style="width: 250px;" src="http://kamil-abzalov.ru/wp-content/uploads/2017/02/phto-1.jpg" alt="" />
                    </td>
                    <td class="large-6 columns last" style="vertical-align: middle">
                      <h2>Камиль Абзалов</h2>
                      <p>Лучшие уроки Камиля Абзалова по версии Камиля Абзалова</p>
                    </td>
                  </tr>
                </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table class="spacer">
                  <tbody>
                    <tr>
                      <td height="50px" style="font-size:50px;line-height:50px;"> </td>
                    </tr>
                  </tbody>
                </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table class="button" style="margin-left: auto; margin-right: auto;">
                    <tr>
                      <td>
                        <table>
                          <tr >
                            <td style="border-color: #7c4dff !important;">
                              <a class="main-background" href="http://kamil-abzalov.ru">Посмотреть сайт</a></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                </table>
                </td>
              </tr>
              <tr>
                <td>                
                <table class="callout">
                  <tr>
                    <th class="callout-inner primary">
                      <table class="row">
                        <tbody>
                          <tr>
                            <th class="small-12 large-12 columns first last" style="padding-bottom: 0;">
                              <table>
                                <tr>
                                  <th>
                                    <p style="margin-bottom: 0;">Это очень крутой сайт</p>
                                  </th>
                                </tr>
                              </table>
                            </th>
                          </tr>
                        </tbody>
                      </table>
                    </th>
                  </tr>
                </table>
                </td>
              </tr>
            </table>
        </center>
      </td>
    </tr>
  </table>
</body>
</html>

Code lesson (mail.php)

<?php

$mailTpl = file_get_contents('mail.html');

$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";

$emails = ['ok_kam90@mail.ru', 'abzalov90@gmail.com', 'mail@kamil-abzalov.ru'];

foreach ($emails as $email) {
	mail($email, "Тема письма", $mailTpl, $headers);
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

Pin It on Pinterest

Share This