Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Metronic | Email Templates - Responsive Newsletter<br> |
||
| 6 | Email Template</title> |
||
| 7 | <!--IMPORTANT: |
||
| 8 | Before deploying this email template into your application make sure you convert all the css code in <style> tag using http://beaker.mailchimp.com/inline-css. |
||
| 9 | Chrome and other few mail clients do not support <style> tag so the above converter from mailchip will make sure that all the css code will be converted into inline css. |
||
| 10 | --> |
||
| 11 | <meta name="viewport" content="width=device-width"/> |
||
| 12 | <style type="text/css"> |
||
| 13 | /********************************************************************* |
||
| 14 | Ink - Responsive Email Template Framework Based: http://zurb.com/ink/ |
||
| 15 | *********************************************************************/ |
||
| 16 | #outlook a { |
||
| 17 | padding:0; |
||
| 18 | } |
||
| 19 | body{ |
||
| 20 | width:100% !important; |
||
| 21 | min-width: 100%; |
||
| 22 | -webkit-text-size-adjust:100%; |
||
| 23 | -ms-text-size-adjust:100%; |
||
| 24 | margin:0; |
||
| 25 | padding:0; |
||
| 26 | } |
||
| 27 | img { |
||
| 28 | outline:none; |
||
| 29 | text-decoration:none; |
||
| 30 | -ms-interpolation-mode: bicubic; |
||
| 31 | width: auto; |
||
| 32 | height: auto; |
||
| 33 | max-width: 100%; |
||
| 34 | float: left; |
||
| 35 | clear: both; |
||
| 36 | display: block; |
||
| 37 | } |
||
| 38 | @media screen and (min-width:0\0) { |
||
| 39 | /* IE9 and IE10 rule sets go here */ |
||
| 40 | img.ie10-responsive { |
||
| 41 | width: 100% !important; |
||
| 42 | } |
||
| 43 | } |
||
| 44 | center { |
||
| 45 | width: 100%; |
||
| 46 | min-width: 580px; |
||
| 47 | } |
||
| 48 | a img { |
||
| 49 | border: none; |
||
| 50 | } |
||
| 51 | p { |
||
| 52 | margin: 0 0 0 10px; |
||
| 53 | } |
||
| 54 | table { |
||
| 55 | border-spacing: 0; |
||
| 56 | border-collapse: collapse; |
||
| 57 | } |
||
| 58 | td { |
||
| 59 | word-break: break-word; |
||
| 60 | -webkit-hyphens: auto; |
||
| 61 | -moz-hyphens: auto; |
||
| 62 | hyphens: auto; |
||
| 63 | border-collapse: collapse !important; |
||
| 64 | } |
||
| 65 | table, tr, td { |
||
| 66 | padding: 0; |
||
| 67 | vertical-align: top; |
||
| 68 | text-align: left; |
||
| 69 | } |
||
| 70 | hr { |
||
| 71 | color: #d9d9d9; |
||
| 72 | background-color: #d9d9d9; |
||
| 73 | height: 1px; |
||
| 74 | border: none; |
||
| 75 | } |
||
| 76 | /* Responsive Grid */ |
||
| 77 | table.body { |
||
| 78 | height: 100%; |
||
| 79 | width: 100%; |
||
| 80 | } |
||
| 81 | table.container { |
||
| 82 | width: 580px; |
||
| 83 | margin: 0 auto; |
||
| 84 | text-align: inherit; |
||
| 85 | } |
||
| 86 | table.row { |
||
| 87 | padding: 0px; |
||
| 88 | width: 100%; |
||
| 89 | position: relative; |
||
| 90 | } |
||
| 91 | table.container table.row { |
||
| 92 | display: block; |
||
| 93 | } |
||
| 94 | td.wrapper { |
||
| 95 | padding: 10px 20px 0px 0px; |
||
| 96 | position: relative; |
||
| 97 | } |
||
| 98 | table.columns, |
||
| 99 | table.column { |
||
| 100 | margin: 0 auto; |
||
| 101 | } |
||
| 102 | table.columns td, |
||
| 103 | table.column td { |
||
| 104 | padding: 0px 0px 10px; |
||
| 105 | } |
||
| 106 | table.columns td.sub-columns, |
||
| 107 | table.column td.sub-columns, |
||
| 108 | table.columns td.sub-column, |
||
| 109 | table.column td.sub-column { |
||
| 110 | padding-right: 10px; |
||
| 111 | } |
||
| 112 | td.sub-column, td.sub-columns { |
||
| 113 | min-width: 0px; |
||
| 114 | } |
||
| 115 | table.row td.last, |
||
| 116 | table.container td.last { |
||
| 117 | padding-right: 0px; |
||
| 118 | } |
||
| 119 | table.one { width: 30px; } |
||
| 120 | table.two { width: 80px; } |
||
| 121 | table.three { width: 130px; } |
||
| 122 | table.four { width: 180px; } |
||
| 123 | table.five { width: 230px; } |
||
| 124 | table.six { width: 280px; } |
||
| 125 | table.seven { width: 330px; } |
||
| 126 | table.eight { width: 380px; } |
||
| 127 | table.nine { width: 430px; } |
||
| 128 | table.ten { width: 480px; } |
||
| 129 | table.eleven { width: 530px; } |
||
| 130 | table.twelve { width: 580px; } |
||
| 131 | table.one center { min-width: 30px; } |
||
| 132 | table.two center { min-width: 80px; } |
||
| 133 | table.three center { min-width: 130px; } |
||
| 134 | table.four center { min-width: 180px; } |
||
| 135 | table.five center { min-width: 230px; } |
||
| 136 | table.six center { min-width: 280px; } |
||
| 137 | table.seven center { min-width: 330px; } |
||
| 138 | table.eight center { min-width: 380px; } |
||
| 139 | table.nine center { min-width: 430px; } |
||
| 140 | table.ten center { min-width: 480px; } |
||
| 141 | table.eleven center { min-width: 530px; } |
||
| 142 | table.twelve center { min-width: 580px; } |
||
| 143 | table.one .panel center { min-width: 10px; } |
||
| 144 | table.two .panel center { min-width: 60px; } |
||
| 145 | table.three .panel center { min-width: 110px; } |
||
| 146 | table.four .panel center { min-width: 160px; } |
||
| 147 | table.five .panel center { min-width: 210px; } |
||
| 148 | table.six .panel center { min-width: 260px; } |
||
| 149 | table.seven .panel center { min-width: 310px; } |
||
| 150 | table.eight .panel center { min-width: 360px; } |
||
| 151 | table.nine .panel center { min-width: 410px; } |
||
| 152 | table.ten .panel center { min-width: 460px; } |
||
| 153 | table.eleven .panel center { min-width: 510px; } |
||
| 154 | table.twelve .panel center { min-width: 560px; } |
||
| 155 | .body .columns td.one, |
||
| 156 | .body .column td.one { width: 8.333333%; } |
||
| 157 | .body .columns td.two, |
||
| 158 | .body .column td.two { width: 16.666666%; } |
||
| 159 | .body .columns td.three, |
||
| 160 | .body .column td.three { width: 25%; } |
||
| 161 | .body .columns td.four, |
||
| 162 | .body .column td.four { width: 33.333333%; } |
||
| 163 | .body .columns td.five, |
||
| 164 | .body .column td.five { width: 41.666666%; } |
||
| 165 | .body .columns td.six, |
||
| 166 | .body .column td.six { width: 50%; } |
||
| 167 | .body .columns td.seven, |
||
| 168 | .body .column td.seven { width: 58.333333%; } |
||
| 169 | .body .columns td.eight, |
||
| 170 | .body .column td.eight { width: 66.666666%; } |
||
| 171 | .body .columns td.nine, |
||
| 172 | .body .column td.nine { width: 75%; } |
||
| 173 | .body .columns td.ten, |
||
| 174 | .body .column td.ten { width: 83.333333%; } |
||
| 175 | .body .columns td.eleven, |
||
| 176 | .body .column td.eleven { width: 91.666666%; } |
||
| 177 | .body .columns td.twelve, |
||
| 178 | .body .column td.twelve { width: 100%; } |
||
| 179 | td.offset-by-one { padding-left: 50px; } |
||
| 180 | td.offset-by-two { padding-left: 100px; } |
||
| 181 | td.offset-by-three { padding-left: 150px; } |
||
| 182 | td.offset-by-four { padding-left: 200px; } |
||
| 183 | td.offset-by-five { padding-left: 250px; } |
||
| 184 | td.offset-by-six { padding-left: 300px; } |
||
| 185 | td.offset-by-seven { padding-left: 350px; } |
||
| 186 | td.offset-by-eight { padding-left: 400px; } |
||
| 187 | td.offset-by-nine { padding-left: 450px; } |
||
| 188 | td.offset-by-ten { padding-left: 500px; } |
||
| 189 | td.offset-by-eleven { padding-left: 550px; } |
||
| 190 | td.expander { |
||
| 191 | visibility: hidden; |
||
| 192 | width: 0px; |
||
| 193 | padding: 0 !important; |
||
| 194 | } |
||
| 195 | /* Alignment & Visibility Classes */ |
||
| 196 | table.center, td.center { |
||
| 197 | text-align: center; |
||
| 198 | } |
||
| 199 | h1.center, |
||
| 200 | h2.center, |
||
| 201 | h3.center, |
||
| 202 | h4.center, |
||
| 203 | h5.center, |
||
| 204 | h6.center { |
||
| 205 | text-align: center; |
||
| 206 | } |
||
| 207 | span.center { |
||
| 208 | display: block; |
||
| 209 | width: 100%; |
||
| 210 | text-align: center; |
||
| 211 | } |
||
| 212 | img.center { |
||
| 213 | margin: 0 auto; |
||
| 214 | float: none; |
||
| 215 | } |
||
| 216 | /* Typography */ |
||
| 217 | body, table.body, h1, h2, h3, h4, h5, h6, p, td { |
||
| 218 | color: #222222; |
||
| 219 | font-family: "Helvetica", "Arial", sans-serif; |
||
| 220 | font-weight: normal; |
||
| 221 | padding:0; |
||
| 222 | margin: 0; |
||
| 223 | text-align: left; |
||
| 224 | line-height: 1.3; |
||
| 225 | } |
||
| 226 | h1, h2, h3, h4, h5, h6 { |
||
| 227 | word-break: normal; |
||
| 228 | } |
||
| 229 | h1 {font-size: 40px;} |
||
| 230 | h2 {font-size: 36px;} |
||
| 231 | h3 {font-size: 32px;} |
||
| 232 | h4 {font-size: 28px;} |
||
| 233 | h5 {font-size: 24px;} |
||
| 234 | h6 {font-size: 20px;} |
||
| 235 | body, table.body, p, td {font-size: 14px;line-height:19px;} |
||
| 236 | p.lead, p.lede, p.leed { |
||
| 237 | font-size: 18px; |
||
| 238 | line-height:21px; |
||
| 239 | } |
||
| 240 | p { |
||
| 241 | margin-bottom: 10px; |
||
| 242 | } |
||
| 243 | small { |
||
| 244 | font-size: 10px; |
||
| 245 | } |
||
| 246 | a { |
||
| 247 | color: #2ba6cb; |
||
| 248 | text-decoration: none; |
||
| 249 | } |
||
| 250 | a:hover { |
||
| 251 | color: #2795b6 !important; |
||
| 252 | } |
||
| 253 | a:active { |
||
| 254 | color: #2795b6 !important; |
||
| 255 | } |
||
| 256 | a:visited { |
||
| 257 | color: #2ba6cb !important; |
||
| 258 | } |
||
| 259 | h1 a, |
||
| 260 | h2 a, |
||
| 261 | h3 a, |
||
| 262 | h4 a, |
||
| 263 | h5 a, |
||
| 264 | h6 a { |
||
| 265 | color: #2ba6cb; |
||
| 266 | } |
||
| 267 | h1 a:active, |
||
| 268 | h2 a:active, |
||
| 269 | h3 a:active, |
||
| 270 | h4 a:active, |
||
| 271 | h5 a:active, |
||
| 272 | h6 a:active { |
||
| 273 | color: #2ba6cb !important; |
||
| 274 | } |
||
| 275 | h1 a:visited, |
||
| 276 | h2 a:visited, |
||
| 277 | h3 a:visited, |
||
| 278 | h4 a:visited, |
||
| 279 | h5 a:visited, |
||
| 280 | h6 a:visited { |
||
| 281 | color: #2ba6cb !important; |
||
| 282 | } |
||
| 283 | /* Panels */ |
||
| 284 | .panel { |
||
| 285 | background: #f2f2f2; |
||
| 286 | border: 1px solid #d9d9d9; |
||
| 287 | padding: 10px !important; |
||
| 288 | } |
||
| 289 | table.radius td { |
||
| 290 | -webkit-border-radius: 3px; |
||
| 291 | -moz-border-radius: 3px; |
||
| 292 | border-radius: 3px; |
||
| 293 | } |
||
| 294 | table.round td { |
||
| 295 | -webkit-border-radius: 500px; |
||
| 296 | -moz-border-radius: 500px; |
||
| 297 | border-radius: 500px; |
||
| 298 | } |
||
| 299 | /* Outlook First */ |
||
| 300 | body.outlook p { |
||
| 301 | display: inline !important; |
||
| 302 | } |
||
| 303 | /* Media Queries */ |
||
| 304 | @media only screen and (max-width: 600px) { |
||
| 305 | table[class="body"] img { |
||
| 306 | width: auto !important; |
||
| 307 | height: auto !important; |
||
| 308 | } |
||
| 309 | table[class="body"] center { |
||
| 310 | min-width: 0 !important; |
||
| 311 | } |
||
| 312 | table[class="body"] .container { |
||
| 313 | width: 95% !important; |
||
| 314 | } |
||
| 315 | table[class="body"] .row { |
||
| 316 | width: 100% !important; |
||
| 317 | display: block !important; |
||
| 318 | } |
||
| 319 | table[class="body"] .wrapper { |
||
| 320 | display: block !important; |
||
| 321 | padding-right: 0 !important; |
||
| 322 | } |
||
| 323 | table[class="body"] .columns, |
||
| 324 | table[class="body"] .column { |
||
| 325 | table-layout: fixed !important; |
||
| 326 | float: none !important; |
||
| 327 | width: 100% !important; |
||
| 328 | padding-right: 0px !important; |
||
| 329 | padding-left: 0px !important; |
||
| 330 | display: block !important; |
||
| 331 | } |
||
| 332 | table[class="body"] .wrapper.first .columns, |
||
| 333 | table[class="body"] .wrapper.first .column { |
||
| 334 | display: table !important; |
||
| 335 | } |
||
| 336 | table[class="body"] table.columns td, |
||
| 337 | table[class="body"] table.column td { |
||
| 338 | width: 100% !important; |
||
| 339 | } |
||
| 340 | table[class="body"] .columns td.one, |
||
| 341 | table[class="body"] .column td.one { width: 8.333333% !important; } |
||
| 342 | table[class="body"] .columns td.two, |
||
| 343 | table[class="body"] .column td.two { width: 16.666666% !important; } |
||
| 344 | table[class="body"] .columns td.three, |
||
| 345 | table[class="body"] .column td.three { width: 25% !important; } |
||
| 346 | table[class="body"] .columns td.four, |
||
| 347 | table[class="body"] .column td.four { width: 33.333333% !important; } |
||
| 348 | table[class="body"] .columns td.five, |
||
| 349 | table[class="body"] .column td.five { width: 41.666666% !important; } |
||
| 350 | table[class="body"] .columns td.six, |
||
| 351 | table[class="body"] .column td.six { width: 50% !important; } |
||
| 352 | table[class="body"] .columns td.seven, |
||
| 353 | table[class="body"] .column td.seven { width: 58.333333% !important; } |
||
| 354 | table[class="body"] .columns td.eight, |
||
| 355 | table[class="body"] .column td.eight { width: 66.666666% !important; } |
||
| 356 | table[class="body"] .columns td.nine, |
||
| 357 | table[class="body"] .column td.nine { width: 75% !important; } |
||
| 358 | table[class="body"] .columns td.ten, |
||
| 359 | table[class="body"] .column td.ten { width: 83.333333% !important; } |
||
| 360 | table[class="body"] .columns td.eleven, |
||
| 361 | table[class="body"] .column td.eleven { width: 91.666666% !important; } |
||
| 362 | table[class="body"] .columns td.twelve, |
||
| 363 | table[class="body"] .column td.twelve { width: 100% !important; } |
||
| 364 | table[class="body"] td.offset-by-one, |
||
| 365 | table[class="body"] td.offset-by-two, |
||
| 366 | table[class="body"] td.offset-by-three, |
||
| 367 | table[class="body"] td.offset-by-four, |
||
| 368 | table[class="body"] td.offset-by-five, |
||
| 369 | table[class="body"] td.offset-by-six, |
||
| 370 | table[class="body"] td.offset-by-seven, |
||
| 371 | table[class="body"] td.offset-by-eight, |
||
| 372 | table[class="body"] td.offset-by-nine, |
||
| 373 | table[class="body"] td.offset-by-ten, |
||
| 374 | table[class="body"] td.offset-by-eleven { |
||
| 375 | padding-left: 0 !important; |
||
| 376 | } |
||
| 377 | table[class="body"] table.columns td.expander { |
||
| 378 | width: 1px !important; |
||
| 379 | } |
||
| 380 | } |
||
| 381 | </style> |
||
| 382 | <style> |
||
| 383 | /************************************************************** |
||
| 384 | * Custom Styles * |
||
| 385 | ***************************************************************/ |
||
| 386 | /*** |
||
| 387 | Reset & Typography |
||
| 388 | ***/ |
||
| 389 | body { |
||
| 390 | direction: ltr; |
||
| 391 | background: #f6f8f1; |
||
| 392 | } |
||
| 393 | a:hover { |
||
| 394 | text-decoration: underline; |
||
| 395 | } |
||
| 396 | h1 {font-size: 34px;} |
||
| 397 | h2 {font-size: 30px;} |
||
| 398 | h3 {font-size: 26px;} |
||
| 399 | h4 {font-size: 22px;} |
||
| 400 | h5 {font-size: 18px;} |
||
| 401 | h6 {font-size: 16px;} |
||
| 402 | h4, h3, h2, h1 { |
||
| 403 | display: block; |
||
| 404 | margin: 5px 0 15px 0; |
||
| 405 | } |
||
| 406 | h7, h6, h5 { |
||
| 407 | display: block; |
||
| 408 | margin: 5px 0 5px 0 !important; |
||
| 409 | } |
||
| 410 | /*** |
||
| 411 | Buttons |
||
| 412 | ***/ |
||
| 413 | .btn td { |
||
| 414 | background: #e5e5e5 !important; |
||
| 415 | border: 0; |
||
| 416 | font-family: "Segoe UI", Helvetica, Arial, sans-serif; |
||
| 417 | font-size: 14px; |
||
| 418 | padding: 7px 14px !important; |
||
| 419 | color: #333333 !important; |
||
| 420 | text-align: center; |
||
| 421 | vertical-align: middle; |
||
| 422 | } |
||
| 423 | .btn td a { |
||
| 424 | display: block; |
||
| 425 | color: #fff; |
||
| 426 | } |
||
| 427 | .btn td a:hover, |
||
| 428 | .btn td a:focus, |
||
| 429 | .btn td a:active { |
||
| 430 | color: #fff !important; |
||
| 431 | text-decoration: none; |
||
| 432 | } |
||
| 433 | .btn td:hover, |
||
| 434 | .btn td:focus, |
||
| 435 | .btn td:active { |
||
| 436 | background: #d8d8d8 !important; |
||
| 437 | } |
||
| 438 | /* Yellow */ |
||
| 439 | .btn.yellow td { |
||
| 440 | background: #ffb848 !important; |
||
| 441 | } |
||
| 442 | .btn.yellow td:hover, |
||
| 443 | .btn.yellow td:focus, |
||
| 444 | .btn.yellow td:active { |
||
| 445 | background: #eca22e !important; |
||
| 446 | } |
||
| 447 | .btn.red td{ |
||
| 448 | background: #d84a38 !important; |
||
| 449 | } |
||
| 450 | .btn.red td:hover, |
||
| 451 | .btn.red td:focus, |
||
| 452 | .btn.red td:active { |
||
| 453 | background: #bb2413 !important; |
||
| 454 | } |
||
| 455 | .btn.green td { |
||
| 456 | background: #35aa47 !important; |
||
| 457 | } |
||
| 458 | .btn.green td:hover, |
||
| 459 | .btn.green td:focus, |
||
| 460 | .btn.green td:active { |
||
| 461 | background: #1d943b !important; |
||
| 462 | } |
||
| 463 | /* Blue */ |
||
| 464 | .btn.blue td { |
||
| 465 | background: #4d90fe !important; |
||
| 466 | } |
||
| 467 | .btn.blue td:hover, |
||
| 468 | .btn.blue td:focus, |
||
| 469 | .btn.blue td:active { |
||
| 470 | background: #0362fd !important; |
||
| 471 | } |
||
| 472 | .template-label { |
||
| 473 | color: #ffffff; |
||
| 474 | font-weight: bold; |
||
| 475 | font-size: 11px; |
||
| 476 | } |
||
| 477 | /*** |
||
| 478 | Note Panels |
||
| 479 | ***/ |
||
| 480 | .note .panel { |
||
| 481 | padding: 10px !important; |
||
| 482 | background: #ECF8FF; |
||
| 483 | border: 0; |
||
| 484 | } |
||
| 485 | /*** |
||
| 486 | Header |
||
| 487 | ***/ |
||
| 488 | .page-header { |
||
| 489 | width: 100%; |
||
| 490 | background: #1f1f1f; |
||
| 491 | } |
||
| 492 | /*** |
||
| 493 | Social Icons |
||
| 494 | ***/ |
||
| 495 | .social-icons { |
||
| 496 | float: right; |
||
| 497 | } |
||
| 498 | .social-icons td { |
||
| 499 | padding: 0 2px !important; |
||
| 500 | width: auto !important; |
||
| 501 | } |
||
| 502 | .social-icons td:last-child { |
||
| 503 | padding-right: 0 !important; |
||
| 504 | } |
||
| 505 | .social-icons td img { |
||
| 506 | max-width: none !important; |
||
| 507 | } |
||
| 508 | /*** |
||
| 509 | Content |
||
| 510 | ***/ |
||
| 511 | table.container.content > tbody > tr > td{ |
||
| 512 | background: #fff; |
||
| 513 | padding: 15px !important; |
||
| 514 | } |
||
| 515 | /*** |
||
| 516 | Footer |
||
| 517 | ***/ |
||
| 518 | .page-footer { |
||
| 519 | width: 100%; |
||
| 520 | background: #2f2f2f; |
||
| 521 | } |
||
| 522 | .page-footer td { |
||
| 523 | vertical-align: middle; |
||
| 524 | color: #fff; |
||
| 525 | } |
||
| 526 | /*** |
||
| 527 | Content devider |
||
| 528 | ***/ |
||
| 529 | .devider { |
||
| 530 | border-bottom: 1px solid #eee; |
||
| 531 | margin: 15px -15px; |
||
| 532 | display: block; |
||
| 533 | } |
||
| 534 | /*** |
||
| 535 | Media Item |
||
| 536 | ***/ |
||
| 537 | .media-item img { |
||
| 538 | display: block !important; |
||
| 539 | float: none; |
||
| 540 | margin-bottom: 10px; |
||
| 541 | } |
||
| 542 | .vertical-middle { |
||
| 543 | padding-top: 0; |
||
| 544 | padding-bottom: 0; |
||
| 545 | vertical-align: middle; |
||
| 546 | } |
||
| 547 | /*** |
||
| 548 | Utils |
||
| 549 | ***/ |
||
| 550 | .align-reverse { |
||
| 551 | text-align: right; |
||
| 552 | } |
||
| 553 | .border { |
||
| 554 | border: 1px solid red; |
||
| 555 | } |
||
| 556 | .hidden-mobile { |
||
| 557 | display: block; |
||
| 558 | } |
||
| 559 | .visible-mobile { |
||
| 560 | display: none; |
||
| 561 | } |
||
| 562 | @media only screen and (max-width: 600px) { |
||
| 563 | /*** |
||
| 564 | Reset & Typography |
||
| 565 | ***/ |
||
| 566 | body { |
||
| 567 | background: #fff; |
||
| 568 | } |
||
| 569 | h1 {font-size: 30px;} |
||
| 570 | h2 {font-size: 26px;} |
||
| 571 | h3 {font-size: 22px;} |
||
| 572 | h4 {font-size: 20px;} |
||
| 573 | h5 {font-size: 16px;} |
||
| 574 | h6 {font-size: 14px;} |
||
| 575 | /*** |
||
| 576 | Content |
||
| 577 | ***/ |
||
| 578 | table.container.content > tbody > tr > td{ |
||
| 579 | padding: 0px !important; |
||
| 580 | } |
||
| 581 | table[class="body"] table.columns .social-icons td { |
||
| 582 | width: auto !important; |
||
| 583 | } |
||
| 584 | /*** |
||
| 585 | Header |
||
| 586 | ***/ |
||
| 587 | .page-header { |
||
| 588 | padding: 10px !important; |
||
| 589 | } |
||
| 590 | /*** |
||
| 591 | Content devider |
||
| 592 | ***/ |
||
| 593 | .devider { |
||
| 594 | margin: 15px 0; |
||
| 595 | } |
||
| 596 | /*** |
||
| 597 | Media Item |
||
| 598 | ***/ |
||
| 599 | .media-item { |
||
| 600 | border-bottom: 1px solid #eee; |
||
| 601 | padding: 15px 0 !important; |
||
| 602 | } |
||
| 603 | /*** |
||
| 604 | Media Item |
||
| 605 | ***/ |
||
| 606 | .hidden-mobile { |
||
| 607 | display: none; |
||
| 608 | } |
||
| 609 | .visible-mobile { |
||
| 610 | display: block; |
||
| 611 | } |
||
| 612 | } |
||
| 613 | </style> |
||
| 614 | </head> |
||
| 615 | <body> |
||
| 616 | <table class="body"> |
||
| 617 | <tr> |
||
| 618 | <td class="center" align="center" valign="top"> |
||
| 619 | <!-- BEGIN: Header --> |
||
| 620 | <table class="page-header" align="center"> |
||
| 621 | <tr> |
||
| 622 | <td class="center" align="center"> |
||
| 623 | <!-- BEGIN: Header Container --> |
||
| 624 | <table class="container" align="center"> |
||
| 625 | <tr> |
||
| 626 | <td> |
||
| 627 | <table class="row "> |
||
| 628 | <tr> |
||
| 629 | <td class="wrapper vertical-middle"> |
||
| 630 | <!-- BEGIN: Logo --> |
||
| 631 | <table class="six columns"> |
||
| 632 | <tr> |
||
| 633 | <td class="vertical-middle"> |
||
| 634 | <a href="index.html"> |
||
| 635 | <img src="../../assets/admin/layout/img/logo.png" width="86" height="14" border="0" alt=""/> |
||
| 636 | </a> |
||
| 637 | </td> |
||
| 638 | </tr> |
||
| 639 | </table> |
||
| 640 | <!-- END: Logo --> |
||
| 641 | </td> |
||
| 642 | <td class="wrapper vertical-middle last"> |
||
| 643 | <!-- BEGIN: Social Icons --> |
||
| 644 | <table class="six columns"> |
||
| 645 | <tr> |
||
| 646 | <td> |
||
| 647 | <table class="wrapper social-icons" align="right"> |
||
| 648 | <tr> |
||
| 649 | <td class="vertical-middle"> |
||
| 650 | <a href="#"> |
||
| 651 | <img src="../../assets/admin/pages/media/email/social_facebook.png" alt="social icon"/> |
||
| 652 | </a> |
||
| 653 | </td> |
||
| 654 | <td class="vertical-middle"> |
||
| 655 | <a href="#"> |
||
| 656 | <img src="../../assets/admin/pages/media/email/social_twitter.png" alt="social icon"/> |
||
| 657 | </a> |
||
| 658 | </td> |
||
| 659 | <td class="vertical-middle"> |
||
| 660 | <a href="#"> |
||
| 661 | <img src="../../assets/admin/pages/media/email/social_googleplus.png" alt="social icon"/> |
||
| 662 | </a> |
||
| 663 | </td> |
||
| 664 | <td class="vertical-middle"> |
||
| 665 | <a href="#"> |
||
| 666 | <img src="../../assets/admin/pages/media/email/social_linkedin.png" alt="social icon"/> |
||
| 667 | </a> |
||
| 668 | </td> |
||
| 669 | <td class="vertical-middle"> |
||
| 670 | <a href="#"> |
||
| 671 | <img src="../../assets/admin/pages/media/email/social_rss.png" alt="social icon"/> |
||
| 672 | </a> |
||
| 673 | </td> |
||
| 674 | </tr> |
||
| 675 | </table> |
||
| 676 | </td> |
||
| 677 | </tr> |
||
| 678 | </table> |
||
| 679 | <!-- END: Social Icons --> |
||
| 680 | </td> |
||
| 681 | </tr> |
||
| 682 | </table> |
||
| 683 | </td> |
||
| 684 | </tr> |
||
| 685 | </table> |
||
| 686 | <!-- END: Header Container --> |
||
| 687 | </td> |
||
| 688 | </tr> |
||
| 689 | </table> |
||
| 690 | <!-- END: Header --> |
||
| 691 | <!-- BEGIN: Content --> |
||
| 692 | <table class="container content" align="center"> |
||
| 693 | <tr> |
||
| 694 | <td> |
||
| 695 | <table class="row"> |
||
| 696 | <tr> |
||
| 697 | <td class="wrapper last"> |
||
| 698 | <!-- BEGIN: Heading Content --> |
||
| 699 | <table class="twelve columns"> |
||
| 700 | <tr> |
||
| 701 | <td> |
||
| 702 | <h4>Welcome To Responsive Email Template</h4> |
||
| 703 | <p> |
||
| 704 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
||
| 705 | </p> |
||
| 706 | <table class="btn green" align="right"> |
||
| 707 | <tr> |
||
| 708 | <td> |
||
| 709 | <a href="#"> |
||
| 710 | Learn more... </a> |
||
| 711 | </td> |
||
| 712 | </tr> |
||
| 713 | </table> |
||
| 714 | </td> |
||
| 715 | <td class="expander"> |
||
| 716 | </td> |
||
| 717 | </tr> |
||
| 718 | </table> |
||
| 719 | <!-- END: Heading Content --> |
||
| 720 | </td> |
||
| 721 | </tr> |
||
| 722 | </table> |
||
| 723 | <span class="devider"> |
||
| 724 | </span> |
||
| 725 | <table class="row "> |
||
| 726 | <tr> |
||
| 727 | <td class="wrapper"> |
||
| 728 | <!-- BEGIN: Promo Content --> |
||
| 729 | <table class="seven columns"> |
||
| 730 | <tr> |
||
| 731 | <td> |
||
| 732 | <h4>Meet Our New Product!</h4> |
||
| 733 | <p> |
||
| 734 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing adipiscing elit felis, sit amet blandit ipsum volutpat sed adipiscing elit. Morbi porttitor, eget. |
||
| 735 | </p> |
||
| 736 | <ul> |
||
| 737 | <li> |
||
| 738 | Lorem ipsum dolor sit amet |
||
| 739 | </li> |
||
| 740 | <li> |
||
| 741 | Morbi porttitor |
||
| 742 | </li> |
||
| 743 | <li> |
||
| 744 | In tempus adipiscing felis |
||
| 745 | </li> |
||
| 746 | <li> |
||
| 747 | Amet blandit ipsum |
||
| 748 | </li> |
||
| 749 | </ul> |
||
| 750 | <table class="btn yellow" align="right"> |
||
| 751 | <tr> |
||
| 752 | <td> |
||
| 753 | <a href="#"> |
||
| 754 | More info... </a> |
||
| 755 | </td> |
||
| 756 | </tr> |
||
| 757 | </table> |
||
| 758 | </td> |
||
| 759 | <td class="expander"> |
||
| 760 | </td> |
||
| 761 | </tr> |
||
| 762 | </table> |
||
| 763 | <!-- END: Promo Content --> |
||
| 764 | </td> |
||
| 765 | <td class="wrapper last"> |
||
| 766 | <!-- BEGIN: Promo Image --> |
||
| 767 | <table class="five columns"> |
||
| 768 | <tr> |
||
| 769 | <td> |
||
| 770 | <img src="../../assets/admin/pages/media/email/iphone.png" style="float:right; margin-right: 20px;" alt=""/> |
||
| 771 | </td> |
||
| 772 | <td class="expander"> |
||
| 773 | </td> |
||
| 774 | </tr> |
||
| 775 | </table> |
||
| 776 | <!-- BEGIN: Promo Image --> |
||
| 777 | </td> |
||
| 778 | </tr> |
||
| 779 | </table> |
||
| 780 | <table class="row note"> |
||
| 781 | <tr> |
||
| 782 | <td class="wrapper last"> |
||
| 783 | <!-- BEGIN: Note Panel --> |
||
| 784 | <table class="twelve columns"> |
||
| 785 | <tr> |
||
| 786 | <td class="panel"> |
||
| 787 | Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#"> |
||
| 788 | Check it out! </a> |
||
| 789 | </td> |
||
| 790 | <td class="expander"> |
||
| 791 | </td> |
||
| 792 | </tr> |
||
| 793 | </table> |
||
| 794 | <!-- END: Note Panel --> |
||
| 795 | </td> |
||
| 796 | </tr> |
||
| 797 | </table> |
||
| 798 | <span class="devider"> |
||
| 799 | </span> |
||
| 800 | <table class="row"> |
||
| 801 | <tr> |
||
| 802 | <td class="wrapper last"> |
||
| 803 | <!-- BEGIN: Disscount Content --> |
||
| 804 | <table class="twelve columns"> |
||
| 805 | <tr> |
||
| 806 | <td> |
||
| 807 | <h4>70% Disscount! </h4> |
||
| 808 | <p> |
||
| 809 | Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Pellentesque sem dolor, fringilla et pharetra vitae |
||
| 810 | </p> |
||
| 811 | <img src="../../assets/admin/pages/media/email/article.png" class="ie10-responsive" alt=""/> |
||
| 812 | </td> |
||
| 813 | <td class="expander"> |
||
| 814 | </td> |
||
| 815 | </tr> |
||
| 816 | </table> |
||
| 817 | <!-- END: Disscount Content --> |
||
| 818 | </td> |
||
| 819 | </tr> |
||
| 820 | </table> |
||
| 821 | <span class="devider"> |
||
| 822 | </span> |
||
| 823 | <table class="row"> |
||
| 824 | <tr> |
||
| 825 | <td class="wrapper last"> |
||
| 826 | <!-- BEGIN: Latest Products Content --> |
||
| 827 | <table class="twelve columns"> |
||
| 828 | <tr> |
||
| 829 | <td> |
||
| 830 | <h4>Latest Products & Showcasts</h4> |
||
| 831 | <p> |
||
| 832 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum. |
||
| 833 | </p> |
||
| 834 | </td> |
||
| 835 | <td class="expander"> |
||
| 836 | </td> |
||
| 837 | </tr> |
||
| 838 | </table> |
||
| 839 | <!-- END: Latest Products Content --> |
||
| 840 | </td> |
||
| 841 | </tr> |
||
| 842 | </table> |
||
| 843 | <!-- BEGIN: Latest Products List --> |
||
| 844 | <table class="row"> |
||
| 845 | <tr> |
||
| 846 | <td class="wrapper"> |
||
| 847 | <table class="four columns media-item"> |
||
| 848 | <tr> |
||
| 849 | <td> |
||
| 850 | <img src="../../assets/admin/pages/media/email/photo1.jpg" class="ie10-responsive" alt="photo"> |
||
| 851 | <h6>Product 1</h6> |
||
| 852 | <p> |
||
| 853 | Lorem ipsum dolor sit amet, ut laoreet elit, sed diam. |
||
| 854 | </p> |
||
| 855 | <table class="btn green"> |
||
| 856 | <tr> |
||
| 857 | <td> |
||
| 858 | <a href="#"> |
||
| 859 | More info... </a> |
||
| 860 | </td> |
||
| 861 | </tr> |
||
| 862 | </table> |
||
| 863 | </td> |
||
| 864 | <td class="expander"> |
||
| 865 | </td> |
||
| 866 | </tr> |
||
| 867 | </table> |
||
| 868 | </td> |
||
| 869 | <td class="wrapper"> |
||
| 870 | <table class="four columns media-item"> |
||
| 871 | <tr> |
||
| 872 | <td> |
||
| 873 | <img src="../../assets/admin/pages/media/email/photo2.jpg" class="ie10-responsive" alt="photo"> |
||
| 874 | <h6>Product 2</h6> |
||
| 875 | <p> |
||
| 876 | Lorem ipsum dolor sit amet, ut laoreet elit, sed diam. |
||
| 877 | </p> |
||
| 878 | <table class="btn blue"> |
||
| 879 | <tr> |
||
| 880 | <td> |
||
| 881 | <a href="#"> |
||
| 882 | More info... </a> |
||
| 883 | </td> |
||
| 884 | </tr> |
||
| 885 | </table> |
||
| 886 | </td> |
||
| 887 | <td class="expander"> |
||
| 888 | </td> |
||
| 889 | </tr> |
||
| 890 | </table> |
||
| 891 | </td> |
||
| 892 | <td class="wrapper last"> |
||
| 893 | <table class="four columns media-item"> |
||
| 894 | <tr> |
||
| 895 | <td> |
||
| 896 | <img src="../../assets/admin/pages/media/email/photo1.jpg" class="ie10-responsive" alt="photo"> |
||
| 897 | <h6>Product 4</h6> |
||
| 898 | <p> |
||
| 899 | Lorem ipsum, ut laoreet elit, sed diam sed ut dolore. |
||
| 900 | </p> |
||
| 901 | <table class="btn yellow"> |
||
| 902 | <tr> |
||
| 903 | <td> |
||
| 904 | <a href="#"> |
||
| 905 | More info... </a> |
||
| 906 | </td> |
||
| 907 | </tr> |
||
| 908 | </table> |
||
| 909 | </td> |
||
| 910 | <td class="expander"> |
||
| 911 | </td> |
||
| 912 | </tr> |
||
| 913 | </table> |
||
| 914 | </td> |
||
| 915 | </tr> |
||
| 916 | </table> |
||
| 917 | <!-- END: Latest Products List --> |
||
| 918 | </td> |
||
| 919 | </tr> |
||
| 920 | </table> |
||
| 921 | <!-- END: Content --> |
||
| 922 | <!-- BEGIN: Footer --> |
||
| 923 | <table class="page-footer" align="center"> |
||
| 924 | <tr> |
||
| 925 | <td class="center" align="center"> |
||
| 926 | <table class="container" align="center"> |
||
| 927 | <tr> |
||
| 928 | <td> |
||
| 929 | <!-- BEGIN: Unsubscribet --> |
||
| 930 | <table class="row"> |
||
| 931 | <tr> |
||
| 932 | <td class="wrapper last"> |
||
| 933 | <a href="#"> |
||
| 934 | Unsubscribe </a> |
||
| 935 | from this newsletter instantly. |
||
| 936 | </td> |
||
| 937 | </tr> |
||
| 938 | </table> |
||
| 939 | <!-- END: Unsubscribe --> |
||
| 940 | <!-- BEGIN: Footer Panel --> |
||
| 941 | <table class="row"> |
||
| 942 | <tr> |
||
| 943 | <td class="wrapper"> |
||
| 944 | <table class="four columns"> |
||
| 945 | <tr> |
||
| 946 | <td class="vertical-middle"> |
||
| 947 | © Keenthemes 2013. |
||
| 948 | </td> |
||
| 949 | </tr> |
||
| 950 | </table> |
||
| 951 | </td> |
||
| 952 | <td class="wrapper last"> |
||
| 953 | <table class="eight columns"> |
||
| 954 | <tr> |
||
| 955 | <td class="vertical-middle align-reverse"> |
||
| 956 | <a href="#"> |
||
| 957 | About Us </a> |
||
| 958 | <a href="#"> |
||
| 959 | Privacy Policy </a> |
||
| 960 | <a href="#"> |
||
| 961 | Terms of Use </a> |
||
| 962 | </td> |
||
| 963 | </tr> |
||
| 964 | </table> |
||
| 965 | </td> |
||
| 966 | </tr> |
||
| 967 | </table> |
||
| 968 | <!-- END: Footer Panel List --> |
||
| 969 | </td> |
||
| 970 | </tr> |
||
| 971 | </table> |
||
| 972 | </td> |
||
| 973 | </tr> |
||
| 974 | </table> |
||
| 975 | <!-- END: Footer --> |
||
| 976 | </td> |
||
| 977 | </tr> |
||
| 978 | </table> |
||
| 979 | </body> |
||
| 980 | </html> |