---
layout: site
leadingpath: ../
---

<!-- Modal -->
<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="timerModalLabel">Help / Shortcuts</h4>
      </div>
      <div class="modal-body">
        <table>
          <tr>
            <th>Keyboard Command</th>
            <th>Feature</th>
          </tr>
          <tr>
            <td><code>?</code></td>
            <td>Hide/show help</td>
          </tr>
          <tr>
            <td><code>shift</code>+<code>t</code></td>
            <td>Hide/show table of contents</td>
          </tr>
        </table>

        <table>
          <tr>
            <th>URL Command</th>
            <th>Feature</th>
          </tr>
          <tr>
            <td><code>?teacher=[github-user]</code></td>
            <td>Auto-generated teacher slide</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

<div id="help" class="help">
  <div class="content">

  </div>
</div>



<!-- Modal -->
<div class="modal fade" id="timerModal" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content text-center">
      <input type="number" id="minutes" name="minutes" min="1" max="60" value="5" placeholder="min" class="form-control time-amount">
      <div class="time-left" id="time-left"></div>

      <div class="modal-footer">
        <button id="start-stop" type="submit" class="btn btn-default">Start</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="col-content deck  col-md-12 col-sm-12 col-xs-12 materials curriculum shift-left">
  <div class="deprecation-notice">
    Please note: This class and curriculum have now become a part of the two day <a href="https://services.github.com/kit/">GitHub for Developers course.</a>
  </div>
  <div id="teacher" class="slide hidden">
    <div class="alignment">
      <div id="teacher-avatar"></div>
      <div class="" id="teacher-info">

        <h3 id="teacher-name"></h3>

        <span id="teacher-username">
          <span class="octicon octicon-octoface"></span>
        </span>

        <span id="teacher-email">
          <span class="octicon octicon-mail"></span>
        </span>

        <span id="teacher-organization">
          <span class="octicon octicon-organization"></span>
        </span>

        <span id="teacher-location">
          <span class="octicon octicon-location"></span>
        </span>

        <div class="teacher-badges">
          <span id="teacher-repo" class="">
            <span class="octicon octicon-repo"></span>
          </span>

          <span id="teacher-followers" class="">
            <span class="octicon octicon-person"></span>
          </span>

          <span id="teacher-following" class="">
            <span class="octicon octicon-steps"></span>
          </span>
        </div>
      </div>
    </div>
  </div>

  {{ content }}
</div>


<div class="col-toc col-md-2 col-sm-2 col-xs-2 shift-left">
  <div id="toc-wrapper">
    <div id="toc" data-spy="affix" data-offset-top="145">
      <h4>Table of Contents</h4>
      <ul id="toc-list" class="nav nav-pills nav-stacked" role="tablist">
        <li></li>
      </ul>
      <ul class="nav display-controls">
        <li>
          <input type="checkbox" name="slide-only" id="slide-only-toggle" class="slide-only-check" value="true">
          <label id="slides-only" for="slide-only-toggle" class="slides-only-label">Slides Only</label>
        </li>
        <li>
          <div class="timer-toggle"></div>
          <input type="checkbox" name="timer-check" id="timer-check" class="timer-check" value="true">
          <label for="timer-check" class="timer-label" data-toggle="modal" data-target="#timerModal">Timer</label>
        </li>
      </ul>
    </div>
  </div>
</div>