Created
January 25, 2018 00:05
-
-
Save ryon/d67681ab2289939ccb14ea2a7423f8f2 to your computer and use it in GitHub Desktop.
V2 Newsletter
This file contains hidden or 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
| // https://litmus.com/community/learning/24-how-to-code-a-responsive-email-from-scratch | |
| doctype html | |
| html(lang="en") | |
| head | |
| link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700") | |
| style. | |
| /* Some resets and issue fixes */ | |
| #outlook a { padding:0; } | |
| body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; } | |
| .ReadMsgBody { width: 100%; } | |
| .ExternalClass {width:100%;} | |
| .backgroundTable {margin:0 auto; padding:0; width:100%;!important;} | |
| table td {border-collapse: collapse;} | |
| .ExternalClass * {line-height: 115%;} | |
| /* End reset */ | |
| style. | |
| body { | |
| font-family: 'Nunito Sans', sans-serif; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| color: #900; | |
| } | |
| a { | |
| color: #c00; | |
| } | |
| a img { | |
| border: 0; | |
| } | |
| h1 img { | |
| vertical-align: -.375em | |
| } | |
| .main-table { | |
| margin: 2em auto; | |
| max-width: 720px; | |
| min-width: 480px; | |
| } | |
| td, th { | |
| padding: 0; | |
| } | |
| th { | |
| text-align: left; | |
| } | |
| th h1, | |
| th h3 { | |
| margin: 0 0 .25em; | |
| } | |
| h2 { | |
| margin-top: 1.5em; | |
| } | |
| .rule { | |
| border-bottom: 1px solid #ccc; | |
| } | |
| .flex { | |
| width: 100%; | |
| } | |
| .pad { | |
| padding-right: 1.5em; | |
| } | |
| .prop-title { | |
| margin-bottom: 0; | |
| } | |
| .projects, | |
| .press-links { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .project { | |
| background-color: #f5f0f0; | |
| margin: 0 0 .25em; | |
| paddding: 0; | |
| } | |
| .press-link { | |
| border-bottom: 1px solid #ccc; | |
| padding: 1em 0; | |
| } | |
| .press-link:first-child { | |
| padding-top: 0; | |
| } | |
| .press-link td { | |
| vertical-align: top | |
| } | |
| .press-link time { | |
| color: #888; | |
| } | |
| .press-link p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .thumbnail { | |
| display: block; | |
| line-height: 1; | |
| } | |
| .m-0 { | |
| margin: 0 !important; | |
| } | |
| .mt-0 { | |
| margin-top: 0 !important; | |
| } | |
| .nowrap { | |
| white-space: nowrap; | |
| } | |
| .responsive-img { | |
| height: auto; | |
| width: 100%; | |
| } | |
| .text-right { | |
| text-align: right !important; | |
| } | |
| ul { | |
| list-style: square; | |
| padding-left: 1.125em; | |
| } | |
| body | |
| table.main-table | |
| tr | |
| th.flex | |
| h1 | |
| img(src="http://nebula.wsimg.com/de337482dc667c6ac62a73074ec086fc?AccessKeyId=89C9E52D920261C8EBB1&disposition=0&alloworigin=1", | |
| width="113", | |
| height="50", | |
| alt="V2 Properties") | |
| | | |
| | Newsletter | |
| th.nowrap.text-right(style="padding-top: .6667em") | |
| h3 September 2018 | |
| tr | |
| td.rule(colspan="2") | |
| tr | |
| td(colspan="2", style="padding: 0 .5em") | |
| h2 Vince’s message | |
| p Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, aperiam corporis tempora reprehenderit nulla minima voluptas id rem ab harum, libero doloribus possimus doloremque quisquam, sed ut non cum nam? | |
| p Ea quos libero quidem repellat, itaque incidunt, vero cumque voluptatibus ipsa delectus perspiciatis, doloribus autem dolor expedita. Sunt odit illum vitae! Velit! | |
| h2 Featured project | |
| .featured-project | |
| a(href="#") | |
| img.responsive-img(src="https://placeimg.com/960/640/arch", width="480", height="320") | |
| h3 399 Market St | |
| table.props.flex | |
| tr | |
| td.prop-pair.half | |
| h4.prop-title.mt-0 Neighborhood | |
| | East Passyunk | |
| td.prop-pair.half | |
| h4.prop-title.mt-0 Listing Price | |
| | $499,999 | |
| h4.prop-title Features | |
| ul.mt-0 | |
| each feature in ['Roof deck', 'Walk-in closets', 'Pool', 'Off-street parking'] | |
| li= feature | |
| h4.prop-title Description | |
| p.mt-0 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum excepturi vitae blanditiis libero soluta eos totam voluptate porro molestiae cum sit quas sint, a odio. Ipsum error ab corporis vel. | |
| h2 More projects | |
| - var n = 0 | |
| ul.projects | |
| while n < 5 | |
| li.project | |
| table.flex | |
| tr | |
| td.pad | |
| a(href="#"): img.thumbnail(src="https://placeimg.com/160/160/arch", width="80", height="80") | |
| td.flex.pad | |
| a(href="#"): h4.m-0 | |
| | 399 Market St | |
| div East Passyunk | |
| td.pad | |
| | $499,999 | |
| - n++ | |
| h2 Press links | |
| - var n = 0 | |
| ul.press-links | |
| while n < 5 | |
| li.press-link | |
| table.flex | |
| tr | |
| td.pad.flex | |
| a(href="#"): h4.m-0 Hard Hat Tour: 1423 N. Myrtlewood Street | |
| div: time Jan 24, 2018 | |
| p By developing long-term relationships with trusted partners, the prolific builder delivers feature-packed homes at modest prices to neighborhoods all around Center City. | |
| td: a(href="#"): img.thumbnail(src="https://placeimg.com/160/160/arch", width="80", height="80") | |
| - n++ | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment