Created
March 14, 2015 09:19
-
-
Save techjewel/3a98bcc8dac040db4064 to your computer and use it in GitHub Desktop.
Very Simple email Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> | |
| <title></title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| mso-line-height-rule: exactly; | |
| padding: 0; | |
| min-width: 100%; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| td { | |
| padding: 0; | |
| vertical-align: top; | |
| } | |
| .spacer, | |
| .border { | |
| font-size: 1px; | |
| line-height: 1px; | |
| } | |
| .spacer { | |
| width: 100%; | |
| } | |
| img { | |
| border: 0; | |
| -ms-interpolation-mode: bicubic; | |
| } | |
| .image { | |
| font-size: 12px; | |
| Margin-bottom: 24px; | |
| mso-line-height-rule: at-least; | |
| } | |
| .image img { | |
| display: block; | |
| } | |
| .logo { | |
| mso-line-height-rule: at-least; | |
| } | |
| .logo img { | |
| display: block; | |
| } | |
| strong { | |
| font-weight: bold; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| p, | |
| ol, | |
| ul, | |
| li { | |
| Margin-top: 0; | |
| } | |
| ol, | |
| ul, | |
| li { | |
| padding-left: 0; | |
| } | |
| blockquote { | |
| Margin-top: 0; | |
| Margin-right: 0; | |
| Margin-bottom: 0; | |
| padding-right: 0; | |
| } | |
| .column-top { | |
| font-size: 32px; | |
| line-height: 32px; | |
| } | |
| .column-bottom { | |
| font-size: 8px; | |
| line-height: 8px; | |
| } | |
| .column { | |
| text-align: left; | |
| } | |
| .contents { | |
| table-layout: fixed; | |
| width: 100%; | |
| } | |
| .padded { | |
| padding-left: 32px; | |
| padding-right: 32px; | |
| word-break: break-word; | |
| word-wrap: break-word; | |
| } | |
| .wrapper { | |
| display: table; | |
| table-layout: fixed; | |
| width: 100%; | |
| min-width: 620px; | |
| -webkit-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| } | |
| table.wrapper { | |
| table-layout: fixed; | |
| } | |
| .one-col, | |
| .two-col, | |
| .three-col { | |
| Margin-left: auto; | |
| Margin-right: auto; | |
| width: 600px; | |
| } | |
| .centered { | |
| Margin-left: auto; | |
| Margin-right: auto; | |
| } | |
| .two-col .image { | |
| Margin-bottom: 23px; | |
| } | |
| .two-col .column-bottom { | |
| font-size: 9px; | |
| line-height: 9px; | |
| } | |
| .two-col .column { | |
| width: 300px; | |
| } | |
| .three-col .image { | |
| Margin-bottom: 21px; | |
| } | |
| .three-col .column-bottom { | |
| font-size: 11px; | |
| line-height: 11px; | |
| } | |
| .three-col .column { | |
| width: 200px; | |
| } | |
| .three-col .first .padded { | |
| padding-left: 32px; | |
| padding-right: 16px; | |
| } | |
| .three-col .second .padded { | |
| padding-left: 24px; | |
| padding-right: 24px; | |
| } | |
| .three-col .third .padded { | |
| padding-left: 16px; | |
| padding-right: 32px; | |
| } | |
| @media only screen and (min-width: 0) { | |
| .wrapper { | |
| text-rendering: optimizeLegibility; | |
| } | |
| } | |
| @media only screen and (max-width: 620px) { | |
| [class=wrapper] { | |
| min-width: 318px !important; | |
| width: 100% !important; | |
| } | |
| [class=wrapper] .one-col, | |
| [class=wrapper] .two-col, | |
| [class=wrapper] .three-col { | |
| width: 318px !important; | |
| } | |
| [class=wrapper] .column, | |
| [class=wrapper] .gutter { | |
| display: block; | |
| float: left; | |
| width: 318px !important; | |
| } | |
| [class=wrapper] .padded { | |
| padding-left: 32px !important; | |
| padding-right: 32px !important; | |
| } | |
| [class=wrapper] .block { | |
| display: block !important; | |
| } | |
| [class=wrapper] .hide { | |
| display: none !important; | |
| } | |
| [class=wrapper] .image { | |
| margin-bottom: 24px !important; | |
| } | |
| [class=wrapper] .image img { | |
| height: auto !important; | |
| width: 100% !important; | |
| } | |
| } | |
| .wrapper h1 { | |
| font-weight: 700; | |
| } | |
| .wrapper h2 { | |
| font-style: italic; | |
| font-weight: normal; | |
| } | |
| .wrapper h3 { | |
| font-weight: normal; | |
| } | |
| .one-col blockquote, | |
| .two-col blockquote, | |
| .three-col blockquote { | |
| font-style: italic; | |
| } | |
| .one-col-feature h1 { | |
| font-weight: normal; | |
| } | |
| .one-col-feature h2 { | |
| font-style: normal; | |
| font-weight: bold; | |
| } | |
| .one-col-feature h3 { | |
| font-style: italic; | |
| } | |
| td.border { | |
| width: 1px; | |
| } | |
| tr.border { | |
| background-color: #e9e9e9; | |
| height: 1px; | |
| } | |
| tr.border td { | |
| line-height: 1px; | |
| } | |
| .one-col, | |
| .two-col, | |
| .three-col, | |
| .one-col-feature { | |
| background-color: #ffffff; | |
| font-size: 14px; | |
| table-layout: fixed; | |
| } | |
| .one-col, | |
| .two-col, | |
| .three-col, | |
| .one-col-feature, | |
| .preheader, | |
| .header, | |
| .footer { | |
| Margin-left: auto; | |
| Margin-right: auto; | |
| } | |
| .preheader table { | |
| width: 602px; | |
| } | |
| .preheader .title, | |
| .preheader .webversion { | |
| padding-top: 10px; | |
| padding-bottom: 12px; | |
| font-size: 12px; | |
| line-height: 21px; | |
| } | |
| .preheader .title { | |
| text-align: left; | |
| } | |
| .preheader .webversion { | |
| text-align: right; | |
| width: 300px; | |
| } | |
| .header { | |
| width: 602px; | |
| } | |
| .header .logo { | |
| padding: 32px 0; | |
| } | |
| .header .logo div { | |
| font-size: 26px; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| line-height: 32px; | |
| } | |
| .header .logo div a { | |
| text-decoration: none; | |
| } | |
| .header .logo div.logo-center { | |
| text-align: center; | |
| } | |
| .header .logo div.logo-center img { | |
| Margin-left: auto; | |
| Margin-right: auto; | |
| } | |
| .gmail { | |
| width: 650px; | |
| min-width: 650px; | |
| } | |
| .gmail td { | |
| font-size: 1px; | |
| line-height: 1px; | |
| } | |
| .wrapper a { | |
| text-decoration: underline; | |
| transition: all .2s; | |
| } | |
| .wrapper h1 { | |
| font-size: 36px; | |
| Margin-bottom: 18px; | |
| } | |
| .wrapper h2 { | |
| font-size: 26px; | |
| line-height: 32px; | |
| Margin-bottom: 20px; | |
| } | |
| .wrapper h3 { | |
| font-size: 18px; | |
| line-height: 22px; | |
| Margin-bottom: 16px; | |
| } | |
| .wrapper h1 a, | |
| .wrapper h2 a, | |
| .wrapper h3 a { | |
| text-decoration: none; | |
| } | |
| .one-col blockquote, | |
| .two-col blockquote, | |
| .three-col blockquote { | |
| font-size: 14px; | |
| border-left: 2px solid #e9e9e9; | |
| Margin-left: 0; | |
| padding-left: 16px; | |
| } | |
| table.divider { | |
| width: 100%; | |
| } | |
| .divider .inner { | |
| padding-bottom: 24px; | |
| } | |
| .divider table { | |
| background-color: #e9e9e9; | |
| font-size: 2px; | |
| line-height: 2px; | |
| width: 60px; | |
| } | |
| .wrapper .gray { | |
| background-color: #f7f7f7; | |
| } | |
| .wrapper .gray blockquote { | |
| border-left-color: #dddddd; | |
| } | |
| .wrapper .gray .divider table { | |
| background-color: #dddddd; | |
| } | |
| .padded .image { | |
| font-size: 0; | |
| } | |
| .image-frame { | |
| padding: 8px; | |
| } | |
| .image-background { | |
| display: inline-block; | |
| font-size: 12px; | |
| } | |
| .btn { | |
| Margin-bottom: 24px; | |
| padding: 2px; | |
| } | |
| .btn a { | |
| border: 1px solid #ffffff; | |
| display: inline-block; | |
| font-size: 13px; | |
| font-weight: bold; | |
| line-height: 15px; | |
| outline-style: solid; | |
| outline-width: 2px; | |
| padding: 10px 30px; | |
| text-align: center; | |
| text-decoration: none !important; | |
| } | |
| .one-col .column table:nth-last-child(2) td h1:last-child, | |
| .one-col .column table:nth-last-child(2) td h2:last-child, | |
| .one-col .column table:nth-last-child(2) td h3:last-child, | |
| .one-col .column table:nth-last-child(2) td p:last-child, | |
| .one-col .column table:nth-last-child(2) td ol:last-child, | |
| .one-col .column table:nth-last-child(2) td ul:last-child { | |
| Margin-bottom: 24px; | |
| } | |
| .one-col p, | |
| .one-col ol, | |
| .one-col ul { | |
| font-size: 16px; | |
| line-height: 24px; | |
| } | |
| .one-col ol, | |
| .one-col ul { | |
| Margin-left: 18px; | |
| } | |
| .two-col .column table:nth-last-child(2) td h1:last-child, | |
| .two-col .column table:nth-last-child(2) td h2:last-child, | |
| .two-col .column table:nth-last-child(2) td h3:last-child, | |
| .two-col .column table:nth-last-child(2) td p:last-child, | |
| .two-col .column table:nth-last-child(2) td ol:last-child, | |
| .two-col .column table:nth-last-child(2) td ul:last-child { | |
| Margin-bottom: 23px; | |
| } | |
| .two-col .image-frame { | |
| padding: 6px; | |
| } | |
| .two-col h1 { | |
| font-size: 26px; | |
| line-height: 32px; | |
| Margin-bottom: 16px; | |
| } | |
| .two-col h2 { | |
| font-size: 20px; | |
| line-height: 26px; | |
| Margin-bottom: 18px; | |
| } | |
| .two-col h3 { | |
| font-size: 16px; | |
| line-height: 20px; | |
| Margin-bottom: 14px; | |
| } | |
| .two-col p, | |
| .two-col ol, | |
| .two-col ul { | |
| font-size: 14px; | |
| line-height: 23px; | |
| } | |
| .two-col ol, | |
| .two-col ul { | |
| Margin-left: 16px; | |
| } | |
| .two-col li { | |
| padding-left: 5px; | |
| } | |
| .two-col .divider .inner { | |
| padding-bottom: 23px; | |
| } | |
| .two-col .btn { | |
| Margin-bottom: 23px; | |
| } | |
| .two-col blockquote { | |
| padding-left: 16px; | |
| } | |
| .three-col .column table:nth-last-child(2) td h1:last-child, | |
| .three-col .column table:nth-last-child(2) td h2:last-child, | |
| .three-col .column table:nth-last-child(2) td h3:last-child, | |
| .three-col .column table:nth-last-child(2) td p:last-child, | |
| .three-col .column table:nth-last-child(2) td ol:last-child, | |
| .three-col .column table:nth-last-child(2) td ul:last-child { | |
| Margin-bottom: 21px; | |
| } | |
| .three-col .image-frame { | |
| padding: 4px; | |
| } | |
| .three-col h1 { | |
| font-size: 20px; | |
| line-height: 26px; | |
| Margin-bottom: 12px; | |
| } | |
| .three-col h2 { | |
| font-size: 16px; | |
| line-height: 22px; | |
| Margin-bottom: 14px; | |
| } | |
| .three-col h3 { | |
| font-size: 14px; | |
| line-height: 18px; | |
| Margin-bottom: 10px; | |
| } | |
| .three-col p, | |
| .three-col ol, | |
| .three-col ul { | |
| font-size: 12px; | |
| line-height: 21px; | |
| } | |
| .three-col ol, | |
| .three-col ul { | |
| Margin-left: 14px; | |
| } | |
| .three-col li { | |
| padding-left: 6px; | |
| } | |
| .three-col .divider .inner { | |
| padding-bottom: 21px; | |
| } | |
| .three-col .btn { | |
| Margin-bottom: 21px; | |
| } | |
| .three-col .btn a { | |
| font-size: 12px; | |
| line-height: 14px; | |
| padding: 8px 19px; | |
| } | |
| .three-col blockquote { | |
| padding-left: 16px; | |
| } | |
| .one-col-feature .column-top { | |
| font-size: 36px; | |
| line-height: 36px; | |
| } | |
| .one-col-feature .column-bottom { | |
| font-size: 4px; | |
| line-height: 4px; | |
| } | |
| .one-col-feature .column { | |
| text-align: center; | |
| width: 600px; | |
| } | |
| .one-col-feature .image { | |
| Margin-bottom: 32px; | |
| } | |
| .one-col-feature .column table:nth-last-child(2) td h1:last-child, | |
| .one-col-feature .column table:nth-last-child(2) td h2:last-child, | |
| .one-col-feature .column table:nth-last-child(2) td h3:last-child, | |
| .one-col-feature .column table:nth-last-child(2) td p:last-child, | |
| .one-col-feature .column table:nth-last-child(2) td ol:last-child, | |
| .one-col-feature .column table:nth-last-child(2) td ul:last-child { | |
| Margin-bottom: 32px; | |
| } | |
| .one-col-feature h1, | |
| .one-col-feature h2, | |
| .one-col-feature h3 { | |
| text-align: center; | |
| } | |
| .one-col-feature h1 { | |
| font-size: 52px; | |
| Margin-bottom: 22px; | |
| } | |
| .one-col-feature h2 { | |
| font-size: 42px; | |
| Margin-bottom: 20px; | |
| } | |
| .one-col-feature h3 { | |
| font-size: 32px; | |
| line-height: 42px; | |
| Margin-bottom: 20px; | |
| } | |
| .one-col-feature p, | |
| .one-col-feature ol, | |
| .one-col-feature ul { | |
| font-size: 21px; | |
| line-height: 32px; | |
| Margin-bottom: 32px; | |
| } | |
| .one-col-feature p a, | |
| .one-col-feature ol a, | |
| .one-col-feature ul a { | |
| text-decoration: none; | |
| } | |
| .one-col-feature p { | |
| text-align: center; | |
| } | |
| .one-col-feature ol, | |
| .one-col-feature ul { | |
| Margin-left: 40px; | |
| text-align: left; | |
| } | |
| .one-col-feature li { | |
| padding-left: 3px; | |
| } | |
| .one-col-feature .btn { | |
| Margin-bottom: 32px; | |
| text-align: center; | |
| } | |
| .one-col-feature .divider .inner { | |
| padding-bottom: 32px; | |
| } | |
| .one-col-feature blockquote { | |
| border-bottom: 2px solid #e9e9e9; | |
| border-left-color: #ffffff; | |
| border-left-width: 0; | |
| border-left-style: none; | |
| border-top: 2px solid #e9e9e9; | |
| Margin-bottom: 32px; | |
| Margin-left: 0; | |
| padding-bottom: 42px; | |
| padding-left: 0; | |
| padding-top: 42px; | |
| position: relative; | |
| } | |
| .one-col-feature blockquote:before, | |
| .one-col-feature blockquote:after { | |
| background: -moz-linear-gradient(left, #ffffff 25%, #e9e9e9 25%, #e9e9e9 75%, #ffffff 75%); | |
| background: -webkit-gradient(linear, left top, right top, color-stop(25%, #ffffff), color-stop(25%, #e9e9e9), color-stop(75%, #e9e9e9), color-stop(75%, #ffffff)); | |
| background: -webkit-linear-gradient(left, #ffffff 25%, #e9e9e9 25%, #e9e9e9 75%, #ffffff 75%); | |
| background: -o-linear-gradient(left, #ffffff 25%, #e9e9e9 25%, #e9e9e9 75%, #ffffff 75%); | |
| background: -ms-linear-gradient(left, #ffffff 25%, #e9e9e9 25%, #e9e9e9 75%, #ffffff 75%); | |
| background: linear-gradient(to right, #ffffff 25%, #e9e9e9 25%, #e9e9e9 75%, #ffffff 75%); | |
| content: ''; | |
| display: block; | |
| height: 2px; | |
| left: 0; | |
| outline: 1px solid #ffffff; | |
| position: absolute; | |
| right: 0; | |
| } | |
| .one-col-feature blockquote:before { | |
| top: -2px; | |
| } | |
| .one-col-feature blockquote:after { | |
| bottom: -2px; | |
| } | |
| .one-col-feature blockquote p, | |
| .one-col-feature blockquote ol, | |
| .one-col-feature blockquote ul { | |
| font-size: 42px; | |
| line-height: 48px; | |
| Margin-bottom: 48px; | |
| } | |
| .one-col-feature blockquote p:last-child, | |
| .one-col-feature blockquote ol:last-child, | |
| .one-col-feature blockquote ul:last-child { | |
| Margin-bottom: 0 !important; | |
| } | |
| .footer { | |
| width: 602px; | |
| } | |
| .footer .padded { | |
| font-size: 12px; | |
| line-height: 20px; | |
| } | |
| .social { | |
| padding-top: 32px; | |
| padding-bottom: 22px; | |
| } | |
| .social img { | |
| display: block; | |
| } | |
| .social .divider { | |
| font-family: sans-serif; | |
| font-size: 10px; | |
| line-height: 21px; | |
| text-align: center; | |
| padding-left: 14px; | |
| padding-right: 14px; | |
| } | |
| .social .social-text { | |
| height: 21px; | |
| vertical-align: middle !important; | |
| font-size: 10px; | |
| font-weight: bold; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| } | |
| .social .social-text a { | |
| text-decoration: none; | |
| } | |
| .address { | |
| width: 250px; | |
| } | |
| .address .padded { | |
| text-align: left; | |
| padding-left: 0; | |
| padding-right: 10px; | |
| } | |
| .subscription { | |
| width: 350px; | |
| } | |
| .subscription .padded { | |
| text-align: right; | |
| padding-right: 0; | |
| padding-left: 10px; | |
| } | |
| .address, | |
| .subscription { | |
| padding-top: 32px; | |
| padding-bottom: 64px; | |
| } | |
| .address a, | |
| .subscription a { | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| .address table, | |
| .subscription table { | |
| width: 100%; | |
| } | |
| @media only screen and (max-width: 651px) { | |
| .gmail { | |
| display: none !important; | |
| } | |
| } | |
| @media only screen and (max-width: 620px) { | |
| [class=wrapper] .one-col .column:last-child table:nth-last-child(2) td h1:last-child, | |
| [class=wrapper] .two-col .column:last-child table:nth-last-child(2) td h1:last-child, | |
| [class=wrapper] .three-col .column:last-child table:nth-last-child(2) td h1:last-child, | |
| [class=wrapper] .one-col-feature .column:last-child table:nth-last-child(2) td h1:last-child, | |
| [class=wrapper] .one-col .column:last-child table:nth-last-child(2) td h2:last-child, | |
| [class=wrapper] .two-col .column:last-child table:nth-last-child(2) td h2:last-child, | |
| [class=wrapper] .three-col .column:last-child table:nth-last-child(2) td h2:last-child, | |
| [class=wrapper] .one-col-feature .column:last-child table:nth-last-child(2) td h2:last-child, | |
| [class=wrapper] .one-col .column:last-child table:nth-last-child(2) td h3:last-child, | |
| [class=wrapper] .two-col .column:last-child table:nth-last-child(2) td h3:last-child, | |
| [class=wrapper] .three-col .column:last-child table:nth-last-child(2) td h3:last-child, | |
| [class=wrapper] .one-col-feature .column:last-child table:nth-last-child(2) td h3:last-child, | |
| [class=wrapper] .one-col .column:last-child table:nth-last-child(2) td p:last-child, | |
| [class=wrapper] .two-col .column:last-child table:nth-last-child(2) td p:last-child, | |
| [class=wrapper] .three-col .column:last-child table:nth-last-child(2) td p:last-child, | |
| [class=wrapper] .one-col-feature .column:last-child table:nth-last-child(2) td p:last-child, | |
| [class=wrapper] .one-col .column:last-child table:nth-last-child(2) td ol:last-child, | |
| [class=wrapper] .two-col .column:last-child table:nth-last-child(2) td ol:last-child, | |
| [class=wrapper] .three-col .column:last-child table:nth-last-child(2) td ol:last-child, | |
| [class=wrapper] .one-col-feature .column:last-child table:nth-last-child(2) td ol:last-child, | |
| [class=wrapper] .one-col .column:last-child table:nth-last-child(2) td ul:last-child, | |
| [class=wrapper] .two-col .column:last-child table:nth-last-child(2) td ul:last-child, | |
| [class=wrapper] .three-col .column:last-child table:nth-last-child(2) td ul:last-child, | |
| [class=wrapper] .one-col-feature .column:last-child table:nth-last-child(2) td ul:last-child { | |
| Margin-bottom: 24px !important; | |
| } | |
| [class=wrapper] .address, | |
| [class=wrapper] .subscription { | |
| display: block; | |
| float: left; | |
| width: 318px !important; | |
| text-align: center !important; | |
| } | |
| [class=wrapper] .address { | |
| padding-bottom: 0 !important; | |
| } | |
| [class=wrapper] .subscription { | |
| padding-top: 0 !important; | |
| } | |
| [class=wrapper] h1 { | |
| font-size: 36px !important; | |
| line-height: 42px !important; | |
| Margin-bottom: 18px !important; | |
| } | |
| [class=wrapper] h2 { | |
| font-size: 26px !important; | |
| line-height: 32px !important; | |
| Margin-bottom: 20px !important; | |
| } | |
| [class=wrapper] h3 { | |
| font-size: 18px !important; | |
| line-height: 22px !important; | |
| Margin-bottom: 16px !important; | |
| } | |
| [class=wrapper] p, | |
| [class=wrapper] ol, | |
| [class=wrapper] ul { | |
| font-size: 16px !important; | |
| line-height: 24px !important; | |
| Margin-bottom: 24px !important; | |
| } | |
| [class=wrapper] ol, | |
| [class=wrapper] ul { | |
| Margin-left: 18px !important; | |
| } | |
| [class=wrapper] li { | |
| padding-left: 2px !important; | |
| } | |
| [class=wrapper] blockquote { | |
| padding-left: 16px !important; | |
| } | |
| [class=wrapper] .two-col .column:nth-child(n + 3) { | |
| border-top: 1px solid #e9e9e9; | |
| } | |
| [class=wrapper] .btn { | |
| margin-bottom: 24px !important; | |
| } | |
| [class=wrapper] .btn a { | |
| display: block !important; | |
| font-size: 13px !important; | |
| font-weight: bold !important; | |
| line-height: 15px !important; | |
| padding: 10px 30px !important; | |
| } | |
| [class=wrapper] .column-bottom { | |
| font-size: 8px !important; | |
| line-height: 8px !important; | |
| } | |
| [class=wrapper] .first .column-bottom, | |
| [class=wrapper] .three-col .second .column-bottom { | |
| display: none; | |
| } | |
| [class=wrapper] .second .column-top, | |
| [class=wrapper] .third .column-top { | |
| display: none; | |
| } | |
| [class=wrapper] .image-frame { | |
| padding: 4px !important; | |
| } | |
| [class=wrapper] .header .logo { | |
| padding-left: 10px !important; | |
| padding-right: 10px !important; | |
| } | |
| [class=wrapper] .header .logo div { | |
| font-size: 26px !important; | |
| line-height: 32px !important; | |
| } | |
| [class=wrapper] .header .logo div img { | |
| display: inline-block !important; | |
| max-width: 280px !important; | |
| height: auto !important; | |
| } | |
| [class=wrapper] table.border, | |
| [class=wrapper] .header, | |
| [class=wrapper] .webversion, | |
| [class=wrapper] .footer { | |
| width: 320px !important; | |
| } | |
| [class=wrapper] .preheader .webversion, | |
| [class=wrapper] .header .logo a { | |
| text-align: center !important; | |
| } | |
| [class=wrapper] .preheader table, | |
| [class=wrapper] .border td { | |
| width: 318px !important; | |
| } | |
| [class=wrapper] .border td.border { | |
| width: 1px !important; | |
| } | |
| [class=wrapper] .image .border td { | |
| width: auto !important; | |
| } | |
| [class=wrapper] .title { | |
| display: none; | |
| } | |
| [class=wrapper] .footer .padded { | |
| text-align: center !important; | |
| } | |
| [class=wrapper] .footer .subscription .padded { | |
| padding-top: 20px !important; | |
| } | |
| [class=wrapper] .footer .social-link { | |
| display: block !important; | |
| } | |
| [class=wrapper] .footer .social-link table { | |
| margin: 0 auto 10px !important; | |
| } | |
| [class=wrapper] .footer .divider { | |
| display: none !important; | |
| } | |
| [class=wrapper] .one-col-feature .btn { | |
| margin-bottom: 28px !important; | |
| } | |
| [class=wrapper] .one-col-feature .image { | |
| margin-bottom: 28px !important; | |
| } | |
| [class=wrapper] .one-col-feature .divider .inner { | |
| padding-bottom: 28px !important; | |
| } | |
| [class=wrapper] .one-col-feature h1 { | |
| font-size: 42px !important; | |
| line-height: 48px !important; | |
| margin-bottom: 20px !important; | |
| } | |
| [class=wrapper] .one-col-feature h2 { | |
| font-size: 32px !important; | |
| line-height: 36px !important; | |
| margin-bottom: 18px !important; | |
| } | |
| [class=wrapper] .one-col-feature h3 { | |
| font-size: 26px !important; | |
| line-height: 32px !important; | |
| margin-bottom: 20px !important; | |
| } | |
| [class=wrapper] .one-col-feature p, | |
| [class=wrapper] .one-col-feature ol, | |
| [class=wrapper] .one-col-feature ul { | |
| font-size: 20px !important; | |
| line-height: 28px !important; | |
| margin-bottom: 28px !important; | |
| } | |
| [class=wrapper] .one-col-feature blockquote { | |
| font-size: 18px !important; | |
| line-height: 26px !important; | |
| margin-bottom: 28px !important; | |
| padding-bottom: 26px !important; | |
| padding-left: 0 !important; | |
| padding-top: 26px !important; | |
| } | |
| [class=wrapper] .one-col-feature blockquote p, | |
| [class=wrapper] .one-col-feature blockquote ol, | |
| [class=wrapper] .one-col-feature blockquote ul { | |
| font-size: 26px !important; | |
| line-height: 32px !important; | |
| } | |
| [class=wrapper] .one-col-feature blockquote p:last-child, | |
| [class=wrapper] .one-col-feature blockquote ol:last-child, | |
| [class=wrapper] .one-col-feature blockquote ul:last-child { | |
| margin-bottom: 0 !important; | |
| } | |
| [class=wrapper] .one-col-feature .column table:last-of-type h1:last-child, | |
| [class=wrapper] .one-col-feature .column table:last-of-type h2:last-child, | |
| [class=wrapper] .one-col-feature .column table:last-of-type h3:last-child { | |
| margin-bottom: 28px !important; | |
| } | |
| } | |
| @media only screen and (max-width: 320px) { | |
| [class=wrapper] td.border { | |
| display: none; | |
| } | |
| [class=wrapper] table.border, | |
| [class=wrapper] .header, | |
| [class=wrapper] .webversion, | |
| [class=wrapper] .footer { | |
| width: 318px !important; | |
| } | |
| } | |
| </style> | |
| <!--[if gte mso 9]> | |
| <style> | |
| .column-top { | |
| mso-line-height-rule: exactly !important; | |
| } | |
| </style> | |
| <![endif]--> | |
| </head> | |
| <body style="margin: 0;mso-line-height-rule: exactly;padding: 0;min-width: 100%;background-color: #fbfbfb"> | |
| <center class="wrapper" style="display: table;table-layout: fixed;width: 100%;min-width: 620px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;background-color: #fbfbfb"> | |
| <table class="header centered" style="border-collapse: collapse;border-spacing: 0;Margin-left: auto;Margin-right: auto;width: 602px"> | |
| <tbody><tr><td class="border" style="padding: 0;vertical-align: top;font-size: 1px;line-height: 1px;background-color: #e9e9e9;width: 1px"> </td></tr> | |
| <tr><td class="logo" style="padding: 32px 0;vertical-align: top;mso-line-height-rule: at-least"><div class="logo-left" style="font-size: 26px;font-weight: 700;letter-spacing: -0.02em;line-height: 32px;color: #41637e;font-family: sans-serif" align="left" id="emb-email-header"> | |
| Website Name or Logo | |
| </div></td></tr> | |
| </tbody> | |
| </table> | |
| <table class="border" style="border-collapse: collapse;border-spacing: 0;font-size: 1px;line-height: 1px;background-color: #e9e9e9;Margin-left: auto;Margin-right: auto" width="602"> | |
| <tbody><tr><td style="padding: 0;vertical-align: top">​</td></tr> | |
| </tbody></table> | |
| <table class="centered" style="border-collapse: collapse;border-spacing: 0;Margin-left: auto;Margin-right: auto"> | |
| <tbody><tr> | |
| <td class="border" style="padding: 0;vertical-align: top;font-size: 1px;line-height: 1px;background-color: #e9e9e9;width: 1px">​</td> | |
| <td style="padding: 0;vertical-align: top"> | |
| <table class="one-col" style="border-collapse: collapse;border-spacing: 0;Margin-left: auto;Margin-right: auto;width: 600px;background-color: #ffffff;font-size: 14px;table-layout: fixed"> | |
| <tbody><tr> | |
| <td class="column" style="padding: 0;vertical-align: top;text-align: left"> | |
| <div><div class="column-top" style="font-size: 32px;line-height: 32px"> </div></div> | |
| <table class="contents" style="border-collapse: collapse;border-spacing: 0;table-layout: fixed;width: 100%"> | |
| <tbody><tr> | |
| <td class="padded" style="padding: 0;vertical-align: top;padding-left: 32px;padding-right: 32px;word-break: break-word;word-wrap: break-word"> | |
| <p style="Margin-top: 0;color: #565656;font-family: Georgia,serif;font-size: 16px;"> | |
| Hello Firs Name, | |
| </p> | |
| <p style="color: #565656; font-family: Georgia,serif; font-size: 16px;">Email body will go here</p> | |
| <p><span style="font-family: Georgia, serif; font-size: 16px; color: #565656">Have a great Day!<br /> | |
| Website Name | |
| </span></p> | |
| <p> </p></td> | |
| </tr> | |
| </tbody></table> | |
| <div class="column-bottom" style="font-size: 8px;line-height: 8px"> </div> | |
| </td> | |
| </tr> | |
| </tbody></table> | |
| </td> | |
| <td class="border" style="padding: 0;vertical-align: top;font-size: 1px;line-height: 1px;background-color: #e9e9e9;width: 1px">​</td> | |
| </tr> | |
| </tbody></table> | |
| <table class="border" style="border-collapse: collapse;border-spacing: 0;font-size: 1px;line-height: 1px;background-color: #e9e9e9;Margin-left: auto;Margin-right: auto" width="602"> | |
| <tbody><tr><td style="padding: 0;vertical-align: top">​</td></tr> | |
| </tbody></table> | |
| <div class="spacer" style="font-size: 1px;line-height: 32px;width: 100%"> </div> | |
| <table class="footer centered" style="border-collapse: collapse;border-spacing: 0;Margin-left: auto;Margin-right: auto;width: 602px"> | |
| <tbody> | |
| <tr><td class="border" style="padding: 0;vertical-align: top;font-size: 1px;line-height: 1px;background-color: #e9e9e9;width: 1px"> </td></tr> | |
| <tr> | |
| <td style="padding: 0;vertical-align: top"> | |
| <table style="border-collapse: collapse;border-spacing: 0"> | |
| <tbody><tr> | |
| <td class="address" style="padding: 0;vertical-align: top;width: 250px;padding-top: 32px;padding-bottom: 64px"> | |
| <table class="contents" style="border-collapse: collapse;border-spacing: 0;table-layout: fixed;width: 100%"> | |
| <tbody><tr> | |
| <td class="padded" style="padding: 0;vertical-align: top;padding-left: 0;padding-right: 10px;word-break: break-word;word-wrap: break-word;text-align: left;font-size: 12px;line-height: 20px;color: #999;font-family: Georgia,serif"> | |
| Website Name | |
| </td> | |
| </tr> | |
| </tbody></table> | |
| </td> | |
| <td class="subscription" style="padding: 0;vertical-align: top;width: 350px;padding-top: 32px;padding-bottom: 64px"> | |
| <table class="contents" style="border-collapse: collapse;border-spacing: 0;table-layout: fixed;width: 100%"> | |
| <tbody><tr> | |
| <td class="padded" style="padding: 0;vertical-align: top;padding-left: 10px;padding-right: 0;word-break: break-word;word-wrap: break-word;font-size: 12px;line-height: 20px;color: #999;font-family: Georgia,serif;text-align: right"> | |
| You are getting this email because you are registered with Website Name. | |
| </td> | |
| </tr> | |
| </tbody></table> | |
| </td> | |
| </tr> | |
| </tbody></table> | |
| </td> | |
| </tr> | |
| </tbody></table> | |
| </center> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment