Email test

Email-test.markdown

Email test

Forked from Paperless Post's Pen Email test.

A Pen by Reuben Ingber on CodePen.

License.

index.html

<div>
  <table width="600px" border="0" align="center">
    <tr align="center" height="100px">
      <td><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175463/logo_singlebird.png" width="50px"/></td>
    </tr>
    
    <tr align="center" height="100px" style="font-size: 12px">
      <td><em>"If you happended to take photos at the event, I'd love if you shared them to the event gallery!" <br /> - Kelly Sly</em></td>
    </tr>
    
    <tr align="center" height="300px">
      <td><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175463/photo_upload.png" /></td>
    </tr>
    
    <tr align="center" height="100px">
      <td><em>Or, upload with the <a href="#">iPhone App</a></em></td>
    </tr>
    <tr class="content">
      <td align="center" height="150px">
        <span class="title">BUTTER PARTY <br /></span>
        <span class="details">Monday, November 24th, 2014 at 7:00 PM <br />
        <br /> <br /></span>
        <span class="address">32 Fake Street</span>
      </td>
    </tr>
    <table align="center">
      <tr height="150px" style="font-size: 14px">
        <td align="center" width="100px"><a href="#">View Event</a></td>
        <td align="center" width="100px"><a href="#">View Map</a></td>
        <td align="center">Add to Calendar: <a href="#">Google</a>, <a href="#">Outlook</a>, <a href="#">Yahoo</a>, or <a href="#">iCal</a></td>
      </tr>
    </table>
    
    <tr align="center" height="100px">
      <td><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175463/logo_full_large.png"" width="50px"/></td>
    </tr>
  </table>
</div>
 
 
 
<div>
  <div><!-- Example of what the email should look like -->
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175463/photos_email.png" />
  </div>
  
  <div><!-- Resources -->
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175463/logo_singlebird.png" /><!-- gray logo -->
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175463/photo_upload.png" /><!-- start sharing -->
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175463/logo_full_large.png" /><!-- ppost logo -->
  </div>
</div>

style.css

.content {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.title {
  line-height: 2;
}

a {
  color: #A6863F;
}