Blame view

build/demo/email-contrast.html 8.44 KB
5a739853   patrick.he   commit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
  <!doctype html>
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <title></title>
    <style type="text/css">
   	body {
  		width: 100%;
  		margin: 0;
  		padding: 0;
  		-webkit-font-smoothing: antialiased;
  	}
  	@media only screen and (max-width: 600px) {
  		table[class="table-row"] {
  			float: none !important;
  			width: 98% !important;
  			padding-left: 20px !important;
  			padding-right: 20px !important;
  		}
  		table[class="table-row-fixed"] {
  			float: none !important;
  			width: 98% !important;
  		}
  		table[class="table-col"], table[class="table-col-border"] {
  			float: none !important;
  			width: 100% !important;
  			padding-left: 0 !important;
  			padding-right: 0 !important;
  			table-layout: fixed;
  		}
  		td[class="table-col-td"] {
  			width: 100% !important;
  		}
  		table[class="table-col-border"] + table[class="table-col-border"] {
  			padding-top: 12px;
  			margin-top: 12px;
  			border-top: 1px solid #E8E8E8;
  		}
  		table[class="table-col"] + table[class="table-col"] {
  			margin-top: 15px;
  		}
  		td[class="table-row-td"] {
  			padding-left: 0 !important;
  			padding-right: 0 !important;
  		}
  		table[class="navbar-row"] , td[class="navbar-row-td"] {
  			width: 100% !important;
  		}
  		img {
  			max-width: 100% !important;
  			display: inline !important;
  		}
  		img[class="pull-right"] {
  			float: right;
  			margin-left: 11px;
              max-width: 125px !important;
  			padding-bottom: 0 !important;
  		}
  		img[class="pull-left"] {
  			float: left;
  			margin-right: 11px;
  			max-width: 125px !important;
  			padding-bottom: 0 !important;
  		}
  		table[class="table-space"], table[class="header-row"] {
  			float: none !important;
  			width: 98% !important;
  		}
  		td[class="header-row-td"] {
  			width: 100% !important;
  		}
  	}
  	@media only screen and (max-width: 480px) {
  		table[class="table-row"] {
  			padding-left: 16px !important;
  			padding-right: 16px !important;
  		}
  	}
  	@media only screen and (max-width: 320px) {
  		table[class="table-row"] {
  			padding-left: 12px !important;
  			padding-right: 12px !important;
  		}
  	}
  	@media only screen and (max-width: 600px) {
  		td[class="table-td-wrap"] {
  			width: 100% !important;
  		}
  	}
    </style>
   </head>
   <body style="font-family: Arial, sans-serif; font-size:13px; color: #444444; min-height: 200px;" bgcolor="#113D68" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
   <table width="100%" height="100%" bgcolor="#113D68" cellspacing="0" cellpadding="0" border="0">
   <tr><td width="100%" align="center" valign="top" bgcolor="#113D68" style="background-color:#113D68; min-height: 200px;">
  <table><tr><td class="table-td-wrap" align="center" width="600"><table class="table-row" style="table-layout: auto; padding-right: 24px; padding-left: 24px; width: 580px; background-color: transparent;" bgcolor="transparent" width="580" cellspacing="0" cellpadding="0" border="0"><tbody><tr height="50px" style="font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; height: 50px; background-color: transparent;">
     <td class="table-row-td" style="height: 50px; padding-right: 16px; font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; vertical-align: middle;" valign="middle" align="left">
       <a href="#" style="color: #ffffff; text-decoration: none; padding: 0px; font-size: 18px; line-height: 20px; height: 50px; background-color: transparent;">
  	  Ace Newsletter
  	 </a>
     </td>
   
     <td class="table-row-td" style="height: 50px; font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; text-align: right; vertical-align: middle;" align="right" valign="middle">
       <a href="#" style="color: #93cbf9; text-decoration: none; background-color: transparent;">
  	   View inside browser
  	 </a>
     </td>
  </tr></tbody></table>
  
  
  <table class="table-space" height="16" style="height: 16px; font-size: 0px; line-height: 0; width: 580px; background-color: #ffffff;" width="580" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="table-space-td" valign="middle" height="16" style="height: 16px; width: 580px; background-color: #ffffff;" width="580" bgcolor="#FFFFFF" align="left">&nbsp;</td></tr></tbody></table>
  
  <table class="table-row" width="580" bgcolor="#FFFFFF" style="table-layout: fixed; background-color: #ffffff;" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="table-row-td" style="font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; padding-left: 24px; padding-right: 24px;" valign="top" align="left">
   <table class="table-col" align="left" width="532" cellspacing="0" cellpadding="0" border="0" style="table-layout: fixed;"><tbody><tr><td class="table-col-td" width="532" style="font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal;" valign="top" align="left">	
  	<div style="font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; text-align: center;">
  		<img src="http://placehold.it/530x270" style="border: 0px none #444444; vertical-align: middle; display: block; padding-bottom: 9px;" hspace="0" vspace="0" border="0">
  	</div>
   </td></tr></tbody></table>
  </td></tr></tbody></table>
  
  <table class="table-row" width="580" bgcolor="#FFFFFF" style="table-layout: fixed; background-color: #ffffff;" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="table-row-td" style="font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; padding-left: 36px; padding-right: 36px;" valign="top" align="left">
     <table class="table-col" align="left" width="508" cellspacing="0" cellpadding="0" border="0" style="table-layout: fixed;"><tbody><tr><td class="table-col-td" width="508" style="font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal;" valign="top" align="left">
  	 <table class="header-row" width="508" cellspacing="0" cellpadding="0" border="0" style="table-layout: fixed;"><tbody><tr><td class="header-row-td" width="508" style="font-size: 28px; margin: 0px; font-family: Arial, sans-serif; font-weight: normal; line-height: 19px; color: #478fca; padding-bottom: 10px; padding-top: 15px;" valign="top" align="left">Hi, Susan Calvin</td></tr></tbody></table>
  	 <div style="font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px;">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</div>
     </td></tr></tbody></table>
  </td></tr></tbody></table>
  <table class="table-space" height="12" style="height: 12px; font-size: 0px; line-height: 0; width: 580px; background-color: #ffffff;" width="580" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="table-space-td" valign="middle" height="12" style="height: 12px; width: 580px; background-color: #ffffff;" width="580" bgcolor="#FFFFFF" align="left">&nbsp;</td></tr></tbody></table>
  
  
  <table class="table-space" height="12" style="height: 12px; font-size: 0px; line-height: 0; width: 580px; background-color: #113d68;" width="580" bgcolor="#113D68" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="table-space-td" valign="middle" height="12" style="height: 12px; width: 580px; background-color: #113d68;" width="580" bgcolor="#113D68" align="left">&nbsp;</td></tr></tbody></table>
  <table class="table-row" width="580" bgcolor="transparent" style="table-layout: fixed; background-color: transparent;" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="table-row-td" height="45px" bgcolor="transparent" style="font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; height: 45px; padding-left: 24px; padding-right: 24px; background-color: transparent;" valign="top" align="left">
   <table class="table-col" align="left" width="532" cellspacing="0" cellpadding="0" border="0" style="table-layout: fixed;"><tbody><tr><td class="table-col-td" width="532" align="center" style="font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; text-align: center;" valign="top">
    <span style="font-family: Arial, sans-serif; line-height: 19px; color: #bbbbbb; font-size: 13px;">click here to unsubscribe</span>
    </td></tr></tbody></table>
  </td></tr></tbody></table>
  </td></tr></table>
  </td></tr>
   </table>
   </body>
   </html>