Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
ef648362 by Dan Rempel
Options

CWL Circular Approved

1 parent 93ec9d94
Inline Side-by-side
Showing 9 changed files with 437 additions and 0 deletions
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title></title>
6 <style type="text/css">
7 body {
8 background:#ededed;
9 margin: 0;
10 font-size: 12px;
11 line-height: 16px;
12 color: black; /*full grey*/
13 font-family: "Arial", sans-serif;
14 }
15 table, tr, td, li{
16 border: none;
17 border-collapse: collapse;
18 font-size: 12px;
19 line-height: 16px;
20 color: #54565a; /*full grey*/
21 font-family: "Arial", sans-serif;
22 padding: 0;
23 }
24 img, a img{
25 border: none;
26 border-collapse: collapse;
27 display: block;
28 }
29 .container{
30 border: 1px #717174 solid;
31 background-color: #ffffff;
32 }
33 .address td td{
34 font-size: 9px;
35 line-height: 11px;
36 color:#717174;
37 }
38 p {
39 margin-bottom: 9px;
40 margin-top: 9px;
41 }
42 a {
43 color: #0397d6; /*full blue*/
44 }
45 .content-table{
46 width: 506px;
47 }
48 .content-table th, .content-table td{
49 padding: 3px 3px 3px 10px;
50 }
51 .content-table th{
52 background-color: #a6a6a8;
53 color: #FFFFFF;
54 text-align: left;
55 }
56 .odd{
57 background-color: #e5e5e5;
58 }
59 .float-l{
60 float: left;
61 margin: 0 10px 10px 0;
62 }
63 .float-r{
64 float: right;
65 margin: 0 0 10px 10px;
66 }
67 img{
68 border:none;
69 border-collapse: collapse;
70 }
71 a img{
72 border:none;
73 border-collapse: collapse;
74 }
75
76
77 /* specific to CW */
78 .mast td{
79 background-color: #767777; /* grey */
80 color: white;
81 }
82 .issue{
83 font-size: 13px;
84 }
85 .hero, .hero p{
86 font-size: 18px;
87 line-height: 24px;
88 color: #54565a;
89 }
90 .pullquote td td{
91 background-color: #dfe9ef;
92 font-family: "Times", serif;
93 }
94 .content td td{
95 }
96 h1{
97 font-size: 23px;
98 line-height: 26px;
99 color: #717174;
100 font-weight: normal;
101 }
102 .details{
103
104 }
105 .label{
106 color: #717174;
107 font-weight: bold;
108 }
109 .logobar td{
110
111 }
112 td td.unsubscribe{
113 color: black;
114 font-size: 10px;
115 text-align: right;
116 }
117 H1, H2, H3, H4{
118 color: #717174;
119 }
120 H2{
121 color: #54565a;
122 }
123 H2, H3, H4{
124 font-size: 14px;
125 line-height: 16px;
126 }
127 H2{
128 font-size: 20px;
129 }
130 H2.title{
131 margin-top: 0px;
132 color: #54565a;
133 }
134 h2.eyebrow{
135 text-transform: uppercase;
136 font-size: 12px;
137 color: #6d6e70;
138 font-weight: lighter;
139 margin-bottom: 7px;
140 }
141 H3{
142 }
143 H4{
144 font-style: italic;
145 }
146
147 .table-callout{
148 background-color: #f0f6fc;
149 border-bottom: 1px solid #d0d1d2;
150 }
151 .line-v{
152 background-color: #d0d1d2;
153 width: 1px;
154 }
155
156 .url a, .url:hover a{
157 font-size: 16px;
158 text-decoration: none;
159 }
160
161 </style>
162 </head>
163 <body LEFTMARGIN="0" TOPMARGIN="0">
164 <table width="100%" cellspacing="0" cellpadding="0" border="0">
165 <tr>
166 <td><img src="images/blank.gif" alt="" width="1" height="1"/></td>
167 <td id="centering" width="600">
168 <table class="container" cellspacing="0" cellpadding="0" border="0"><tr><td><!-- this enables a border and/or background colour -->
169
170
171
172
173 <!-- this will be different with every email -->
174
175 <!-- layoutrows first, then layout tables within each row for further control -->
176 <table class="layoutrows" cellspacing="0" cellpadding="0" border="0">
177
178 <tr class="mast">
179 <td>
180 <table class="mast" cellspacing="0" cellpadding="0" border="0">
181 <tr>
182 <td width="46"><img src="images/blank.gif" alt="" width="46" height="20"/></td>
183 <td>
184 <table cellspacing="0" cellpadding="0" border="0">
185 <tr>
186 <td width=""><img src="images/blank.gif" alt="" width="46" height="22"/></td>
187 </tr>
188 <tr>
189 <td class="issue"><singleline label="Issue Date">Summer 2018 | Issue 1</singleline></td>
190 </tr>
191 <tr>
192 <td><img src="images/news.png" alt="news" width="357" height="56" /></td>
193 </tr>
194 </table>
195 </td>
196 <td><img src="images/logo.png" alt="logo" width="197" height="94" /></td>
197 </tr>
198 </table>
199 </td>
200 </tr>
201 <tr class="hero">
202 <td>
203 <table class="" cellspacing="0" cellpadding="0" border="0">
204 <tr>
205 <td width="23" valign="top"><img src="images/bars.gif" alt="bars" width="23" height="94" /></td>
206 <td width="554"><img src="images/hero.jpg" alt="hero" width="554" editable label='Hero Image' /></td>
207 <td width="23"><img src="images/blank.gif" alt="" width="23" height="20"/></td>
208 </tr>
209 </table>
210 </td>
211 </tr>
212 <tr class="hero">
213 <td>
214 <table class="" cellspacing="0" cellpadding="0" border="0">
215
216 <tr>
217 <td width="46"><img src="images/blank.gif" alt="" width="46" height="20"/></td>
218 <td width="508" class="hero">&nbsp;<br>
219 <multiline label="Article Body" >Hero text introducing this issue. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem eum melor amet.</multiline>
220 <img src="images/line.png" alt="line" width="506" height="41" />
221 </td>
222 <td width="46"><img src="images/blank.gif" alt="" width="46" height="20"/></td>
223 </tr>
224 </table>
225 </td>
226 </tr>
227
228 <!-- mast ends -->
229
230
231 <tr class="content">
232 <td>
233 <table>
234
235
236 <repeater>
237
238
239
240
241
242 <layout label='Article'>
243 <tr>
244 <td class="marginleft" width="46"><img src="images/blank.gif" alt="" width="46" height="20"/></td>
245 <td class="" width="508">
246 <h2 class="eyebrow">
247 <singleline label="Article Eyebrow Text" repeatertitle='false' >Eyebrow Text</singleline>
248 </h2>
249 <h2 class="title">
250 <singleline label="Article Title" repeatertitle='false' >Article Title</singleline>
251 </h2>
252
253 <multiline label="Article Body" >
254 <p>Enter the full text. This is the <a href="https://google.ca">main content</a> area. Lorem ipsum dolor adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
255 <h3>Heading 3</h3>
256 <h4>Heading 4</h4>
257 <table class="content-table">
258 <tr>
259 <th>
260 Cell one
261 </th>
262 <th>
263 Cell two
264 </th>
265 <th>
266 Cell three
267 </th>
268 </tr>
269 <tr>
270 <td>
271 Cell one
272 </td>
273 <td>
274 Cell two
275 </td>
276 <td>
277 Cell three
278 </td>
279 </tr>
280 <tr class="odd">
281 <td>
282 Cell one
283 </td>
284 <td>
285 Cell two
286 </td>
287 <td>
288 Cell three
289 </td>
290 </tr>
291 </table>
292 <ul>
293 <li>Bullet one</li>
294 <li>Bullet two</li>
295 <li>Bullet three</li>
296 <li>Bullet four</li>
297 </ul>
298 </multiline>
299
300
301
302
303 <img src="images/line.png" alt="line" width="506" height="41" />
304 </td>
305 <td class="marginright" width="46"><img src="images/blank.gif" alt="" width="46" height="20"/></td>
306 </tr>
307 </layout>
308
309 </repeater>
310 <repeater>
311
312
313 <layout label='Call out'>
314 <tr>
315 <td class="marginleft" width="46"><img src="images/blank.gif" alt="" width="46" height="20"/></td>
316 <td class="" width="508">
317
318 <table class="table-callout" cellspacing="0" cellpadding="0" border="0" width="506">
319 <tr>
320 <td width="20"><img src="images/blank.gif" alt="" width="20" height="20"/></td>
321 <td width="275"></td>
322 <td width="15"></td>
323 <td width="1"></td>
324 <td width="15"></td>
325 <td width="160"></td>
326 <td width="20"><img src="images/blank.gif" alt="" width="20" height="20"/></td>
327 </tr>
328 <tr>
329 <td><img src="images/blank.gif" alt="" width="20" height="20"/></td>
330 <td><h2><singleline label="Callout Title" repeatertitle='false' >Fusce Tincidunt Iaculis</singleline></h2>
331 <multiline label="Callout Body" >
332 Etiam varius dolor id ipsum laoreet condimentum. Nunc in feugiat neque. Aliquam porta mi nec tempus dapibus. Integer auctor tellus blandit risus interdum euismod. Maecenas lacinia auctor ipsum sed vehicula.</multiline></td>
333 <td><img src="images/blank.gif" alt="blank" width="15" height="20" /></td>
334 <td class="line-v"><img src="images/blank.gif" alt="blank" width="1" height="1" /></td>
335 <td><img src="images/blank.gif" alt="blank" width="15" height="20" /></td>
336 <td><img src="images/thumb.jpg" alt="thumb" width="160" editable label='Thumbnail'/></td>
337 <td><img src="images/blank.gif" alt="" width="20" height="20"/></td>
338 </tr>
339 <tr>
340 <td><img src="images/blank.gif" alt="" width="20" height="20"/></td>
341 <td></td>
342 <td></td>
343 <td></td>
344 <td></td>
345 <td></td>
346 <td><img src="images/blank.gif" alt="" width="20" height="20"/></td>
347 </tr>
348 </table>
349
350 </td>
351 <td class="marginright" width="46"><img src="images/blank.gif" alt="" width="46" height="20"/></td>
352 </tr>
353
354 </layout>
355
356
357 </table>
358
359 </td>
360 </tr><!-- content ends -->
361
362
363 </repeater>
364
365
366 <tr class="address white">
367 <td>&nbsp;<br>
368 <table>
369 <tr>
370 <td class="marginleft" width="46"><img src="images/blank.gif" alt="" width="46" height="20"/></td>
371 <td class="" width="169">
372 <strong>Lindsay Office</strong><br>
373 336 Angeline St S, <br>
374 Lindsay, ON K9V 0J8
375 </td>
376 <td class="" width="189">
377 <strong>Perth Office</strong><br>
378 96 South St. / Scotch Line Rd.<br>
379 Perth, ON K7H 0A2
380 </td>
381 <td class="" width="150">
382 <strong>Alexandria Office</strong><br>
383 3720 County Rd. 34 P.O. Box 159<br>
384 Alexandria, ON K0C 1A0
385 </td>
386 <td class="marginright" width="46"><img src="images/blank.gif" alt="" width="46" height="20"/></td>
387 </tr>
388 </table>
389
390 <table>
391 <tr>
392 <td class="marginleft" width="46"><img src="images/blank.gif" alt="" width="46" height="10"/></td>
393 <td class="marginright" width=""><img src="images/blank.gif" alt="" width="46" height="10"/></td>
394 <td class="marginright" width=""><img src="images/blank.gif" alt="" width="46" height="10"/></td>
395 <td class="marginright" width="46"><img src="images/blank.gif" alt="" width="46" height="10"/></td>
396 </tr>
397 <tr>
398 <td class="marginleft" width="46"><img src="images/blank.gif" alt="" width="46" height="20"/></td>
399 <td class="url" width="188"><a href="https://thecommonwell.ca">thecommonwell.ca</a></td>
400 <td class="unsubscribe" width="320"><em>If you no longer wish to receive this newsletter, click <unsubscribe>unsubscribe</unsubscribe>.</em></td>
401 <td class="marginright" width="46"><img src="images/blank.gif" alt="" width="46" height="20"/></td>
402 </tr>
403 <tr>
404 <td class="marginleft" width="46"><img src="images/blank.gif" alt="" width="46" height="10"/></td>
405 <td class="marginright" width=""><img src="images/blank.gif" alt="" width="46" height="30"/></td>
406 <td class="marginright" width="46"><img src="images/blank.gif" alt="" width="46" height="10"/></td>
407 </tr>
408 </table>
409
410
411
412
413 </td>
414 </tr><!-- address ends -->
415
416 </table><!-- layoutrows ends -->
417
418
419
420
421
422
423
424
425
426 </td></tr></table><!-- container ends -->
427 </td>
428 <td><img src="images/blank.gif" alt="" width="1" height="1"/></td>
429 </tr>
430 <tr>
431 <td><img src="images/blank.gif" alt="" width="1" height="1"/></td>
432 <td class="address" width="600"><img src="images/blank.gif" alt="" width="600" height="1"/></td>
433 <td><img src="images/blank.gif" alt="" width="1" height="1"/></td>
434 </tr>
435 </table>
436 </body>
437 </html>
...\ No newline at end of file ...\ No newline at end of file