-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathtemplate.html
106 lines (87 loc) · 4.03 KB
/
template.html
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
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Preview</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title>
No Tables
</title>
</head>
<body bgcolor="#333333">
<div style="display:none;">
Adding an element before the wrapper removes the blue line so preheader text like this works fine for it :)
</div>
<!-- 600px wrapper div -->
<div style="font-size:1rem;background:red;max-width:37.5em;margin:0 auto;text-align:center;padding:.3em 0;color:#ffffff;
mso-element-frame-width:600px;
mso-element:para-border-div;
mso-element-left:center;
mso-element-wrap:no-wrap-beside;" role="article" aria-label="Get off the table email" >
<!-- h1 tag -->
<h1 style="color:white;margin:1em 0">
Outlook div Structure
</h1>
<!-- img tag -->
<img src="https://kafeinsiz.com/wp-content/uploads/2014/07/image193-934x.jpg" width="540" style="width:33.75em;max-width:90%;">
<!-- h2 tag -->
<h2 style="color:white;margin:1em 0">
Get off the table
</h2>
<!-- p tag -->
<p style="color:white;text-align:left;padding:1em;mso-para-margin-left:1em;mso-para-margin-right:1em;background:red;">
<strong><P> tag</strong> Leave dead animals as gifts purrr purr littel cat, little cat purr purr where is my slave? I'm getting hungry. Cat not kitten around stand in front of the computer screen, for stare at wall turn and meow stare at wall some more meow again continue staring then cats take over the world for wack the mini furry mouse.
</p>
<!-- Lists -->
<ul style="text-align:left;">
<li>Unordered</li>
<li>list</li>
</ul>
<ol style="text-align:left;">
<li>Ordered</li>
<li>list</li>
</ol>
<!-- 80% wide white line -->
<hr style="border:none;height:.125em;color:#ffffff;background:#ffffff;width:80%;margin:2em auto;">
<!-- 300px wide button -->
<!-- mso-padding-alt removes the default padding otherwise there is a gap between the background and the border -->
<!-- mso-border-alt addas a border that has the same visual effect as padding when it matches the backgroudn colour -->
<a href="https://github.com" style="background:#ffffff;color:#ff0000;font-weight:bold;display:inline-block;width:18.75em;padding:1em 0;text-decoration:none;mso-padding-alt:0;">
<!--[if mso]><i style="letter-spacing: 50px;"> </i><![endif]-->
<span style="mso-text-raise:10px;">This is a link</span>
<!--[if mso]><i style="letter-spacing: 50px;font-size:50px"> </i><![endif]-->
</a>
<!-- 50px spacer -->
<div style="height:3.125em;"></div>
</div> <!-- Close the first wrapper div -->
<!-- Adding a table makes it work on Outlook, without this is sits on top of the previous content -->
<!-- nbsp and sizes needed for outlook 2016: - Thanks Tom Riley -->
<table>
<tr><td style="font-size:0; height:0; line-height:0;"> </td></tr></table>
<!-- second section 400px wrapper div -->
<div style="background:blue;max-width:25em;margin:0 auto;text-align:center;padding:5px 0;color:#ffffff;
mso-element-frame-width:400px;
mso-element:para-border-div;
mso-element-left:center;
mso-element-wrap:no-wrap-beside;" >
<h1>400px wide section</h1>
</div>
</body>
</html>