Friday, 9 August 2013

Use round corners without gif and add background color on top and underneath instead of gif

Use round corners without gif and add background color on top and
underneath instead of gif

I am trying to create an email template. For the bottom and top headers I
wish to use round corners but the only way that I have managed to do this
now is using gif files...How can I do this without on the code below ?
(Right now the table border is incomplete up and down, not closed). Also I
have tried adding a gif image in the center
<td valign="top" align="center"><img src="file:///C|/Users/the/Desktop/my
GIF.gif" width="288" height="146"></td>
And I would like to have background color around the edges or behind the
image considering that it is transparent - and also on the bottom.
Any other edits on this Template more than welcome.
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base target="_blank">
<title>==</title>
</head><body>
<table width="614" border="0" align="center" cellpadding="0"
cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;
font-size:12px; color:#656565;">
<tbody><tr>
<td valign="top" align="center"><img
src="file:///C|/Users/the/Desktop/my GIF.gif" width="288"
height="146"></td>
</tr>
<tr>
<td valign="top" style="border-left:1px solid
#cbd6dc;border-right:1px solid #cbd6dc; padding:0 18px 20px;
text-align:left;">
<table width="576" border="0" cellspacing="0"
cellpadding="0" style="font-family:Arial, Helvetica,
sans-serif; font-size:12px;">
<tbody><tr>
<td valign="top" style="font-size:14px; padding:10px 0
15px; font-weight:bold">Hello user,<br></td>
</tr>
<tr>
<td valign="top" style="font-size:19px; padding:10px 0
16px 0; text-align:center;color:#449AC2;
">Congragulations ! </td>
</tr>
<tr>
<td valign="top" style=" padding:0 0 15px;">
<table style="width:554px; border:#d3dde2 1px
solid; background:#eef3f6;" border="0"
align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="top"><div
style="font-size:12px; padding:16px
25px 0 0; line-height:20px;
text-align:left;padding-bottom:20px;"><a
href="http://www.website.com/signup?sname=zmail23&amp;ISP=gmail&amp;invitation_key=201307f998225213537deb9e8a3c5930&amp;tt=773&amp;sub=755&amp;referral=bacorichard&amp;tp=8&amp;hr=2013072111&amp;cid=23&amp;source=5"
style=" color:#666;
text-decoration:none">.
<p>Congragulations my text here <br>
<br>
</p></a></div><a
href="http://www.website.com/signup?sname=zmail23&amp;ISP=gmail&amp;invitation_key=201307f998225213537deb9e8a3c5930&amp;tt=773&amp;sub=755&amp;referral=bacorichard&amp;tp=8&amp;hr=2013072111&amp;cid=23&amp;source=5"
style=" color:#666;
text-decoration:none"></a></td>
</tr>
<tr>
<td valign="bottom" style="padding:0 0
50px 0"><a target="_blank" style="
border:2px solid #fff; padding:5px
6px; background:#f7b225;
color:#ffffff; font-size: 16px;
font-weight: bold; text-align:
center;text-decoration:none; "
href="http://www.website.com/signup?sname=zmail23&amp;ISP=gmail&amp;invitation_key=201307f998225213537deb9e8a3c5930&amp;tt=773&amp;sub=755&amp;referral=bacorichard&amp;tp=8&amp;hr=2013072111&amp;cid=23&amp;source=5">
Take me there</a></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td valign="top" style="padding-bottom:18px;">
<div style="font-family:Arial, Helvetica,
sans-serif; font-size:14px; text-align:left;
padding:0 ; margin:0;color:#656565">Regards,</div>
<div style="font-family:Arial, Helvetica,
sans-serif; font-size:14px; text-align:left;
padding:0; margin:0;color:#656565">The Team</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td valign="top" style="font-size:11px; font-family:Arial,
Helvetica, sans-serif; line-height:16px; padding:10px 0;
background:#f6f7fa;border-left:1px solid #cbd6dc;border-right:1px
solid #cbd6dc;border-top:1px solid #cbd6dc; padding:15px 18px 0
18px; text-align:center;">
</td>
</tr>
<tr>
<td valign="top"><img align="top" src="width=&quot;614&quot;"
height="23"> </td>
</tr>
</tbody></table>
<img
src="http://signup.website.com/signup/open_invitation/2013072111/773/755/23/8?isp=gmail&amp;source=5"
style="display:none;visibility:hidden;" height="0" width="0/">
</body></html>

No comments:

Post a Comment