<!-- No longer in use - use teacherMain.hb -->

<!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>
  {{#block "head"}}
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width"/>
  {{!-- <meta name="viewport" content="width=320, target-densitydpi=device-dpi"> --}}
  {{!--  type="text/css" --}}
  <style>
    /* INCLUDE WEBFONTS */
    @import url('http://www.classdojo.com/webfonts/LitteraText.css');
    /*@import url('http://www.classdojo.com/webfonts/LitteraPlain.css');*/
  </style>

  <link rel="stylesheet" type="text/css" href="css/3/ink.css">
  <link rel="stylesheet" type="text/css" href="css/3/custom.css">

  <style>
    /*  Media Queries */

    @media only screen and (max-device-width: 600px) {

      table[class="body"] img {
        width: auto !important;
        height: auto !important;
      }

      table[class="body"] center {
        min-width: 0 !important;
      }

      table[class="body"] .container {
        width: 95% !important;
      }

      table[class="body"] .row {
        width: 100% !important;
        display: block !important;
      }

      table[class="body"] .wrapper {
        display: block !important;
        padding-right: 0 !important;
      }

      table[class="body"] .columns,
      table[class="body"] .column {
        table-layout: fixed !important;
        float: none !important;
        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
        display: block !important;
      }

      table[class="body"] .wrapper.first .columns,
      table[class="body"] .wrapper.first .column {
        display: table !important;
      }

      table[class="body"] table.columns td,
      table[class="body"] table.column td {
        width: 100% !important;
      }

      table[class="body"] .columns td.one,
      table[class="body"] .column td.one { width: 8.333333% !important; }
      table[class="body"] .columns td.two,
      table[class="body"] .column td.two { width: 16.666666% !important; }
      table[class="body"] .columns td.three,
      table[class="body"] .column td.three { width: 25% !important; }
      table[class="body"] .columns td.four,
      table[class="body"] .column td.four { width: 33.333333% !important; }
      table[class="body"] .columns td.five,
      table[class="body"] .column td.five { width: 41.666666% !important; }
      table[class="body"] .columns td.six,
      table[class="body"] .column td.six { width: 50% !important; }
      table[class="body"] .columns td.seven,
      table[class="body"] .column td.seven { width: 58.333333% !important; }
      table[class="body"] .columns td.eight,
      table[class="body"] .column td.eight { width: 66.666666% !important; }
      table[class="body"] .columns td.nine,
      table[class="body"] .column td.nine { width: 75% !important; }
      table[class="body"] .columns td.ten,
      table[class="body"] .column td.ten { width: 83.333333% !important; }
      table[class="body"] .columns td.eleven,
      table[class="body"] .column td.eleven { width: 91.666666% !important; }
      table[class="body"] .columns td.twelve,
      table[class="body"] .column td.twelve { width: 100% !important; }

      table[class="body"] td.offset-by-one,
      table[class="body"] td.offset-by-two,
      table[class="body"] td.offset-by-three,
      table[class="body"] td.offset-by-four,
      table[class="body"] td.offset-by-five,
      table[class="body"] td.offset-by-six,
      table[class="body"] td.offset-by-seven,
      table[class="body"] td.offset-by-eight,
      table[class="body"] td.offset-by-nine,
      table[class="body"] td.offset-by-ten,
      table[class="body"] td.offset-by-eleven {
        padding-left: 0 !important;
      }

      table[class="body"] table.columns td.expander {
        width: 1px !important;
      }

      table[class="body"] .right-text-pad,
      table[class="body"] .text-pad-right {
        padding-left: 10px !important;
      }

      table[class="body"] .left-text-pad,
      table[class="body"] .text-pad-left {
        padding-right: 10px !important;
      }

      table[class="body"] .hide-for-small,
      table[class="body"] .show-for-desktop {
        display: none !important;
      }

      table[class="body"] .show-for-small,
      table[class="body"] .hide-for-desktop {
        display: inherit !important;
      }
    }

    /* REPONSIVE FOR MOBILE */

    @media only screen and (max-device-width: 600px) {

      td#background {
        background-color: #ffffff !important;
      }

      img#logo {
        width: 150px !important;
        height: 49px !important;
      }

      table[class="body"] .container {
        width: 100% !important;
      }

      table[class="body"] table.twelve.columns {
        margin: 0;
        width: 95% !important;
      }

      table[class="body"] .text-pad {
        padding-left: 10px !important;
        padding-right: 10px !important;
      }

      table[class="body"] .right-text-pad {
        padding-left: 10px !important;
      }

      table[class="body"] .left-text-pad {
        padding-right: 10px !important;
      }
    }
    /* END REPONSIVE FOR MOBILE */
  </style>
  {{/block}}
</head>
<body>
  <table class="body">
    <tr>
      <td class="center" id="background" align="center" valign="top" bgcolor="#f0f0f0">
        <center>

          {{!-- Start header --}}
          <table class="row header">
            <tr>
              <td class="center" align="center">
                <center>

                  <table class="container">
                    <tr>
                      <td class="wrapper last">

                        <center>
                          <table class="twelve columns">
                            <tr>

                              <td class="twelve columns">
                                <center>
                                  <img class="center" id="logo" src="http://pstatic.classdojo.com/img/emails/trigger-email-logo.png" width="150" height="49" alt="ClassDojo logo – please enable images for this email">
                                </center>
                              </td>
                              <td class="expander"></td>

                            </tr>
                          </table>
                        </center>

                      </td>
                    </tr>
                  </table>

                </center>
              </td>
            </tr>
          </table>
          {{!-- End header --}}

          {{!-- Start paper container, main body content --}}
          <table class="container" id="paper" bgcolor="#ffffff">
            <tr>
              <td class="paper-padding">

                {{#block "body"}}

                <!-- content start -->

                {{!-- Title row --}}
                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <center>
                        <table class="twelve columns">
                          <tr>
                            <td class="text-pad">

                              <h2>Join your school on ClassDojo</h2>
                              <!-- <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> -->
                              <br />
                              <img width="500" height="353" class="center" src="http://static.classdojo.com/img/join_school/join_school3.png">

                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>
                      </center>

                    </td>
                  </tr>
                </table>
                {{!-- End title row --}}

                {{!-- Lead paragraph row --}}
                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <center>
                        <table class="twelve columns">
                          <tr>
                            <td class="text-pad">
                              <!-- <h5>Ut enim ad minim veniam</h5> -->
                              <!-- <small>This is a note.</small> -->
                              <p class="lead">Tim, hey! We noticed you haven't joined your school yet. We’ve been hard at work on some exciting new <a href="#" target="_blank">features for you</a> - and you'll need to join your school to get them...</p>

                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>
                      </center>

                    </td>
                  </tr>
                </table>
                {{!-- End lead paragraph row --}}

                {{!-- CTA big button row --}}
                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <center>
                        <table class="twelve columns">
                          <tr>
                            <td>

                              <center>
                                <!-- REMEMBER TO UPDATE THIS MSO VERSION WITH THE LINK AND TEXT OF YOUR CTA -->

                                <!--[if mso]>
                                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://classdojo.com" target="_blank" style="height: 60px; width: 280px; v-text-anchor: middle;" arcsize="7%" strokecolor="#fcb030" fill="t">
                                  <v:fill type="tile" src="http://c.classdojo.com/img/email/template3/orange-btn-reg.png" color="#fcb030" />
                                  <w:anchorlock/>
                                  <center style="color: #ffffff; font-family: sans-serif; font-size: 28px; font-weight: bold;">Join your school!</center>
                                </v:roundrect>
                                <![endif]-->

                                <a href="http://classdojo.com" id="orange-button" target="_blank">Join your school!</a>
                              </center>

                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>
                      </center>

                    </td>
                  </tr>
                </table>
                {{!-- End CTA big button row --}}

                {{!-- Link for yahoo row --}}
                <table class="row callout">
                  <tr>
                    <td class="wrapper last">

                      <center>
                        <table class="twelve columns">
                          <tr>
                            <td class="text-pad">
                              <table>
                                <tr>
                                  <td class="panel">
                                    <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#" target="_blank">Click it! »</a></p>
                                  </td>
                                </tr>
                              </table>
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>
                      </center>

                    </td>
                  </tr>
                </table>
                {{!-- End link for yahoo row --}}

                {{!-- Cheers row --}}
                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <center>
                        <table class="twelve columns">
                          <tr>
                            <td class="text-pad">
                              <p>
                                Cheers,<br />
                                The ClassDojo team
                              </p>
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>
                      </center>

                    </td>
                  </tr>
                </table>
                {{!-- End cheers row --}}

                <!-- content end -->
                {{/block}}
              </td>
            </tr>
          </table>
          {{!-- End paper container --}}

          {{!-- Start footer --}}
          {{#block "links"}}
          <table class="row footer-links">
            <tr>
              <td class="center" align="center">
                <center>

                  <table class="container">
                    <tr>
                      <td class="wrapper last">

                        <table class="twelve columns links">
                          <tr>
                            <td align="center">
                              <center>
                                <p style="text-align: center; color: #787878;">

                                  <a href="http://www.classdojo.com/about" target="_blank">About ClassDojo</a> &bull; <a href="http://www.classdojo.com/mission" target="_blank">Our mission</a> &bull; <a href="http://www.classdojo.com/helpdesk" target="_blank">Support</a> &bull; <a href="[unsubscribe]" target="_blank">Unsubscribe</a>

                                </p>
                              </center>
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </center>
              </td>
            </tr>
          </table>
          {{/block}}

          <table class="row footer-address">
            <tr>
              <td class="center" align="center">
                <center>

                  <table class="container">
                    <tr>
                      <td class="wrapper last">

                        <table class="twelve columns">
                          <tr>
                            <td align="center">
                              <center>
                                <p style="text-align: center; color: #787878;">
                                  Sent with love from ClassDojo HQ at:<br />
                                  735 Tehama Street • San Francisco, CA 94103
                                </p>
                              </center>
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </center>
              </td>
            </tr>
          </table>

          {{#block "apps"}}
          <table class="row footer">
            <tr>
              <td class="center" align="center">
                <center>

                  <table class="container">
                    <tr>
                      <td>

                        <table class="row">
                          <tr>
                            <td class="wrapper">

                              <table class="five columns hide-for-small">
                                <tr>
                                  <td>
                                  </td>
                                  <td class="expander"></td>
                                </tr>
                              </table>

                            </td>

                            <td class="wrapper">

                              <table class="three columns">
                                <tr>
                                  <td>

                                    <a href="http://www.classdojo.com/ios" target="_blank"><img src="http://c.classdojo.com/img/email/template3/ios@2x.png" width="130" height="40" /></a>

                                  </td>
                                  <td class="expander"></td>
                                </tr>
                              </table>

                            </td>

                            <td class="wrapper">

                              <table class="three columns">
                                <tr>
                                  <td>

                                    <a href="http://www.classdojo.com/android" target="_blank"><img src="http://c.classdojo.com/img/email/template3/android@2x.png" width="130" height="40" /></a>

                                  </td>
                                  <td class="expander"></td>
                                </tr>
                              </table>

                            </td>

                            <td class="wrapper last">

                              <table class="five columns hide-for-small">
                                <tr>
                                  <td>
                                  </td>
                                  <td class="expander"></td>
                                </tr>
                              </table>

                            </td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </center>
              </td>
            </tr>
          </table>
          {{/block}}

          <table class="row empty">
            <tr>
              <td class="center" align="center">
                <center>

                  <table class="container">
                    <tr>
                      <td class="wrapper last">

                        <table class="twelve columns">
                          <tr>
                            <td align="center">
                              <center>
                              </center>
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </center>
              </td>
            </tr>
          </table>
          {{!-- End footer --}}

        </center>
      </td>
    </tr>
  </table>
  {{!-- Fix for iOS gmail messing up the sizing --}}
  <div style="display:none; white-space:nowrap; font:15px courier; color:#efefef;">
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  </div>
</body>
</html>