responsive-email/mycode.html at master · sollenne/responsive-email · GitHub

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
<html>

<!--
RESPONSIVE EMAIL BUILT BY RICH SOLLENNE.
SEE README.MD FOR BEST PRACTICES REGARDING RESPONSIVE EMAIL.
972-935-7069 RICH@SOLLENNE.COM
FINAL DRAFT AS OF 010/31/2013 4:43PM CST

This content is released under the http://opensource.org/licenses/MIT MIT License.
Attribution preferred but not required.
-->

    <head>
        <style>
            @media all and (max-width: 590px) {
                *[class].responsive {
                    width: 320px !important;
                }
            }
        </style>
    </head>

    <body>
        <table width="100%" style="background-color: #dddddd;" align="center"
        cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td height="15"></td>
                </tr>
                <tr>
                    <td width="100%">
                        <table width="560" style="background-color: #aaaaaa;" align="center" cellpadding="0"
                        cellspacing="0" class="responsive">
                            <tbody>
                                <tr>
                                    <td width="100%">
                                        <table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
                                            <tbody>
                                                <tr>
                                                    <td width="100%" height="40" style="background-color: #bbbbbb;">
                                                        <div height="40" style="font-weight:200; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <table width="280" align="right" cellpadding="0" cellspacing="0" class="responsive">
                                            <tbody>
                                                <tr>
                                                    <td width="100%" height="40" style="background-color: #cccccc;">
                                                        <div height="40" style="font-weight:200; font-family:HelveticaNeue-Light,Helvetica Neue Light; text-align:center;">Right (bottom)</div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td height="15"></td>
                </tr>
            </tbody>
        </table>
    </body>

</html>