私は周りを読んでいますが、メディアクエリが機能している状態で HTML メール検証メールを送信する方法を見つけることができないようです. これは本当ですか？または、mail()関数を使用して、レスポンシブを念頭に置いて送信できますか。私がこれまでに得たものは、これが私が自分自身を始めるためだけに購入したテンプレートであることを覚えておいてください.
混乱して申し訳ありませんが、正確に投稿することを確認したかったのです。これはひどい内容のサンプル テンプレートであり、あらかじめお詫び申し上げます。
$subject = 'Account Activation';
$message = '
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title>Responsive Minimalist Email Tempate - Rolas Layout1 Orange</title>
<style type="text/css">
html
{
width: 100%;
}
body {
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
.ReadMsgBody
{
width: 100%;
background-color: #f8f8f8;
}
.ExternalClass
{
width: 100%;
background-color: #f8f8f8;
}
p, div {
margin: 0;
}
table {
border-collapse: collapse;
}
@media screen and (max-width: 640px) {
body{width:auto !important;}
table table{width:100%!important; }
table[class="table-660"] {width: 460px !important; }
img[class="img-660"] {width: 460px !important; line-height: 0 !important;}
img[class="img-radius"] {width: 460px !important; height: 10px !important; line-height: 0 !important;}
td[class="one-half-first"] {width: 400px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-right: 30px !important;}
td[class="one-half-last"] {width: 400px !important; display: block !important; text-align: center !important; padding-left: 30px !important;}
td[class="one-half-icon-first"] {width: 400px !important; display: block !important; text-align: left !important; padding-bottom: 0px !important; padding-right: 30px !important;}
td[class="one-half-icon-last"] {width: 400px !important; display: block !important; text-align: left !important; padding-left: 30px !important;}
td[class="one-third"] {width: 400px !important; display: block !important; text-align: center !important; padding-bottom: 10px !important; padding-right: 30px !important;}
td[class="one-third-middle"] {width: 400px !important; display: block !important; text-align: center !important; padding-bottom: 10px !important; padding-left: 30px !important; padding-right: 30px !important;}
td[class="one-third-last"] {width: 400px !important; display: block !important; text-align: center; padding-left: 30px !important; }
img[class="pro-img-180"] {width: 400px !important;}
td[class="one-fourth-right"] {width: 150px !important; text-align: left !important; padding-bottom: 0px !important;}
td[class="three-fourth-left"] {width: 250px !important; text-align: left !important; padding-bottom: 0px !important;}
td[class="three-fourth-left-last"] {width: 250px !important; text-align: left !important; padding-bottom: 40px !important;}
td[class="one-fourth-right-last"] {width: 150px !important; text-align: left !important; padding-bottom: 40px !important;}
img[class="img-180"] {width: 150px !important;}
td[class="one-fourth-left"] {width: 150px !important; text-align: left !important; padding-bottom: 0px !important;}
td[class="three-fourth-right"] {width: 250px !important; text-align: left !important; padding-bottom: 0px !important;}
td[class="three-fourth-right-last"] {width: 250px !important; text-align: left !important; padding-bottom: 40px !important;}
td[class="one-fourth-left-last"] {width: 150px !important; text-align: left !important; padding-bottom: 40px !important;}
img[class="img-180"] {width: 150px !important;}
img[class="img-285"] {width: 400px !important; text-align: center !important;}
table[class="left-content"] {width: 220px !important; text-align: left !important; }
td[class="left-content"] {width: 220px !important; text-align: left !important; }
img[class="img-blog"] {width: 220px !important;}
img[class="divider-350"] {width: 220px !important; height:1px !important}
table[class="right-sidebar"] {width: 150px !important; text-align: left !important; }
td[class="right-sidebar"] {width: 150px !important; text-align: left !important; }
img[class="img-gallery"] {width: 110px !important;}
img[class="divider-220"] {width: 150px !important; height:2px !important}
table[class="right-content"] {width: 220px !important; text-align: left !important; }
td[class="right-content"] {width: 220px !important; text-align: left !important; }
img[class="img-blog"] {width: 220px !important;}
img[class="divider-350"] {width: 220px !important; height:1px !important}
table[class="left-sidebar"] {width: 150px !important; text-align: left !important; }
td[class="left-sidebar"] {width: 150px !important; text-align: left !important; }
img[class="img-gallery"] {width: 110px !important;}
img[class="divider-220"] {width: 150px !important; height:2px !important}
}
@media screen and (max-width: 568px) {
body{width:auto !important;}
table table{width:100%!important; }
table[class="table-660"] {width: 460px !important; }
img[class="img-660"] {width: 460px !important; line-height: 0 !important;}
img[class="img-radius"] {width: 460px !important; height: 10px !important; line-height: 0 !important;}
td[class="one-half-first"] {width: 400px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-right: 30px !important;}
td[class="one-half-last"] {width: 400px !important; display: block !important; text-align: center !important; padding-left: 30px !important;}
td[class="one-half-icon-first"] {width: 400px !important; display: block !important; text-align: left !important; padding-bottom: 0px !important; padding-right: 30px !important;}
td[class="one-half-icon-last"] {width: 400px !important; display: block !important; text-align: left !important; padding-left: 30px !important;}
td[class="one-third"] {width: 400px !important; display: block !important; text-align: center !important; padding-bottom: 10px !important; padding-right: 30px !important;}
td[class="one-third-middle"] {width: 400px !important; display: block !important; text-align: center !important; padding-bottom: 10px !important; padding-left: 30px !important; padding-right: 30px !important;}
td[class="one-third-last"] {width: 400px !important; display: block !important; text-align: center; padding-left: 30px !important; }
img[class="pro-img-180"] {width: 400px !important;}
td[class="one-fourth-right"] {width: 150px !important; text-align: left !important; padding-bottom: 0px !important;}
td[class="three-fourth-left"] {width: 250px !important; text-align: left !important; padding-bottom: 0px !important;}
td[class="three-fourth-left-last"] {width: 250px !important; text-align: left !important; padding-bottom: 40px !important;}
td[class="one-fourth-right-last"] {width: 150px !important; text-align: left !important; padding-bottom: 40px !important;}
img[class="img-180"] {width: 150px !important;}
td[class="one-fourth-left"] {width: 150px !important; text-align: left !important; padding-bottom: 0px !important;}
td[class="three-fourth-right"] {width: 250px !important; text-align: left !important; padding-bottom: 0px !important;}
td[class="three-fourth-right-last"] {width: 250px !important; text-align: left !important; padding-bottom: 40px !important;}
td[class="one-fourth-left-last"] {width: 150px !important; text-align: left !important; padding-bottom: 40px !important;}
img[class="img-180"] {width: 150px !important;}
img[class="img-285"] {width: 400px !important; text-align: center !important;}
table[class="left-content"] {width: 220px !important; text-align: left !important; }
td[class="left-content"] {width: 220px !important; text-align: left !important; }
img[class="img-blog"] {width: 220px !important;}
img[class="divider-350"] {width: 220px !important; height:1px !important}
table[class="right-sidebar"] {width: 150px !important; text-align: left !important; }
td[class="right-sidebar"] {width: 150px !important; text-align: left !important; }
img[class="img-gallery"] {width: 110px !important;}
img[class="divider-220"] {width: 150px !important; height:2px !important}
table[class="right-content"] {width: 220px !important; text-align: left !important; }
td[class="right-content"] {width: 220px !important; text-align: left !important; }
img[class="img-blog"] {width: 220px !important;}
img[class="divider-350"] {width: 220px !important; height:1px !important}
table[class="left-sidebar"] {width: 150px !important; text-align: left !important; }
td[class="left-sidebar"] {width: 150px !important; text-align: left !important; }
img[class="img-gallery"] {width: 110px !important;}
img[class="divider-220"] {width: 150px !important; height:2px !important}
}
@media screen and (max-width: 479px) {
body{width:auto !important;}
table table{width:100%!important; }
table[class="table-660"] {width: 300px !important; }
td[class="logo"] {width: 240px !important; display: block !important; padding-bottom: 0px !important;}
td[class="social"] {width: 240px !important; display: block !important; }
img[class="img-660"] {width: 300px !important; line-height: 0 !important;}
img[class="img-radius"] {width: 300px !important; height: 10px !important; line-height: 0 !important;}
td[class="one-half-first"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-right: 30px !important;}
td[class="one-half-last"] {width: 240px !important; display: block !important; text-align: center !important; padding-left: 30px !important;}
td[class="one-half-icon-first"] {width: 240px !important; display: block !important; text-align: left !important; padding-bottom: 0px !important; padding-right: 30px !important;}
td[class="one-half-icon-last"] {width: 240px !important; display: block !important; text-align: left !important; padding-left: 30px !important;}
td[class="one-third"] {width: 240px !important; display: block !important; text-align: center; padding-bottom: 10px !important; padding-right: 30px !important;}
td[class="one-third-middle"] {width: 240px !important; display: block !important; text-align: center; padding-bottom: 10px !important; padding-left: 30px !important; padding-right: 30px !important;}
td[class="one-third-last"] {width: 240px !important; display: block !important; text-align: center; padding-left: 30px !important;}
img[class="pro-img-180"] {width: 240px !important;}
img[class="img-285"] {width: 240px !important; text-align: center !important;}
td[class="three-fourth-left"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-right: 30px !important;}
td[class="one-fourth-right"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-left: 30px !important;}
td[class="three-fourth-left-last"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important; padding-right: 30px !important;}
td[class="one-fourth-right-last"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 40px !important; padding-left: 30px !important;}
img[class="img-180"] {width: 240px !important; text-align: center !important;}
td[class="one-fourth-left"] {width: 240px !important; display: block !important; text-align: left !important; padding-bottom: 0px !important;}
td[class="three-fourth-right"] {width: 240px !important; display: block !important; text-align: left !important; padding-bottom: 0px !important; padding-left: 30px !important;}
td[class="three-fourth-right-last"] {width: 240px !important; display: block !important; text-align: left !important; padding-bottom: 40px !important; padding-left: 30px !important;}
td[class="one-fourth-left-last"] {width: 240px !important; display: block !important; text-align: left !important; padding-bottom: 40px !important;}
img[class="img-180"] {width: 240px !important;display: block !important; }
table[class="left-content"] {width: 240px !important; margin: 0; text-align: left !important; padding-bottom: 40px !important; display: block !important;}
td[class="left-content"] {width: 240px !important; margin: 0; text-align: left !important; display: block !important; }
img[class="img-blog"] {width: 240px !important; display: block !important;}
img[class="divider-350"] {width: 240px !important; height:1px !important display: block !important;}
table[class="right-sidebar"] {width: 240px !important; text-align: center !important; display: block !important; }
table[class="right-sidebar-last"] {width: 240px !important; text-align: center !important; margin-bottom: 40px !important; display: block !important; }
td[class="right-sidebar"] {width: 240px !important; text-align: left !important; display: block !important; }
img[class="img-gallery"] {width: 200px !important; display: block !important;}
img[class="divider-220"] {width: 240px !important; height:2px !important display: block !important;}
table[class="right-content"] {width: 240px !important; margin: 0 !important; text-align: right !important; padding-left: 30px !important; padding-bottom: 40px !important; display: block !important;}
td[class="right-content"] {width: 240px !important; margin: 0 !important; text-align: left !important; display: block !important; }
img[class="img-blog"] {width: 240px !important; display: block !important;}
img[class="divider-350"] {width: 240px !important; height:1px !important display: block !important;}
table[class="left-sidebar"] {width: 240px !important; text-align: center !important; display: block !important; }
table[class="left-sidebar-last"] {width: 240px !important; text-align: center !important; margin-bottom: 40px !important; display: block !important; }
td[class="left-sidebar"] {width: 240px !important; text-align: left !important; display: block !important; }
img[class="img-gallery"] {width: 200px !important; display: block !important;}
img[class="divider-220"] {width: 240px !important; height:2px !important display: block !important;}
td[class="footer-left"] {width: 240px !important; display: block !important; text-align: center !important; padding-bottom: 0px !important;}
td[class="footer-right"] {width: 240px !important; display: block !important; text-align: center !important; }
}
</style>
</head>
<body bgcolor="#f8f8f8">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f8f8f8">
<tr>
<td align="center">
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f8f8f8" style="padding:0; margin: 0; ">
<tr>
<td bgcolor="#f8f8f8" align="left" style="padding: 30px 0px 10px 0px; font-size:12px ; font-family: Helvetica, Arial, sans-serif; line-height: 22px; font-style: italic;">
<span>
<a class="top-link" href="#">View online</a>
<a class="top-link" href="#">Forward to friends</a>
</span>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
<tr>
<td class="logo" colspan="2" width="330" bgcolor="#ffffff" align="left" valign="top" style="padding: 30px; font-size:12px ; font-family: Helvetica, Arial, sans-serif; line-height: 22px; font-style: italic;">
<span>
<a href="#" style="color:#ffffff;">
<img src="http://www.fruitfore.st/images/logo.jpg" alt="logo" />
</a>
</span>
</td>
<td class="social" colspan="2" width="330" bgcolor="#ffffff" align="right" valign="middle" style="padding: 30px; font-size:12px ; font-family: Helvetica, Arial, sans-serif; line-height: 22px; font-style: italic;">
<span>
<a href="#" style="color:#ffffff;">
<img src="http://www.fruitfore.st/images/facebook.jpg" alt="facebook" border="0" />
</a>
<a href="#" style="color:#ffffff;">
<img src="http://www.fruitfore.st/images/twitter.jpg" alt="twitter" border="0" />
</a>
<a href="#" style="color:#ffffff;">
<img src="http://www.fruitfore.st/images/youtube.jpg" alt="youtube" border="0" />
</a>
<a href="#" style="color:#ffffff;">
<img src="http://www.fruitfore.st/images/linkedin.jpg" alt="linkedin" border="0" />
</a>
<a href="#" style="color:#ff8b1d;">
<img src="http://www.fruitfore.st/images/dribbble.jpg" alt="dribbble" border="0" />
</a>
</span>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff8b1d" style="padding:0; margin: 0; ">
<tr>
<td width="660" bgcolor="#ff8b1d" align="left" valign="top" style="padding: 30px; font-size:32px ; font-family: Helvetica, Arial, sans-serif; line-height: 42px; color:#ffffff;">
<span>
Please click this link to activate your account. http://www.fruitfore.st/activateuser.php?usr=' . $username . '&token=' . $token . '
</span>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff8b1d" style="padding:0; margin: 0; ">
<tr>
<td width="660" bgcolor="#ff8b1d" align="center" style="padding: 0; font-size:32px ; font-family: Helvetica, Arial, sans-serif; line-height: 0 !important; color:#ffffff; text-transform: uppercase;">
<a href="#" style="color:#ffffff;">
<img class="img-660" src="http://www.fruitfore.st/images/featured-image.jpg" alt="featured-image" border="0" />
</a>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
<tr>
<td width="660" bgcolor="#ffffff" align="left" style="padding: 40px 30px ; font-size:16px ; font-family: Helvetica, Arial, sans-serif; line-height: 26px; color:#aaaaaa; ">
<p>
Hello, we are happy to announce our latest services features of <span style="background:#fff7a8; font-style: italic;">Rolas theme</span>.
Ut quas omnes animal his. Ei vis esse consetetur repudiandae, duo ad
ullum eligendi. Saepe utinam intellegebat mei ad <a href="#">read on</a>
</p>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
<tr>
<td width="660" bgcolor="#ffffff" align="center" style="padding: 0px; ">
<span>
<img class="img-660" src="http://www.fruitfore.st/images/divider-660.jpg" alt="divider-660" border="0" />
</span>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
<tr>
<td class="one-half-first" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding: 40px 30px 45px 30px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px; color:#aaaaaa;">
<p>
<a href="#" style="color:#ffffff;">
<img class="img-285" src="http://www.fruitfore.st/images/img-285-180-1.jpg" alt="img-285-180-1" border="0" />
</a>
</p>
</td>
<td class="one-half-last" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding: 40px 30px 45px 0px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px; color:#aaaaaa;">
<p style="font-size: 20px; line-height: 30px; color:#818181; text-transform: uppercase;">
mobile devices friendly
</p>
<p>
Lorem ipsum dolor sit amet, adipiscing elit. Nulla fringilla auctor sem, sit amet tristique odio dictum quis neque diam, ornare ac blandit consequat, ultrices nec justo.
</p>
<br />
<p>
<a href="#" style="color:#ffffff; text-transform: uppercase; background:#ff8b1d; font-style: normal; border-top: 10px solid #ff8b1d; border-right: 15px solid #ff8b1d; border-bottom: 10px solid #ff8b1d; border-left: 15px solid #ff8b1d;">
coded button
</a>
</p>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
<tr>
<td width="660" bgcolor="#ffffff" align="center" style="padding: 0px; ">
<span>
<img class="img-660" src="http://www.fruitfore.st/images/divider-660.jpg" alt="divider-660" border="0" />
</span>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
<tr>
<td class="one-half-first" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding: 40px 30px 45px 30px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px; color:#aaaaaa;">
<p style="font-size: 20px; line-height: 30px; color:#818181; text-transform: uppercase;">
repeatable modules
</p>
<p>
Lorem ipsum dolor sit amet, adipiscing elit. Nulla fringilla auctor sem, sit amet tristique odio dictum quis neque diam, ornare ac blandit consequat, ultrices nec justo.
</p>
<br />
<p>
<a href="#" style="color:#ffffff; text-transform: uppercase; background:#ff8b1d; font-style: normal; border-top: 10px solid #ff8b1d; border-right: 15px solid #ff8b1d; border-bottom: 10px solid #ff8b1d; border-left: 15px solid #ff8b1d;">
read more here
</a>
</p>
</td>
<td class="one-half-last" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding: 40px 30px 45px 0px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px; color:#aaaaaa;">
<span>
<a href="#" style="color:#ffffff;">
<img class="img-285" src="http://www.fruitfore.st/images/img-285-180-2.jpg" alt="img-285-180-1" border="0" />
</a>
</span>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
<tr>
<td width="660" bgcolor="#ffffff" align="center" style="padding: 0px; ">
<span>
<img class="img-660" src="http://www.fruitfore.st/images/divider-660.jpg" alt="divider-660" border="0" />
</span>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
<tr>
<td class="one-half-first" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding: 40px 30px 40px 30px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px; color:#aaaaaa;">
<span>
<a href="#" style="color:#ffffff;">
<img class="img-285" src="http://www.fruitfore.st/images/img-285-180-3.jpg" alt="img-285-180-1" border="0" />
</a>
</span>
</td>
<td class="one-half-last" colspan="2" width="285" bgcolor="#ffffff" align="left" valign="top" style="padding: 40px 30px 40px 0px; font-size:14px ; font-family: Helvetica, Arial, sans-serif; line-height: 24px; color:#aaaaaa;">
<p style="font-size: 20px; line-height: 30px; color:#818181; text-transform: uppercase;">
very easy to use
</p>
<p>
Lorem ipsum dolor sit amet, adipiscing elit. Nulla fringilla auctor sem, sit amet tristique odio dictum quis neque diam, ornare ac blandit consequat, ultrices nec justo.
</p>
<br />
<p>
<a href="#" style="color:#ffffff; text-transform: uppercase; background:#ff8b1d; font-style: normal; border-top: 10px solid #ff8b1d; border-right: 15px solid #ff8b1d; border-bottom: 10px solid #ff8b1d; border-left: 15px solid #ff8b1d;">
coded button
</a>
</p>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
<tr>
<td width="660" bgcolor="#ffffff" align="center" style="padding: 0px; ">
<span>
<img class="img-660" src="http://www.fruitfore.st/images/divider-660.jpg" alt="divider-660" border="0" />
</span>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding:0; margin: 0; ">
<tr>
<td colspan="2" width="660" bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 30px 45px 30px ; font-size:20px ; font-family: Helvetica, Arial, sans-serif; line-height: 30px; color:#aaaaaa;">
<p style="font-size: 20px; line-height: 30px; color:#818181; text-transform: uppercase;">
what are you waiting for? hit the button below and get yours soon!
</p>
<br />
<p>
<a href="#" style="color:#ffffff; text-transform: uppercase; background:#ff8b1d; font-style: normal; border-top: 10px solid #ff8b1d; border-right: 15px solid #ff8b1d; border-bottom: 10px solid #ff8b1d; border-left: 15px solid #ff8b1d;">
download now
</a>
</p>
</td>
</tr>
</table>
<table class="table-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ececec" style="padding:0; margin: 0; ">
<tr>
<td class="footer-left" colspan="2" width="430" bgcolor="#ececec" align="left" valign="top" style="padding: 30px 15px 20px 30px; font-size:12px ; font-family: Helvetica, Arial, sans-serif; line-height: 14px; font-style: italic; color:#aaaaaa;">
<p>
You are receiving this email because you subscribed in at <a href="#">yoursite.com</a> to getting some special news, promotions, freebies.
Click here to <a href="#">unsubscribe</a> :(
</p>
<br />
<p>
Our mailing address is: <a href="#">yoursite.com</a>, P.O. Box 264, London, UK 57378
</p>
</td>
<td class="footer-right" colspan="2" width="200" bgcolor="#ececec" align="left" valign="top" style="padding: 30px 30px 20px 15px; font-size:12px ; font-family: Helvetica, Arial, sans-serif; line-height: 14px; font-style: italic; color:#aaaaaa;">
<p>
Copyright 2013 <a href="#">yourwebsite.com</a> all right reserved.
</p>
</td>
</tr>
</table>
<table class="tablbe-660" width="660" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f8f8f8" style="padding:0; margin: 0; ">
<tr>
<td width="660" bgcolor="#f8f8f8" align="center" style="padding-bottom: 30px; line-height: 0 !important;">
<span>
<img class="img-radius" src="http://www.fruitfore.st/images/image-radius.jpg" alt="image radius" border="0" />
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>'
;
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
// Additional headers
$headers .= 'From: FruitFore.st <welcome@fruitfore.st>' . "\r\n";
mail($email, $subject, $message, $headers);