<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shade WhiteBoard</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="wrap">
      <div class="row">
        <div class="large-15 columns primary-col">
          <h1>Your project title… <span>T - <pre>13</pre>:<pre>42</pre></span></h1>
          <!-- Container Width Classes: [small-# large-#] -->
          <!-- Color Classes: [secondary alert success] -->
          <!-- Radius Classes: [radius round] -->
          <!-- Progress Width Classes: [1 - 100] -->
          <div class="mobile-labels show-for-medium-down">
            <span class="radius success label">Open</span>
            <span class="radius warning label">Review</span>
            <span class="radius alert label">Closed</span>
          </div>
          <label class="show-for-large-up">Open</label>
          <div class="progress success">
            <span class="meter" style="width: 42%"></span>
          </div>
          <label class="show-for-large-up">Review</label>
          <div class="progress warning">
            <span class="meter" style="width: 75%"></span>
          </div>
          <label class="show-for-large-up">Closed</label>
          <div class="progress alert">
            <span class="meter" style="width: 84%"></span>
          </div>
        </div>
        <div class="large-8 large-offset-1 columns sidebar-col end">
          <ul>
            <li>milestone number 1</li>
            <li>milestone number 2</li>
            <li>milestone number 3</li>
          </ul>
          <h3>unsorted tasks</h3>
          <ul>
            <li>lorem ipsum dolor sit amet…</li>
          </ul>
        </div>
      </div>
    </div>
    <footer>
      <div class="row">
        <div class="large-2 columns nav-icon">
          <a href="#"><i class="fa fa-2x fa-home"></i></a>
        </div>
        <div class="large-2 large-offset-1 columns nav-icon">
          <a href="#"><i class="fa fa-2x fa-home"></i></a>
        </div>
        <div class="large-2 large-offset-1 columns nav-icon">
          <a href="#"><i class="fa fa-2x fa-home"></i></a>
        </div>
        <div class="large-2 large-offset-1 columns nav-icon">
          <a href="#"><i class="fa fa-2x fa-home"></i></a>
        </div>
        <div class="large-2 large-offset-1 columns nav-icon">
          <a href="#"><i class="fa fa-2x fa-home"></i></a>
        </div>
        <div class="large-2 large-offset-1 columns nav-icon">
          <a href="#"><i class="fa fa-2x fa-home"></i></a>
        </div>
        <div class="large-2 large-offset-1 columns nav-icon">
          <a href="#"><i class="fa fa-2x fa-home"></i></a>
        </div>
        <div class="large-3 large-offset-1 columns user-links">
          <ul class="inline-list">
            <li>
              <a href="#"><i class="fa fa-user"></i></a>
            </li>
            <li>
              <a href="#"><i class="fa fa-cog"></i></a>
            </li>
          </ul>
        </div>
    </footer>
    
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
