<body class="hp education">
  <a id="new"></a>

  <div class="page">

    <header class="header-Base" role="banner">
      <nav class="header-Nav clearfix" role="navigation">
          <a href="#!" title="show small screen nav" class="small-Nav">
            <img src="/img/nav-Icon.png" alt="navigation icon" />
          </a>
          <ul class="h-Nav constant-Nav" role="presentation">
            <%== erb :'_header_links', layout: false %>
          </ul>

          <ul class="status-Nav">

            <% if !signed_in? %>
              <li>
                <a href="/signin" class="sign-In">Sign In</a>
              </li>
            <% else %>
              <li>
                <a href="/dashboard" class="sign-In">Dashboard</a>
              </li>
              <li>
                <a href="/settings" class="sign-In">Settings</a>
              </li>
              <li>
                <a href="/signout" class="sign-In">Sign Out</a>
              </li>
            <% end %>
          </ul>
        </nav>

        <%== flash_display centered: true %>

<div class="int-Logo hp-Logo">
<a href="/" title="back to home">
  <span class="hidden">Neocities.org</span>
  <img src="/img/cat.png" alt="Neocities.org" />
</a>
</div>

<section class="header-Intro">
<h1 class="logo header-Content content">
  <span class="hidden">Neocities for Education</span>
  <img src="/img/neocities-logo-education.png" alt="Neocities.org" />
</h1>
</section>

<div class="header-Outro">
<div class="row header-Content content">
  <div class="col intro">
    <h3 class="delta">A great place to learn how to build websites</h2>
    <img src="/img/heartcat.png" alt="Neocities cat with heart over her head" class="float-Right">
    <p class="intro-text">Completely free and continuously under development, we're building Neocities into a simple and intuitive web hosting service for students learning HTML and CSS for the first time. Give us a try and <a href="/contact">let us know</a> what you think!</p>

    <h3 class="delta">Tools for creation and review</h2>
    <img src="/img/about-neocities.png" alt="An artist easel with a paintbrush that says www on it" class="float-Left">
    <p class="intro-text">Neocities has a great built-in HTML editor and drag-and-drop upload. Instructors can easily review all class websites using our class tag feature. By signing up using this education page, students will get an experience tailored for them, and they'll only see sites from their class in the gallery.</p>
  </div>

  <div class="col signup-Area">
    <% if signed_in? %>

      <div class="signup-Form">
        <div class="content">
          <h3 class="gamma txt-Center">Build your Website!</h3>
        </div>
        <p class="txt-Center">
          Go to your dashboard to<br> start editing your website!
        </p>
        <br />
        <div class="txt-Center">
          <a href="/dashboard" class="btn-Action">Get Started</a>
        </div>
      </div>
    <% else %>
      <form id="createSiteForm" class="signup-Form" onsubmit="return false">
        <input type="hidden" name="csrf_token" value="<%= csrf_token %>">
        <input type="hidden" name="is_education" value="true">
        <fieldset class="content">
          <h2 class="gamma">Class Sign Up</h2>
          <hr />
          <div class="siteCreateInputs">
            <label for="create-Input">User Name</label>
            <input type="text" name="prevent_autofill_username" id="prevent_autofill_username" value="" style="position:absolute; top:-2000px; left:-2000px;" />
            <input type="password" name="prevent_autofill_password" id="prevent_autofill_password" value="" style="position:absolute; top:-2000px; left:-2000px;" />
            <input type="text" class="input-Area" id="create-Input" name="username" placeholder="my-site-name" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
            <label for="create-Input" id="domain-name">.neocities.org</label>

            <label for="tags-input">Class Tag</label>
            <input type="text" class="input-Area" id="tags-input" name="new_tags_string" placeholder="E.g. SmithSummer2015" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />

            <div class="col col-50" style="padding-left:0;">
              <label for="password-input">
                Password
              </label>
              <input type="password" class="input-Area" id="password-input"
                      name="password" placeholder="password"
                      data-placement="left" data-trigger="manual"
                      autocapitalize="off" autocorrect="off" autocomplete="off" />
            </div>

            <div class="col col-50">
              <label for="email-input">
                Email
              </label>
              <input type="email" class="input-Area"
                     id="email-input" name="email"
                     placeholder="me@example.com" data-placement="left"
                     data-trigger="manual" autocapitalize="off"
                     autocorrect="off" autocomplete="off" />
            </div>

            <div class="col col-50" style="padding-left:0;">

              <label>

              </label>
            </div>

            <div class="col col-50">
              <div style="margin-top: 15px">
                <input type="submit" value="Create My Site" class="btn-Action float-Right" />
              </div>
            </div>
          </div>
        </fieldset>
      </form>

    <% end %>

  </div> <!-- end .col-50 -->

</div> <!-- end .row -->

</div> <!-- end .header-Outro -->

</header>

<!--

<main class="content-Base">

<div class="section instructor-quotes">
<h2 class="delta">What Instructors Say</h2>
<div class="row content">
  <div class="col col-33">
    <div class="image" style="width:130px;height:130px;background:#aaa"></div>
    <h3>Instructor Name<br>
      Location<br>
      Class name</h3>

    <p>"Neocities was an excellent resource for my students - it made everything very easy.
      The Neocities team did a great job responding to any    questions I had."</p>
  </div>
  <div class="col col-33">
    <div class="image" style="width:130px;height:130px;background:#aaa"></div>
    <h3>Instructor Name<br>
      Location<br>
      Class name</h3>

    <p>"Neocities was an excellent resource for my students - it made everything very easy.
      The Neocities team did a great job responding to any    questions I had."</p>
  </div>
  <div class="col col-33">
    <div class="image" style="width:130px;height:130px;background:#aaa"></div>
    <h3>Instructor Name<br>
      Location<br>
      Class name</h3>

    <p>"Neocities was an excellent resource for my students - it made everything very easy.
      The Neocities team did a great job responding to any    questions I had."</p>
  </div>
</div>
</div>

<div class="section support">
<h2>Support Us</h2>
<div class="row quote">
  <div class="col" style="">
    <p>Neocities is funded directly by our community through supporter plans and donations. We will never sell users' personal data or embed advertising on member sites. Your support allows us to pay for server costs and continue working on Neocities full-time. You can support us by making a <a href="/donate">one-time donation</a> or by <a href="/supporter">subscribing for $5/month</a>.</p>
  </div>
</div>
</div>
</main>

-->

<footer class="footer-Base" role="contentinfo">
<div class="footer-Intro">
  <div class="footer-Content">
    <div class="row">
      <div class="col col-33">
        <div class="f-Col f-Col-1 clearfix">
          <span class="footer-icon"></span>
          <h2 class="delta">Support Us</h2>
          <p class="tiny">
            Neocities is funded by <a href="/supporter">supporters</a> and <a href="/donate">donations</a>. If you’d like to contribute, you can help us pay our server costs using credit card, or PayPal.
          </p>
          <a href="/donate" title="Donate to Neocities" class="action-Link">Donate Today</a>
        </div>
      </div>
      <div class="col col-33">
        <div class="f-Col f-Col-2 clearfix">
          <span class="footer-icon"></span>
          <h2 class="delta">About Us</h2>
          <p class="tiny">
            Neocities is here to bring back the creativity and
            free expression to the world wide web that made it great.
          </p>
          <a href="/about" title="More about Neocities" class="action-Link">More About Us</a>
        </div>
      </div>
      <div class="col col-33">
        <div class="f-Col f-Col-3 clearfix">
          <span class="footer-icon"></span>
          <h2 class="delta">Latest News</h2>
          <p class="tiny">
            The latest news on Neocities can be found on our blog.
          </p>
          <a href="//blog.neocities.org" title="Read about Neocities news and updates" class="action-Link">Read More</a>
        </div>
      </div>
    </div>
  </div>
</div>

<%== erb :'_footer', layout: false %>
</footer>

  </div>
  <%== erb :'_index_signup_script', layout: false %>
</body>
