39 |
40 | |
41 |
42 |
43 |
44 |
45 |
46 |
47 | Hi, Elijah Baily
48 | Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.
49 | Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.
50 |
51 |
52 | Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Click it! »
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | Contact Info:
79 | Phone: 408.341.0600
80 | Email: hseldon@trantor.com
81 |
82 | |
83 |
84 |
85 |
86 |
87 |
88 | |
89 |
90 |
91 |
92 | |
93 |
94 |
95 | |
98 | |
99 |
100 |
101 |
102 |
103 |
127 |
128 |
129 |
--------------------------------------------------------------------------------
/stylesheets/email.css:
--------------------------------------------------------------------------------
1 | /* -------------------------------------
2 | GLOBAL
3 | ------------------------------------- */
4 | * {
5 | margin:0;
6 | padding:0;
7 | }
8 | * { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
9 |
10 | img {
11 | max-width: 100%;
12 | }
13 | .collapse {
14 | margin:0;
15 | padding:0;
16 | }
17 | body {
18 | -webkit-font-smoothing:antialiased;
19 | -webkit-text-size-adjust:none;
20 | width: 100%!important;
21 | height: 100%;
22 | }
23 |
24 |
25 | /* -------------------------------------
26 | ELEMENTS
27 | ------------------------------------- */
28 | a { color: #2BA6CB;}
29 |
30 | .btn {
31 | text-decoration:none;
32 | color: #FFF;
33 | background-color: #666;
34 | padding:10px 16px;
35 | font-weight:bold;
36 | margin-right:10px;
37 | text-align:center;
38 | cursor:pointer;
39 | display: inline-block;
40 | }
41 |
42 | p.callout {
43 | padding:15px;
44 | background-color:#ECF8FF;
45 | margin-bottom: 15px;
46 | }
47 | .callout a {
48 | font-weight:bold;
49 | color: #2BA6CB;
50 | }
51 |
52 | table.social {
53 | /* padding:15px; */
54 | background-color: #ebebeb;
55 |
56 | }
57 | .social .soc-btn {
58 | padding: 3px 7px;
59 | font-size:12px;
60 | margin-bottom:10px;
61 | text-decoration:none;
62 | color: #FFF;font-weight:bold;
63 | display:block;
64 | text-align:center;
65 | }
66 | a.fb { background-color: #3B5998!important; }
67 | a.tw { background-color: #1daced!important; }
68 | a.gp { background-color: #DB4A39!important; }
69 | a.ms { background-color: #000!important; }
70 |
71 | .sidebar .soc-btn {
72 | display:block;
73 | width:100%;
74 | }
75 |
76 | /* -------------------------------------
77 | HEADER
78 | ------------------------------------- */
79 | table.head-wrap { width: 100%;}
80 |
81 | .header.container table td.logo { padding: 15px; }
82 | .header.container table td.label { padding: 15px; padding-left:0px;}
83 |
84 |
85 | /* -------------------------------------
86 | BODY
87 | ------------------------------------- */
88 | table.body-wrap { width: 100%;}
89 |
90 |
91 | /* -------------------------------------
92 | FOOTER
93 | ------------------------------------- */
94 | table.footer-wrap { width: 100%; clear:both!important;
95 | }
96 | .footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
97 | .footer-wrap .container td.content p {
98 | font-size:10px;
99 | font-weight: bold;
100 |
101 | }
102 |
103 |
104 | /* -------------------------------------
105 | TYPOGRAPHY
106 | ------------------------------------- */
107 | h1,h2,h3,h4,h5,h6 {
108 | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
109 | }
110 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
111 |
112 | h1 { font-weight:200; font-size: 44px;}
113 | h2 { font-weight:200; font-size: 37px;}
114 | h3 { font-weight:500; font-size: 27px;}
115 | h4 { font-weight:500; font-size: 23px;}
116 | h5 { font-weight:900; font-size: 17px;}
117 | h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}
118 |
119 | .collapse { margin:0!important;}
120 |
121 | p, ul {
122 | margin-bottom: 10px;
123 | font-weight: normal;
124 | font-size:14px;
125 | line-height:1.6;
126 | }
127 | p.lead { font-size:17px; }
128 | p.last { margin-bottom:0px;}
129 |
130 | ul li {
131 | margin-left:5px;
132 | list-style-position: inside;
133 | }
134 |
135 | /* -------------------------------------
136 | SIDEBAR
137 | ------------------------------------- */
138 | ul.sidebar {
139 | background:#ebebeb;
140 | display:block;
141 | list-style-type: none;
142 | }
143 | ul.sidebar li { display: block; margin:0;}
144 | ul.sidebar li a {
145 | text-decoration:none;
146 | color: #666;
147 | padding:10px 16px;
148 | /* font-weight:bold; */
149 | margin-right:10px;
150 | /* text-align:center; */
151 | cursor:pointer;
152 | border-bottom: 1px solid #777777;
153 | border-top: 1px solid #FFFFFF;
154 | display:block;
155 | margin:0;
156 | }
157 | ul.sidebar li a.last { border-bottom-width:0px;}
158 | ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;}
159 |
160 |
161 |
162 | /* ---------------------------------------------------
163 | RESPONSIVENESS
164 | Nuke it from orbit. It's the only way to be sure.
165 | ------------------------------------------------------ */
166 |
167 | /* 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 */
168 | .container {
169 | display:block!important;
170 | max-width:600px!important;
171 | margin:0 auto!important; /* makes it centered */
172 | clear:both!important;
173 | }
174 |
175 | /* This should also be a block element, so that it will fill 100% of the .container */
176 | .content {
177 | padding:15px;
178 | max-width:600px;
179 | margin:0 auto;
180 | display:block;
181 | }
182 |
183 | /* Let's make sure tables in the content area are 100% wide */
184 | .content table { width: 100%; }
185 |
186 |
187 | /* Odds and ends */
188 | .column {
189 | width: 300px;
190 | float:left;
191 | }
192 | .column tr td { padding: 15px; }
193 | .column-wrap {
194 | padding:0!important;
195 | margin:0 auto;
196 | max-width:600px!important;
197 | }
198 | .column table { width:100%;}
199 | .social .column {
200 | width: 280px;
201 | min-width: 279px;
202 | float:left;
203 | }
204 |
205 | /* Be sure to place a .clear element after each set of columns, just to be safe */
206 | .clear { display: block; clear: both; }
207 |
208 |
209 | /* -------------------------------------------
210 | PHONE
211 | For clients that support media queries.
212 | Nothing fancy.
213 | -------------------------------------------- */
214 | @media only screen and (max-width: 600px) {
215 |
216 | a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
217 |
218 | div[class="column"] { width: auto!important; float:none!important;}
219 |
220 | table.social div[class="column"] {
221 | width:auto!important;
222 | }
223 |
224 | }
--------------------------------------------------------------------------------
