V2 Newsletter

index.pug

// 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++
                
             
            

v2-newsletter.markdown

V2 Newsletter

A Pen by Ryon on CodePen.

License.