_layouts/email-with-events.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width"/>
    <title>{% TITLE %}</title>
    <style type="text/css">
      body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
      table{border-collapse:collapse;}
      img, a img{border:0; outline:none; text-decoration:none;}
      h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
      p{margin: 1em 0;}

      /*////// CLIENT-SPECIFIC STYLES //////*/
      .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
      .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
      table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
      #outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
      img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
      body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */

      /*////// FRAMEWORK STYLES //////*/
      .flexibleContainerCell{padding-top:20px; padding-Right:20px; padding-Left:20px;}
      .flexibleImage{height:auto;}
      .bottomShim{padding-bottom:20px;}
      .imageContent, .imageContentLast{padding-bottom:20px;}
      .nestedContainerCell{padding-top:20px; padding-Right:20px; padding-Left:20px;}

      /*////// GENERAL STYLES //////*/
      body, #bodyTable{background-color:#F5F5F5;}
      #bodyCell{padding-top:40px; padding-bottom:40px;}
      #emailBody{background-color:#FFFFFF; border:1px solid #DDDDDD; border-collapse:separate; border-radius:4px;}
      h1, h2, h3, h4, h5, h6{color:#202020; font-family:Helvetica; font-size:20px; line-height:125%; text-align:Left;}
      .textContent, .textContentLast{color:#404040; font-family:Helvetica; font-size:16px; line-height:125%; text-align:Left; padding-bottom:20px;}
      .textContent a, .textContentLast a{color:#2C9AB7; text-decoration:underline;}
      .nestedContainer{background-color:#E5E5E5; border:1px solid #CCCCCC;}
      .emailButton{background-color:#2C9AB7; border-collapse:separate; border-radius:4px;}
      .buttonContent{color:#FFFFFF; font-family:Helvetica; font-size:18px; font-weight:bold; line-height:100%; padding:15px; text-align:center;}
      .buttonContent a{color:#FFFFFF; display:block; text-decoration:none;}
      .emailCalendar{background-color:#FFFFFF; border:1px solid #CCCCCC;}
      .emailCalendarMonth{background-color:#2C9AB7; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; padding-top:10px; padding-bottom:10px; text-align:center;}
      .emailCalendarDay{color:#2C9AB7; font-family:Helvetica, Arial, sans-serif; font-size:60px; font-weight:bold; line-height:100%; padding-top:20px; padding-bottom:20px; text-align:center;}

      /* MOBILE STYLES */
      @media only screen and (max-width: 480px){          
        /* CLIENT-SPECIFIC STYLES */
        /* Force iOS Mail to render the email at full width. */
        body{width:100% !important; min-width:100% !important;}

        /* FRAMEWORK STYLES */
        table[id="emailBody"], table[class="flexibleContainer"]{width:100% !important;}
        img[class="flexibleImage"]{height:auto !important; width:100% !important;}
        table[class="emailButton"]{width:100% !important;}
        td[class="buttonContent"]{padding:0 !important;}
        td[class="buttonContent"] a{padding:15px !important;}
        td[class="textContentLast"], td[class="imageContentLast"]{padding-top:20px !important;}
        /*////// GENERAL STYLES //////*/
        td[id="bodyCell"]{padding-top:10px !important; padding-Right:10px !important; padding-Left:10px !important;}
      }
    </style>
    <!-- Outlook Conditional CSS -->
    <!--[if mso gte 12]>
      <style type="text/css">
        .flexibleContainer{display:block !important; width:100% !important;}
      </style>
    <![endif]-->      
  </head>
  <body>
    <center>
      <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
        <tr>
          <td align="center" valign="top" id="bodyCell">
              <!-- EMAIL CONTAINER // -->
              <table border="0" cellpadding="0" cellspacing="0" width="600" id="emailBody">

                <!-- HEADER // -->
                <tr>
                  <td align="center" valign="top">
                    <!-- CENTERING TABLE // -->
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                        <td align="center" valign="top">
                          <!-- FLEXIBLE CONTAINER // -->
                          <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
                            <tr>
                              <td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
                                  <tr>
                                    <td align="center" valign="top" class="nestedContainerCell">
                                      <!-- CONTENT TABLE // -->
                                      <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                          <td valign="top" class="textContent">
                                            <h1>The Adaptive Web</h1>
                                          </td>
                                        </tr>
                                      </table>
                                      <!-- // CONTENT TABLE -->
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                          <!-- // FLEXIBLE CONTAINER -->
                        </td>
                      </tr>
                    </table>
                    <!-- // CENTERING TABLE -->
                  </td>
                </tr>
                <!-- // HEADER -->

                <!-- POST // -->
                <tr>
                  <td align="center" valign="top">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                        <td align="center" valign="top">
                          <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
                            <tr>
                              <td align="center" valign="top" width="600" class="flexibleContainerCell">
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                  <tr>
                                    <td valign="top" class="textContent">
                                        <h2>Title</h2>
                                        <p>A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.</p>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <!-- // POST -->

                <!-- 2-UP LINKS // -->
                <tr>
                    <td align="center" valign="top">
                        <!-- CENTERING TABLE // -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td align="center" valign="top">
                                    <!-- FLEXIBLE CONTAINER // -->
                                    <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
                                        <tr>
                                            <td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
                                                    <tr>
                                                        <td valign="top" class="nestedContainerCell">


                                                            <!-- CONTENT TABLE // -->
                                                            <table align="Left" border="0" cellpadding="0" cellspacing="0" width="240" class="flexibleContainer">
                                                                <tr>
                                                                    <td valign="top" class="textContent">
                                                                        <h3>Left Column</h3>
                                                                        <br />
                                                                        A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                            <!-- // CONTENT TABLE -->


                                                            <!-- CONTENT TABLE // -->
                                                            <table align="Right" border="0" cellpadding="0" cellspacing="0" width="240" class="flexibleContainer">
                                                                <tr>
                                                                    <td valign="top" class="textContentLast">
                                                                        <h3>Right Column</h3>
                                                                        <br />
                                                                        A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                            <!-- // CONTENT TABLE -->


                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <!-- // FLEXIBLE CONTAINER -->
                                </td>
                            </tr>
                        </table>
                        <!-- // CENTERING TABLE -->
                    </td>
                </tr>
                <!-- // 2-UP LINKS -->

                <!-- PROMO BLOCK // -->
                <tr>
                    <td align="center" valign="top">
                        <!-- CENTERING TABLE // -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td align="center" valign="top">
                                    <!-- FLEXIBLE CONTAINER // -->
                                    <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
                                        <tr>
                                            <td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
                                                    <tr>
                                                        <td align="center" valign="top" class="nestedContainerCell">


                                                            <!-- CONTENT TABLE // -->
                                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                                <tr>
                                                                    <td valign="top" class="textContent">
                                                                        <h3>Callout</h3>
                                                                        <br />
                                                                        A kitten or kitty is a juvenile domesticated cat. A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="center" valign="top" class="bottomShim">
                                                                        <table border="0" cellpadding="0" cellspacing="0" width="260" class="emailButton">
                                                                            <tr>
                                                                                <td align="center" valign="middle" class="buttonContent">
                                                                                    <a href="#" target="_blank">Purchase Now</a>
                                                                                </td>
                                                                            </tr>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                            <!-- // CONTENT TABLE -->


                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <!-- // FLEXIBLE CONTAINER -->
                                </td>
                            </tr>
                        </table>
                        <!-- // CENTERING TABLE -->
                    </td>
                </tr>
                <!-- // PROMO BLOCK -->

                <!-- EVENTS // -->
                <tr>
                  <td align="center" valign="top">
                    <!-- CENTERING TABLE // -->
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                        <td align="center" valign="top">
                          <!-- FLEXIBLE CONTAINER // -->
                          <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
                            <tr>
                              <td align="center" valign="top" width="600" class="flexibleContainerCell bottomShim">
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="nestedContainer">
                                  <tr>
                                    <td align="center" valign="top" class="nestedContainerCell">
                                      <!-- CONTENT TABLE // -->
                                      <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr>
                                          <td valign="top" class="textContent">
                                            <h2>Upcoming Events</h2>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td align="center" valign="top" class="bottomShim">
                                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="event">
                                              <tr>
                                                <td valign="top" class="eventCell eventCell--left">
                                                  <table align="Right" border="0" cellpadding="0" cellspacing="0" width="160" class="flexibleContainer">
                                                    <tr>
                                                      <td align="center" valign="top" class="bottomShim"><table border="0" cellpadding="0" cellspacing="0" width="160" class="emailCalendar" align="Right" >
                                                        <tr>
                                                          <td align="center" valign="top" style="padding:5px;">
                                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                              <tr>
                                                                <td align="center" valign="top" class="emailCalendarMonth">September</td>
                                                              </tr>
                                                              <tr>
                                                                <td align="center" valign="top" class="emailCalendarDay">16</td>
                                                              </tr>
                                                            </table>
                                                          </td>
                                                        </tr>
                                                      </table>
                                                    </tr>
                                                  </table>
                                                  <table align="Left" border="0" cellpadding="0" cellspacing="0" width="320" class="flexibleContainer">
                                                    <tr>
                                                      <td valign="top" class="textContent">
                                                        <h3>Left Column</h3>
                                                        <p>A kitten or kitty is a juvenile domesticated cat. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.</p>
                                                      </td>
                                                    </tr>
                                                  </table>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td align="center" valign="top" class="bottomShim">
                                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="event">
                                              <tr>
                                                <td valign="top" class="eventCell eventCell--left">
                                                  <table align="Left" border="0" cellpadding="0" cellspacing="0" width="160" class="flexibleContainer">
                                                    <tr>
                                                      <td align="center" valign="top" class="bottomShim"><table border="0" cellpadding="0" cellspacing="0" width="160" class="emailCalendar" align="Right" >
                                                        <tr>
                                                          <td align="center" valign="top" style="padding:5px;">
                                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                              <tr>
                                                                <td align="center" valign="top" class="emailCalendarMonth">September</td>
                                                              </tr>
                                                              <tr>
                                                                <td align="center" valign="top" class="emailCalendarDay">16</td>
                                                              </tr>
                                                            </table>
                                                          </td>
                                                        </tr>
                                                      </table>
                                                    </tr>
                                                  </table>
                                                  <table align="Right" border="0" cellpadding="0" cellspacing="0" width="320" class="flexibleContainer">
                                                    <tr>
                                                      <td valign="top" class="textContent">
                                                        <h3>Right Column</h3>
                                                        <p>A kitten or kitty is a juvenile domesticated cat. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.</p>
                                                      </td>
                                                    </tr>
                                                  </table>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td valign="top" class="textContent">
                                            <hr>
                                            <p>If you’re giving a talk on a progressive enhancement-related topic, please ping me and I will add it to the event list.</p>
                                          </td>
                                        </tr>
                                      </table>
                                      <!-- // CONTENT TABLE -->
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                          <!-- // FLEXIBLE CONTAINER -->
                        </td>
                      </tr>
                    </table>
                    <!-- // CENTERING TABLE -->
                  </td>
                </tr>
                <!-- // EVENTS -->

                <!-- FOOTER // -->
                <tr>
                  <td align="center" valign="top">
                    <!-- CENTERING TABLE // -->
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                        <td align="center" valign="top">
                          <!-- FLEXIBLE CONTAINER // -->
                          <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
                            <tr>
                              <td align="center" valign="top" width="600" class="flexibleContainerCell">
                                <!-- CONTENT TABLE // -->
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                  <tr>
                                    <td valign="top" class="textContent">
                                      <p>Footer content</p>
                                    </td>
                                  </tr>
                                </table>
                                <!-- // CONTENT TABLE -->
                              </td>
                            </tr>
                          </table>
                          <!-- // FLEXIBLE CONTAINER -->
                        </td>
                      </tr>
                    </table>
                    <!-- // CENTERING TABLE -->
                  </td>
                </tr>
                <!-- // FOOTER -->

              </table>
              <!-- // EMAIL CONTAINER -->
          </td>
        </tr>
      </table>
    </center>
  </body>
</html>