UNPKG

8.38 kBtext/x-handlebars-templateView Raw
1<!doctype html>
2<html>
3<head>
4 <meta name="viewport" content="width=device-width" />
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6 <title>Simple Transactional Email</title>
7 <style>
8 /* -------------------------------------
9 GLOBAL RESETS
10 ------------------------------------- */
11 img {
12 border: none;
13 -ms-interpolation-mode: bicubic;
14 max-width: 100%; }
15
16 body {
17 background-color: #f6f6f6;
18 font-family: sans-serif;
19 -webkit-font-smoothing: antialiased;
20 font-size: 14px;
21 line-height: 1.4;
22 margin: 0;
23 padding: 0;
24 -ms-text-size-adjust: 100%;
25 -webkit-text-size-adjust: 100%; }
26
27 table {
28 border-collapse: separate;
29 mso-table-lspace: 0pt;
30 mso-table-rspace: 0pt;
31 width: 100%; }
32 table td {
33 font-family: sans-serif;
34 font-size: 14px;
35 vertical-align: top; }
36
37 /* -------------------------------------
38 BODY & CONTAINER
39 ------------------------------------- */
40
41 .body {
42 background-color: #f6f6f6;
43 width: 100%; }
44
45 /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
46 .container {
47 display: block;
48 Margin: 0 auto !important;
49 /* makes it centered */
50 max-width: 580px;
51 padding: 10px;
52 width: 580px; }
53
54 /* This should also be a block element, so that it will fill 100% of the .container */
55 .content {
56 box-sizing: border-box;
57 display: block;
58 Margin: 0 auto;
59 max-width: 580px;
60 padding: 10px; }
61
62 /* -------------------------------------
63 HEADER, FOOTER, MAIN
64 ------------------------------------- */
65 .main {
66 background: #fff;
67 border-radius: 3px;
68 width: 100%; }
69
70 .wrapper {
71 box-sizing: border-box;
72 padding: 20px; }
73
74 .footer {
75 clear: both;
76 padding-top: 10px;
77 text-align: center;
78 width: 100%; }
79 .footer td,
80 .footer p,
81 .footer span,
82 .footer a {
83 color: #999999;
84 font-size: 12px;
85 text-align: center; }
86
87 /* -------------------------------------
88 TYPOGRAPHY
89 ------------------------------------- */
90 h1,
91 h2,
92 h3,
93 h4 {
94 color: #000000;
95 font-family: sans-serif;
96 font-weight: 400;
97 line-height: 1.4;
98 margin: 0;
99 Margin-bottom: 30px; }
100
101 h1 {
102 font-size: 35px;
103 font-weight: 300;
104 text-align: center;
105 text-transform: capitalize; }
106
107 p,
108 ul,
109 ol {
110 font-family: sans-serif;
111 font-size: 14px;
112 font-weight: normal;
113 margin: 0;
114 margin-bottom: 15px; !important; }
115 p li,
116 ul li,
117 ol li {
118 list-style-position: inside;
119 margin-left: 5px; }
120
121 a {
122 color: #3498db;
123 text-decoration: underline; }
124
125 /* -------------------------------------
126 BUTTONS
127 ------------------------------------- */
128 .btn {
129 box-sizing: border-box;
130 width: 100%; }
131 .btn > tbody > tr > td {
132 padding-bottom: 15px; }
133 .btn table {
134 width: auto; }
135 .btn table td {
136 background-color: #ffffff;
137 border-radius: 5px;
138 text-align: center; }
139 .btn a {
140 background-color: #ffffff;
141 border: solid 1px #3498db;
142 border-radius: 5px;
143 box-sizing: border-box;
144 color: #3498db;
145 cursor: pointer;
146 display: inline-block;
147 font-size: 14px;
148 font-weight: bold;
149 margin: 0;
150 padding: 12px 25px;
151 text-decoration: none;
152 text-transform: capitalize; }
153
154 .btn-primary table td {
155 background-color: #3498db; }
156
157 .btn-primary a {
158 background-color: #3498db;
159 border-color: #3498db;
160 color: #ffffff; }
161
162 /* -------------------------------------
163 OTHER STYLES THAT MIGHT BE USEFUL
164 ------------------------------------- */
165 .last {
166 margin-bottom: 0; }
167
168 .first {
169 margin-top: 0; }
170
171 .align-center {
172 text-align: center; }
173
174 .align-right {
175 text-align: right; }
176
177 .align-left {
178 text-align: left; }
179
180 .clear {
181 clear: both; }
182
183 .mt0 {
184 margin-top: 0; }
185
186 .mb0 {
187 margin-bottom: 0; }
188
189 .preheader {
190 color: transparent;
191 display: none;
192 height: 0;
193 max-height: 0;
194 max-width: 0;
195 opacity: 0;
196 overflow: hidden;
197 mso-hide: all;
198 visibility: hidden;
199 width: 0; }
200
201 .powered-by a {
202 text-decoration: none; }
203
204 hr {
205 border: 0;
206 border-bottom: 1px solid #f6f6f6;
207 Margin: 20px 0; }
208
209 /* -------------------------------------
210 RESPONSIVE AND MOBILE FRIENDLY STYLES
211 ------------------------------------- */
212 @media only screen and (max-width: 620px) {
213 table[class=body] h1 {
214 font-size: 28px !important;
215 margin-bottom: 10px !important; }
216 table[class=body] p,
217 table[class=body] ul,
218 table[class=body] ol,
219 table[class=body] td,
220 table[class=body] span,
221 table[class=body] a {
222 font-size: 16px !important; }
223 table[class=body] .wrapper,
224 table[class=body] .article {
225 padding: 10px !important; }
226 table[class=body] .content {
227 padding: 0 !important; }
228 table[class=body] .container {
229 padding: 0 !important;
230 width: 100% !important; }
231 table[class=body] .main {
232 border-left-width: 0 !important;
233 border-radius: 0 !important;
234 border-right-width: 0 !important; }
235 table[class=body] .btn table {
236 width: 100% !important; }
237 table[class=body] .btn a {
238 width: 100% !important; }
239 table[class=body] .img-responsive {
240 height: auto !important;
241 max-width: 100% !important;
242 width: auto !important; }}
243
244 /* -------------------------------------
245 PRESERVE THESE STYLES IN THE HEAD
246 ------------------------------------- */
247 @media all {
248 .ExternalClass {
249 width: 100%; }
250 .ExternalClass,
251 .ExternalClass p,
252 .ExternalClass span,
253 .ExternalClass font,
254 .ExternalClass td,
255 .ExternalClass div {
256 line-height: 100%; }
257 .apple-link a {
258 color: inherit !important;
259 font-family: inherit !important;
260 font-size: inherit !important;
261 font-weight: inherit !important;
262 line-height: inherit !important;
263 text-decoration: none !important; }
264 .btn-primary table td:hover {
265 background-color: #34495e !important; }
266 .btn-primary a:hover {
267 background-color: #34495e !important;
268 border-color: #34495e !important; } }
269
270 </style>
271</head>
272<body class="">
273<table border="0" cellpadding="0" cellspacing="0" class="body">
274 <tr>
275 <td>&nbsp;</td>
276 <td class="container">
277 <div class="content">
278
279 <!-- START CENTERED WHITE CONTAINER -->
280 <span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
281
\No newline at end of file